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

package/dist/backend/inputs/LookupSelect.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Loader2, Search, X } from "lucide-react";
+import { Check, Loader2, Search, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Button } from "../../primitives/button.js";
 import { cn } from "@open-mercato/shared/lib/utils";
 function LookupSelect({
@@ -14,19 +15,32 @@ function LookupSelect({
   actionSlot,
   onReady,
   placeholder,
-  searchPlaceholder = placeholder ?? "Search\u2026",
-  clearLabel = "Clear selection",
-  emptyLabel = "No results",
-  loadingLabel = "Searching\u2026",
-  selectLabel = "Select",
-  selectedLabel = "Selected",
+  searchPlaceholder,
+  clearLabel,
+  emptyLabel,
+  loadingLabel,
+  selectLabel,
+  selectedLabel,
   minQueryHintLabel,
-  startTypingLabel = "Start typing to search.",
+  startTypingLabel,
   selectedHintLabel,
   disabled = false,
   loading: loadingProp = false,
   defaultOpen = false
 }) {
+  const t = useT();
+  const resolvedSearchPlaceholder = searchPlaceholder ?? placeholder ?? t("ui.lookupSelect.searchPlaceholder", "Search\u2026");
+  const resolvedClearLabel = clearLabel ?? t("ui.lookupSelect.clearSelection", "Clear selection");
+  const resolvedEmptyLabel = emptyLabel ?? t("ui.lookupSelect.noResults", "No results");
+  const resolvedLoadingLabel = loadingLabel ?? t("ui.lookupSelect.searching", "Searching\u2026");
+  const resolvedSelectLabel = selectLabel ?? t("ui.lookupSelect.select", "Select");
+  const resolvedSelectedLabel = selectedLabel ?? t("ui.lookupSelect.selected", "Selected");
+  const resolvedStartTypingLabel = startTypingLabel ?? t("ui.lookupSelect.startTyping", "Start typing to search.");
+  const resolvedMinQueryHintLabel = minQueryHintLabel ?? t(
+    "ui.lookupSelect.minQueryHint",
+    "Type at least {minQuery} characters or paste an id to search.",
+    { minQuery: String(minQuery) }
+  );
   const [query, setQuery] = React.useState("");
   const [items, setItems] = React.useState(options ?? []);
   const [loading, setLoading] = React.useState(false);
@@ -95,17 +109,17 @@ function LookupSelect({
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            className: "w-full rounded border pl-8 pr-2 py-2 text-sm",
+            className: "w-full h-10 rounded-lg border border-input bg-background pl-10 pr-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:shadow-focus focus-visible:border-brand-violet disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed",
             value: query,
             onChange: (event) => {
               setQuery(event.target.value);
               setHasTyped(true);
             },
-            placeholder: searchPlaceholder,
+            placeholder: resolvedSearchPlaceholder,
             disabled
           }
         )
@@ -115,60 +129,50 @@ function LookupSelect({
     shouldSearch ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       loading || loadingProp ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-        loadingLabel
+        resolvedLoadingLabel
       ] }) : null,
-      !loading && !loadingProp && !items.length ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: emptyLabel }) : null,
-      /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-80 overflow-y-auto", children: items.map((item) => {
+      !loading && !loadingProp && !items.length ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: resolvedEmptyLabel }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5", children: items.map((item) => {
         const isSelected = value === item.id;
+        const isInteractive = !item.disabled || isSelected;
         return /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex gap-3 rounded border bg-card p-3 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-              isSelected ? "border-primary/70 bg-primary/5" : "hover:border-primary/50"
+              "group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus",
+              isInteractive ? "cursor-pointer" : "cursor-not-allowed opacity-60",
+              isSelected ? "border-brand-violet bg-brand-violet/5 shadow-sm" : "border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm"
             ),
             role: "button",
             tabIndex: item.disabled ? -1 : 0,
             onClick: () => {
-              if (item.disabled && !isSelected) return;
+              if (!isInteractive) return;
               onChange(item.id);
             },
             onKeyDown: (event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
-                if (item.disabled && !isSelected) return;
+                if (!isInteractive) return;
                 onChange(item.id);
               }
             },
             "aria-pressed": isSelected,
+            "aria-disabled": item.disabled && !isSelected ? true : void 0,
+            title: isSelected ? resolvedSelectedLabel : resolvedSelectLabel,
             children: [
-              /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center overflow-hidden rounded border bg-muted", children: item.icon ?? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2022" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                    /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: item.title }),
-                    item.subtitle ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: item.subtitle }) : null,
-                    item.description ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: item.description }) : null
-                  ] }),
-                  item.rightLabel ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-xs font-medium text-muted-foreground", children: item.rightLabel }) : null
+              item.icon ? /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground", children: item.icon }) : /* @__PURE__ */ jsx("div", { className: cn(
+                "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors",
+                isSelected ? "border-brand-violet/40 bg-brand-violet/10 text-brand-violet" : "border-input bg-muted text-muted-foreground group-hover:border-foreground/20"
+              ), children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold uppercase", children: item.title.slice(0, 1) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-foreground", children: item.title }),
+                  item.rightLabel ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-overline font-medium uppercase tracking-wider text-muted-foreground", children: item.rightLabel }) : null
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: isSelected ? "secondary" : "outline",
-                    size: "sm",
-                    className: "shrink-0",
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      if (item.disabled && !isSelected) return;
-                      onChange(item.id);
-                    },
-                    disabled: item.disabled && !isSelected,
-                    children: isSelected ? selectedLabel : selectLabel
-                  }
-                ) })
-              ] })
+                item.subtitle ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: item.subtitle }) : null,
+                item.description ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground/70 truncate", children: item.description }) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "size-5 text-brand-violet", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("div", { className: "size-5", "aria-hidden": "true" }) })
             ]
           },
           item.id
@@ -184,12 +188,12 @@ function LookupSelect({
           onClick: () => onChange(null),
           children: [
             /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-            clearLabel
+            resolvedClearLabel
           ]
         }
       ) : null
-    ] }) : hasTyped ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: minQueryHintLabel ?? `Type at least ${minQuery} characters or paste an id to search.` }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: startTypingLabel }),
-    error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: emptyLabel }) : null
+    ] }) : hasTyped ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: resolvedMinQueryHintLabel }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: resolvedStartTypingLabel }),
+    error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", role: "alert", children: resolvedEmptyLabel }) : null
   ] });
 }
 export {

package/dist/backend/inputs/LookupSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/inputs/LookupSelect.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Loader2, Search, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type LookupSelectItem = {\n  id: string\n  title: string\n  subtitle?: string | null\n  badge?: string | null\n  icon?: React.ReactNode\n  disabled?: boolean\n  rightLabel?: string | null\n  description?: string | null\n}\n\ntype LookupSelectProps = {\n  value: string | null\n  onChange: (next: string | null) => void\n  fetchItems?: (query: string) => Promise<LookupSelectItem[]>\n  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>\n  options?: LookupSelectItem[]\n  minQuery?: number\n  actionSlot?: React.ReactNode\n  onReady?: (controls: { setQuery: (value: string) => void }) => void\n  searchPlaceholder?: string\n  placeholder?: string\n  clearLabel?: string\n  emptyLabel?: string\n  loadingLabel?: string\n  selectLabel?: string\n  selectedLabel?: string\n  minQueryHintLabel?: string\n  startTypingLabel?: string\n  selectedHintLabel?: (id: string) => string\n  disabled?: boolean\n  loading?: boolean\n  defaultOpen?: boolean\n}\n\nexport function LookupSelect({\n  value,\n  onChange,\n  fetchItems,\n  fetchOptions,\n  options,\n  minQuery = 2,\n  actionSlot,\n  onReady,\n  placeholder,\n  searchPlaceholder = placeholder ?? 'Search\u2026',\n  clearLabel = 'Clear selection',\n  emptyLabel = 'No results',\n  loadingLabel = 'Searching\u2026',\n  selectLabel = 'Select',\n  selectedLabel = 'Selected',\n  minQueryHintLabel,\n  startTypingLabel = 'Start typing to search.',\n  selectedHintLabel,\n  disabled = false,\n  loading: loadingProp = false,\n  defaultOpen = false,\n}: LookupSelectProps) {\n  const [query, setQuery] = React.useState('')\n  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])\n  const [loading, setLoading] = React.useState(false)\n  const [hasTyped, setHasTyped] = React.useState(defaultOpen)\n  const [error, setError] = React.useState<string | null>(null)\n  const [fetchKey, setFetchKey] = React.useState(0)\n  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n  const optionsWasArrayRef = React.useRef(Array.isArray(options))\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      optionsWasArrayRef.current = true\n      setItems(options)\n    } else if (optionsWasArrayRef.current) {\n      optionsWasArrayRef.current = false\n      setFetchKey((k) => k + 1)\n    }\n  }, [options])\n\n  React.useEffect(() => {\n    setQueryRef.current = setQuery\n    if (onReady) onReady({ setQuery })\n  }, [onReady, setQuery])\n\n  const shouldSearch =\n    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)\n  React.useEffect(() => {\n    if (disabled) {\n      setItems(options ?? [])\n      setLoading(false)\n      return\n    }\n    let cancelled = false\n    let timer: ReturnType<typeof setTimeout> | null = null\n    if (!shouldSearch) {\n      setItems(options ?? [])\n      setLoading(false)\n      setError(null)\n      return () => { cancelled = true }\n    }\n    setLoading(true)\n    setError(null)\n    timer = setTimeout(() => {\n      const requestId = Date.now()\n      const fetcher = fetchItemsRef.current\n      const loader = fetcher ?? (() => Promise.resolve(options ?? []))\n      loader(query.trim())\n        .then((result) => {\n          if (cancelled) return\n          setItems(result)\n        })\n        .catch((err) => {\n          if (cancelled) return\n          console.error('LookupSelect.fetchItems', err)\n          setError('error')\n        })\n        .finally(() => {\n          if (!cancelled) setLoading(false)\n        })\n      return requestId\n    }, 220)\n    return () => {\n      cancelled = true\n      if (timer) clearTimeout(timer)\n    }\n  }, [query, shouldSearch, fetchKey])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <input\n            className=\"w-full rounded border pl-8 pr-2 py-2 text-sm\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              setHasTyped(true)\n            }}\n            placeholder={searchPlaceholder}\n            disabled={disabled}\n          />\n        </div>\n        {actionSlot ? <div className=\"sm:self-start\">{actionSlot}</div> : null}\n      </div>\n      {shouldSearch ? (\n        <div className=\"space-y-2\">\n          {loading || loadingProp ? (\n            <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              {loadingLabel}\n            </div>\n          ) : null}\n          {!loading && !loadingProp && !items.length ? (\n            <p className=\"text-xs text-muted-foreground\">{emptyLabel}</p>\n          ) : null}\n          <div className=\"space-y-2 max-h-80 overflow-y-auto\">\n            {items.map((item) => {\n              const isSelected = value === item.id\n              return (\n                <div\n                  key={item.id}\n                  className={cn(\n                    'flex gap-3 rounded border bg-card p-3 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n                    isSelected ? 'border-primary/70 bg-primary/5' : 'hover:border-primary/50'\n                  )}\n                  role=\"button\"\n                  tabIndex={item.disabled ? -1 : 0}\n                  onClick={() => {\n                    if (item.disabled && !isSelected) return\n                    onChange(item.id)\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      if (item.disabled && !isSelected) return\n                      onChange(item.id)\n                    }\n                  }}\n                  aria-pressed={isSelected}\n                >\n                  <div className=\"flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center overflow-hidden rounded border bg-muted\">\n                    {item.icon ?? <span className=\"text-muted-foreground\">\u2022</span>}\n                  </div>\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <div className=\"flex items-start justify-between gap-2\">\n                      <div className=\"min-w-0\">\n                        <div className=\"truncate text-sm font-medium\">{item.title}</div>\n                        {item.subtitle ? (\n                          <div className=\"text-xs text-muted-foreground truncate\">{item.subtitle}</div>\n                        ) : null}\n                        {item.description ? (\n                          <div className=\"text-xs text-muted-foreground truncate\">{item.description}</div>\n                        ) : null}\n                      </div>\n                      {item.rightLabel ? (\n                        <div className=\"shrink-0 text-xs font-medium text-muted-foreground\">{item.rightLabel}</div>\n                      ) : null}\n                    </div>\n                    <div className=\"flex justify-end\">\n                      <Button\n                        type=\"button\"\n                        variant={isSelected ? 'secondary' : 'outline'}\n                        size=\"sm\"\n                        className=\"shrink-0\"\n                        onClick={(event) => {\n                          event.stopPropagation()\n                          if (item.disabled && !isSelected) return\n                          onChange(item.id)\n                        }}\n                        disabled={item.disabled && !isSelected}\n                      >\n                        {isSelected ? selectedLabel : selectLabel}\n                      </Button>\n                    </div>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n          {value ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-fit gap-1 text-sm font-normal\"\n              onClick={() => onChange(null)}\n            >\n              <X className=\"h-4 w-4\" />\n              {clearLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : hasTyped ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {minQueryHintLabel ?? `Type at least ${minQuery} characters or paste an id to search.`}\n        </p>\n      ) : (\n        <p className=\"text-xs text-muted-foreground\">{startTypingLabel}</p>\n      )}\n      {error ? <p className=\"text-xs text-destructive\">{emptyLabel}</p> : null}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, Loader2, Search, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type LookupSelectItem = {\n  id: string\n  title: string\n  subtitle?: string | null\n  badge?: string | null\n  icon?: React.ReactNode\n  disabled?: boolean\n  rightLabel?: string | null\n  description?: string | null\n}\n\ntype LookupSelectProps = {\n  value: string | null\n  onChange: (next: string | null) => void\n  fetchItems?: (query: string) => Promise<LookupSelectItem[]>\n  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>\n  options?: LookupSelectItem[]\n  minQuery?: number\n  actionSlot?: React.ReactNode\n  onReady?: (controls: { setQuery: (value: string) => void }) => void\n  searchPlaceholder?: string\n  placeholder?: string\n  clearLabel?: string\n  emptyLabel?: string\n  loadingLabel?: string\n  selectLabel?: string\n  selectedLabel?: string\n  minQueryHintLabel?: string\n  startTypingLabel?: string\n  selectedHintLabel?: (id: string) => string\n  disabled?: boolean\n  loading?: boolean\n  defaultOpen?: boolean\n}\n\nexport function LookupSelect({\n  value,\n  onChange,\n  fetchItems,\n  fetchOptions,\n  options,\n  minQuery = 2,\n  actionSlot,\n  onReady,\n  placeholder,\n  searchPlaceholder,\n  clearLabel,\n  emptyLabel,\n  loadingLabel,\n  selectLabel,\n  selectedLabel,\n  minQueryHintLabel,\n  startTypingLabel,\n  selectedHintLabel,\n  disabled = false,\n  loading: loadingProp = false,\n  defaultOpen = false,\n}: LookupSelectProps) {\n  const t = useT()\n  const resolvedSearchPlaceholder = searchPlaceholder ?? placeholder ?? t('ui.lookupSelect.searchPlaceholder', 'Search\u2026')\n  const resolvedClearLabel = clearLabel ?? t('ui.lookupSelect.clearSelection', 'Clear selection')\n  const resolvedEmptyLabel = emptyLabel ?? t('ui.lookupSelect.noResults', 'No results')\n  const resolvedLoadingLabel = loadingLabel ?? t('ui.lookupSelect.searching', 'Searching\u2026')\n  const resolvedSelectLabel = selectLabel ?? t('ui.lookupSelect.select', 'Select')\n  const resolvedSelectedLabel = selectedLabel ?? t('ui.lookupSelect.selected', 'Selected')\n  const resolvedStartTypingLabel = startTypingLabel ?? t('ui.lookupSelect.startTyping', 'Start typing to search.')\n  const resolvedMinQueryHintLabel = minQueryHintLabel ?? t(\n    'ui.lookupSelect.minQueryHint',\n    'Type at least {minQuery} characters or paste an id to search.',\n    { minQuery: String(minQuery) }\n  )\n  const [query, setQuery] = React.useState('')\n  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])\n  const [loading, setLoading] = React.useState(false)\n  const [hasTyped, setHasTyped] = React.useState(defaultOpen)\n  const [error, setError] = React.useState<string | null>(null)\n  const [fetchKey, setFetchKey] = React.useState(0)\n  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n  const optionsWasArrayRef = React.useRef(Array.isArray(options))\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      optionsWasArrayRef.current = true\n      setItems(options)\n    } else if (optionsWasArrayRef.current) {\n      optionsWasArrayRef.current = false\n      setFetchKey((k) => k + 1)\n    }\n  }, [options])\n\n  React.useEffect(() => {\n    setQueryRef.current = setQuery\n    if (onReady) onReady({ setQuery })\n  }, [onReady, setQuery])\n\n  const shouldSearch =\n    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)\n  React.useEffect(() => {\n    if (disabled) {\n      setItems(options ?? [])\n      setLoading(false)\n      return\n    }\n    let cancelled = false\n    let timer: ReturnType<typeof setTimeout> | null = null\n    if (!shouldSearch) {\n      setItems(options ?? [])\n      setLoading(false)\n      setError(null)\n      return () => { cancelled = true }\n    }\n    setLoading(true)\n    setError(null)\n    timer = setTimeout(() => {\n      const requestId = Date.now()\n      const fetcher = fetchItemsRef.current\n      const loader = fetcher ?? (() => Promise.resolve(options ?? []))\n      loader(query.trim())\n        .then((result) => {\n          if (cancelled) return\n          setItems(result)\n        })\n        .catch((err) => {\n          if (cancelled) return\n          console.error('LookupSelect.fetchItems', err)\n          setError('error')\n        })\n        .finally(() => {\n          if (!cancelled) setLoading(false)\n        })\n      return requestId\n    }, 220)\n    return () => {\n      cancelled = true\n      if (timer) clearTimeout(timer)\n    }\n  }, [query, shouldSearch, fetchKey])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n          <input\n            className=\"w-full h-10 rounded-lg border border-input bg-background pl-10 pr-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:shadow-focus focus-visible:border-brand-violet disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              setHasTyped(true)\n            }}\n            placeholder={resolvedSearchPlaceholder}\n            disabled={disabled}\n          />\n        </div>\n        {actionSlot ? <div className=\"sm:self-start\">{actionSlot}</div> : null}\n      </div>\n      {shouldSearch ? (\n        <div className=\"space-y-2\">\n          {loading || loadingProp ? (\n            <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              {resolvedLoadingLabel}\n            </div>\n          ) : null}\n          {!loading && !loadingProp && !items.length ? (\n            <p className=\"text-xs text-muted-foreground\">{resolvedEmptyLabel}</p>\n          ) : null}\n          <div className=\"flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5\">\n            {items.map((item) => {\n              const isSelected = value === item.id\n              const isInteractive = !item.disabled || isSelected\n              return (\n                <div\n                  key={item.id}\n                  className={cn(\n                    'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',\n                    isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',\n                    isSelected\n                      ? 'border-brand-violet bg-brand-violet/5 shadow-sm'\n                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm'\n                  )}\n                  role=\"button\"\n                  tabIndex={item.disabled ? -1 : 0}\n                  onClick={() => {\n                    if (!isInteractive) return\n                    onChange(item.id)\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      if (!isInteractive) return\n                      onChange(item.id)\n                    }\n                  }}\n                  aria-pressed={isSelected}\n                  aria-disabled={item.disabled && !isSelected ? true : undefined}\n                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}\n                >\n                  {item.icon ? (\n                    <div className=\"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground\">\n                      {item.icon}\n                    </div>\n                  ) : (\n                    <div className={cn(\n                      'flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors',\n                      isSelected\n                        ? 'border-brand-violet/40 bg-brand-violet/10 text-brand-violet'\n                        : 'border-input bg-muted text-muted-foreground group-hover:border-foreground/20'\n                    )}>\n                      <span className=\"text-base font-semibold uppercase\">{item.title.slice(0, 1)}</span>\n                    </div>\n                  )}\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <div className=\"truncate text-sm font-semibold text-foreground\">{item.title}</div>\n                      {item.rightLabel ? (\n                        <div className=\"shrink-0 text-overline font-medium uppercase tracking-wider text-muted-foreground\">\n                          {item.rightLabel}\n                        </div>\n                      ) : null}\n                    </div>\n                    {item.subtitle ? (\n                      <div className=\"text-xs text-muted-foreground truncate\">{item.subtitle}</div>\n                    ) : null}\n                    {item.description ? (\n                      <div className=\"text-xs text-muted-foreground/70 truncate\">{item.description}</div>\n                    ) : null}\n                  </div>\n                  <div className=\"flex shrink-0 items-center justify-center\">\n                    {isSelected ? (\n                      <Check className=\"size-5 text-brand-violet\" aria-hidden=\"true\" />\n                    ) : (\n                      <div className=\"size-5\" aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n          {value ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-fit gap-1 text-sm font-normal\"\n              onClick={() => onChange(null)}\n            >\n              <X className=\"h-4 w-4\" />\n              {resolvedClearLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : hasTyped ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {resolvedMinQueryHintLabel}\n        </p>\n      ) : (\n        <p className=\"text-xs text-muted-foreground\">{resolvedStartTypingLabel}</p>\n      )}\n      {error ? <p className=\"text-xs text-status-error-text\" role=\"alert\">{resolvedEmptyLabel}</p> : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/backend/inputs/PhoneNumberField.js

@@ -1,10 +1,64 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { extractPhoneDigits, validatePhoneNumber } from "@open-mercato/shared/lib/phone";
-import { Input } from "../../primitives/input.js";
+import { cn } from "@open-mercato/shared/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemLeading,
+  SelectTrigger
+} from "../../primitives/select.js";
+const PHONE_COUNTRIES = [
+  { iso2: "US", dialCode: "+1", label: "United States", flag: "\u{1F1FA}\u{1F1F8}" },
+  { iso2: "CA", dialCode: "+1", label: "Canada", flag: "\u{1F1E8}\u{1F1E6}" },
+  { iso2: "GB", dialCode: "+44", label: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}" },
+  { iso2: "PL", dialCode: "+48", label: "Poland", flag: "\u{1F1F5}\u{1F1F1}" },
+  { iso2: "DE", dialCode: "+49", label: "Germany", flag: "\u{1F1E9}\u{1F1EA}" },
+  { iso2: "FR", dialCode: "+33", label: "France", flag: "\u{1F1EB}\u{1F1F7}" },
+  { iso2: "ES", dialCode: "+34", label: "Spain", flag: "\u{1F1EA}\u{1F1F8}" },
+  { iso2: "IT", dialCode: "+39", label: "Italy", flag: "\u{1F1EE}\u{1F1F9}" },
+  { iso2: "NL", dialCode: "+31", label: "Netherlands", flag: "\u{1F1F3}\u{1F1F1}" },
+  { iso2: "SE", dialCode: "+46", label: "Sweden", flag: "\u{1F1F8}\u{1F1EA}" },
+  { iso2: "AT", dialCode: "+43", label: "Austria", flag: "\u{1F1E6}\u{1F1F9}" },
+  { iso2: "CH", dialCode: "+41", label: "Switzerland", flag: "\u{1F1E8}\u{1F1ED}" },
+  { iso2: "PT", dialCode: "+351", label: "Portugal", flag: "\u{1F1F5}\u{1F1F9}" },
+  { iso2: "CZ", dialCode: "+420", label: "Czechia", flag: "\u{1F1E8}\u{1F1FF}" },
+  { iso2: "RO", dialCode: "+40", label: "Romania", flag: "\u{1F1F7}\u{1F1F4}" },
+  { iso2: "UA", dialCode: "+380", label: "Ukraine", flag: "\u{1F1FA}\u{1F1E6}" }
+];
+const DEFAULT_COUNTRY = PHONE_COUNTRIES[0];
+const COUNTRIES_BY_DIAL_LENGTH = [...PHONE_COUNTRIES].sort(
+  (a, b) => b.dialCode.length - a.dialCode.length
+);
+function findCountryByIso(iso2) {
+  return PHONE_COUNTRIES.find((c) => c.iso2 === iso2);
+}
+function parseCountryFromValue(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("+")) return null;
+  for (const country of COUNTRIES_BY_DIAL_LENGTH) {
+    if (trimmed.startsWith(country.dialCode)) return country;
+  }
+  return null;
+}
+function extractLocalNumber(value, dialCode) {
+  if (!value) return "";
+  const trimmed = value.trim();
+  if (!trimmed.startsWith(dialCode)) return trimmed;
+  return trimmed.slice(dialCode.length).trim();
+}
+function composeValue(country, localNumber) {
+  const trimmed = localNumber.trim();
+  if (!trimmed) return "";
+  if (trimmed.startsWith("+")) return trimmed;
+  return `${country.dialCode} ${trimmed}`;
+}
 const DEFAULT_MIN_DIGITS = 6;
-const DEFAULT_INVALID_LABEL = "Enter a valid phone number with country code (e.g. +1 212 555 1234)";
+const DEFAULT_PLACEHOLDER = "(555) 000-0000";
 function PhoneNumberField({
   id,
   value,
@@ -21,38 +75,68 @@ function PhoneNumberField({
   duplicateLabel,
   duplicateLinkLabel,
   invalidLabel,
-  onDuplicateLookup
+  onDuplicateLookup,
+  countries: countriesProp,
+  defaultCountryIso2
 }) {
-  const [local, setLocal] = React.useState(() => {
-    if (value == null || value === "") return "";
-    return String(value);
-  });
+  const t = useT();
+  const resolvedInvalidLabel = invalidLabel ?? t(
+    "ui.inputs.phoneNumberField.invalid",
+    "Enter a valid phone number with country code (e.g. +1 212 555 1234)"
+  );
+  const resolvedCheckingLabel = checkingLabel ?? t(
+    "ui.inputs.phoneNumberField.checking",
+    "Checking for duplicates\u2026"
+  );
+  const resolvedDuplicateLinkLabel = duplicateLinkLabel ?? t(
+    "ui.inputs.phoneNumberField.duplicateLink",
+    "Open record"
+  );
+  const resolvedPlaceholder = placeholder ?? DEFAULT_PLACEHOLDER;
+  const countries = countriesProp ?? PHONE_COUNTRIES;
+  const fallbackCountry = React.useMemo(
+    () => defaultCountryIso2 && findCountryByIso(defaultCountryIso2) || DEFAULT_COUNTRY,
+    [defaultCountryIso2]
+  );
+  const initialCountry = React.useMemo(
+    () => parseCountryFromValue(value) ?? fallbackCountry,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [country, setCountry] = React.useState(initialCountry);
+  const [localNumber, setLocalNumber] = React.useState(
+    () => extractLocalNumber(value, initialCountry.dialCode)
+  );
   const [duplicate, setDuplicate] = React.useState(null);
   const [checking, setChecking] = React.useState(false);
   const [validationHint, setValidationHint] = React.useState(null);
+  const [focused, setFocused] = React.useState(false);
   const userEditingRef = React.useRef(false);
   const externalFieldError = externalError && externalError.trim().length > 0 ? externalError : null;
   const errorMessage = externalFieldError ?? validationHint;
   const errorId = errorMessage && id ? `${id}-error` : void 0;
   const describedBy = [ariaDescribedBy, errorId].filter((part) => Boolean(part)).join(" ") || void 0;
+  const composedValue = composeValue(country, localNumber);
   React.useEffect(() => {
     if (userEditingRef.current) return;
     if (value == null || value === "") {
-      setLocal("");
+      setLocalNumber("");
       onDigitsChange?.(null);
       return;
     }
-    const nextValue = String(value);
-    setLocal(nextValue);
-    onDigitsChange?.(extractPhoneDigits(nextValue) || null);
-  }, [value, onDigitsChange]);
+    const parsed = parseCountryFromValue(value);
+    if (parsed) setCountry(parsed);
+    const next = extractLocalNumber(value, parsed?.dialCode ?? country.dialCode);
+    setLocalNumber(next);
+    onDigitsChange?.(extractPhoneDigits(String(value)) || null);
+  }, [value]);
   React.useEffect(() => {
     if (!onDuplicateLookup || disabled) {
       setDuplicate(null);
       setChecking(false);
       return;
     }
-    const digits = extractPhoneDigits(local);
+    const digits = extractPhoneDigits(composedValue);
     if (!digits || digits.length < minDigits) {
       setDuplicate(null);
       setChecking(false);
@@ -74,70 +158,137 @@ function PhoneNumberField({
       cancelled = true;
       window.clearTimeout(handle);
     };
-  }, [local, disabled, minDigits, onDuplicateLookup]);
-  const handleChange = React.useCallback(
+  }, [composedValue, disabled, minDigits, onDuplicateLookup]);
+  const emit = React.useCallback(
+    (nextCountry, nextLocal) => {
+      const composed = composeValue(nextCountry, nextLocal);
+      onValueChange(composed.length ? composed : void 0);
+      onDigitsChange?.(extractPhoneDigits(composed) || null);
+    },
+    [onDigitsChange, onValueChange]
+  );
+  const handleCountryChange = React.useCallback(
+    (iso2) => {
+      const next = findCountryByIso(iso2);
+      if (!next) return;
+      userEditingRef.current = true;
+      setCountry(next);
+      setValidationHint(null);
+      emit(next, localNumber);
+    },
+    [emit, localNumber]
+  );
+  const handleLocalChange = React.useCallback(
     (event) => {
       const next = event.target.value;
-      const cleanDigits = extractPhoneDigits(next);
       userEditingRef.current = true;
-      setLocal(next);
+      setLocalNumber(next);
       setValidationHint(null);
-      onValueChange(next.length ? next : void 0);
-      onDigitsChange?.(cleanDigits.length ? cleanDigits : null);
+      emit(country, next);
     },
-    [onValueChange, onDigitsChange]
+    [country, emit]
   );
   const handleBlur = React.useCallback(() => {
     userEditingRef.current = false;
-    const trimmed = local.trim();
+    setFocused(false);
+    const trimmed = localNumber.trim();
     if (!trimmed) {
-      setLocal("");
+      setLocalNumber("");
       setValidationHint(null);
       onValueChange(void 0);
       onDigitsChange?.(null);
       return;
     }
-    const result = validatePhoneNumber(trimmed);
+    const composed = composeValue(country, trimmed);
+    const result = validatePhoneNumber(composed);
     if (result.valid) {
-      setLocal(result.normalized ?? "");
+      const normalizedLocal = extractLocalNumber(result.normalized ?? composed, country.dialCode);
+      setLocalNumber(normalizedLocal);
       setValidationHint(null);
       onValueChange(result.normalized || void 0);
       onDigitsChange?.(result.digits || null);
     } else {
-      setLocal(trimmed);
-      setValidationHint(invalidLabel ?? DEFAULT_INVALID_LABEL);
-      onValueChange(trimmed);
+      setValidationHint(resolvedInvalidLabel);
+      onValueChange(composed);
       onDigitsChange?.(result.digits || null);
     }
-  }, [invalidLabel, local, onDigitsChange, onValueChange]);
+  }, [country, localNumber, onDigitsChange, onValueChange, resolvedInvalidLabel]);
+  const containerErrorBorder = errorMessage ? "border-status-error-icon" : "border-input";
+  const containerFocusBorder = errorMessage ? "border-status-error-icon shadow-focus" : "border-brand-violet shadow-focus";
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(
-      Input,
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        type: "tel",
-        value: local,
-        onChange: handleChange,
-        onBlur: handleBlur,
-        placeholder,
-        autoFocus,
-        disabled,
-        id,
-        "aria-label": ariaLabel,
-        "aria-describedby": describedBy,
+        className: cn(
+          "flex items-stretch w-full rounded-md border bg-background shadow-xs transition-colors",
+          disabled ? "bg-bg-disabled border-border-disabled cursor-not-allowed" : focused ? containerFocusBorder : `${containerErrorBorder} hover:border-foreground/30`
+        ),
         "aria-invalid": errorMessage ? "true" : void 0,
-        "data-crud-focus-target": ""
+        children: [
+          /* @__PURE__ */ jsxs(Select, { value: country.iso2, onValueChange: handleCountryChange, disabled, children: [
+            /* @__PURE__ */ jsxs(
+              SelectTrigger,
+              {
+                "aria-label": ariaLabel ? `${ariaLabel} country` : "Country code",
+                className: cn(
+                  "h-auto w-auto shrink-0 gap-1.5 rounded-none rounded-l-md 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"
+                ),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-base leading-none", "aria-hidden": "true", children: country.flag }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground tabular-nums", children: country.dialCode })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { align: "start", children: countries.map((c) => /* @__PURE__ */ jsxs(SelectItem, { value: c.iso2, children: [
+              /* @__PURE__ */ jsx(SelectItemLeading, { children: /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: c.flag }) }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: c.label }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground tabular-nums", children: c.dialCode })
+            ] }, `${c.iso2}-${c.dialCode}`)) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-px self-stretch bg-input" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "tel",
+              inputMode: "tel",
+              autoComplete: "tel-national",
+              value: localNumber,
+              onChange: handleLocalChange,
+              onBlur: handleBlur,
+              onFocus: () => setFocused(true),
+              placeholder: resolvedPlaceholder,
+              autoFocus,
+              disabled,
+              id,
+              "aria-label": ariaLabel,
+              "aria-describedby": describedBy,
+              "aria-invalid": errorMessage ? "true" : void 0,
+              "data-crud-focus-target": "",
+              className: cn(
+                "flex-1 min-w-0 bg-transparent px-3 py-2 text-sm leading-5 outline-none",
+                "placeholder:text-muted-foreground",
+                "disabled:cursor-not-allowed disabled:text-muted-foreground"
+              )
+            }
+          )
+        ]
       }
     ),
-    errorMessage ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: errorMessage }) : null,
-    !disabled && duplicate && duplicateLabel && duplicateLinkLabel ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-amber-600", children: [
+    errorMessage ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-xs text-status-error-text", children: errorMessage }) : null,
+    !disabled && duplicate && duplicateLabel ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-status-warning-text", children: [
       duplicateLabel(duplicate),
       " ",
-      /* @__PURE__ */ jsx("a", { className: "font-medium text-primary underline underline-offset-2", href: duplicate.href, children: duplicateLinkLabel })
+      /* @__PURE__ */ jsx("a", { className: "font-medium text-brand-violet underline underline-offset-2", href: duplicate.href, children: resolvedDuplicateLinkLabel })
     ] }) : null,
-    !disabled && !duplicate && checking && checkingLabel ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: checkingLabel }) : null
+    !disabled && !duplicate && checking ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: resolvedCheckingLabel }) : null
   ] });
 }
 export {
+  PHONE_COUNTRIES,
   PhoneNumberField
 };
 //# sourceMappingURL=PhoneNumberField.js.map