@open-mercato/ui 0.4.2-canary-c02407ff85

package/dist/backend/inputs/ComboboxInput.js

@@ -0,0 +1,225 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function normalizeOptions(input) {
+  if (!Array.isArray(input)) return [];
+  return input.map((option) => {
+    if (typeof option === "string") {
+      const trimmed = option.trim();
+      if (!trimmed) return null;
+      return { value: trimmed, label: trimmed };
+    }
+    const value = typeof option.value === "string" ? option.value.trim() : "";
+    if (!value) return null;
+    return {
+      value,
+      label: option.label?.trim() || value,
+      description: option.description ?? null
+    };
+  }).filter((option) => !!option);
+}
+function ComboboxInput({
+  value,
+  onChange,
+  placeholder,
+  suggestions,
+  loadSuggestions,
+  resolveLabel,
+  resolveDescription,
+  autoFocus,
+  disabled = false,
+  allowCustomValues = true
+}) {
+  const [input, setInput] = React.useState("");
+  const [asyncOptions, setAsyncOptions] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [touched, setTouched] = React.useState(false);
+  const [showSuggestions, setShowSuggestions] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(-1);
+  const inputRef = React.useRef(null);
+  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions]);
+  const optionMap = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const register = (option) => {
+      if (!map.has(option.value)) {
+        map.set(option.value, option);
+      }
+    };
+    staticOptions.forEach(register);
+    asyncOptions.forEach(register);
+    if (value) {
+      const existing = map.get(value);
+      if (!existing) {
+        map.set(value, {
+          value,
+          label: resolveLabel?.(value) ?? value,
+          description: resolveDescription?.(value) ?? null
+        });
+      }
+    }
+    return map;
+  }, [asyncOptions, resolveDescription, resolveLabel, staticOptions, value]);
+  const availableOptions = React.useMemo(() => {
+    return Array.from(optionMap.values());
+  }, [optionMap]);
+  const filteredSuggestions = React.useMemo(() => {
+    const query = input.toLowerCase().trim();
+    if (!query) return availableOptions.slice(0, 8);
+    return availableOptions.filter((option) => {
+      const labelMatch = option.label.toLowerCase().includes(query);
+      const descMatch = option.description?.toLowerCase().includes(query);
+      return labelMatch || Boolean(descMatch);
+    }).slice(0, 8);
+  }, [availableOptions, input]);
+  React.useEffect(() => {
+    if (!loadSuggestions || !touched || disabled) return;
+    const query = input.trim();
+    let cancelled = false;
+    const handle = window.setTimeout(async () => {
+      setLoading(true);
+      try {
+        const items = await loadSuggestions(query);
+        if (!cancelled) {
+          setAsyncOptions(normalizeOptions(items));
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }, 200);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(handle);
+    };
+  }, [disabled, input, loadSuggestions, touched]);
+  React.useEffect(() => {
+    if (document.activeElement !== inputRef.current) {
+      const option = optionMap.get(value);
+      setInput(option?.label ?? value ?? "");
+    }
+  }, [value, optionMap]);
+  const selectValue = React.useCallback(
+    (nextValue) => {
+      if (disabled) return;
+      const trimmed = nextValue.trim();
+      onChange(trimmed);
+      const option = optionMap.get(trimmed);
+      setInput(option?.label ?? trimmed);
+      setShowSuggestions(false);
+      setSelectedIndex(-1);
+    },
+    [disabled, onChange, optionMap]
+  );
+  const findOptionForInput = React.useCallback(
+    (raw) => {
+      const query = raw.trim().toLowerCase();
+      if (!query) return null;
+      for (const option of optionMap.values()) {
+        if (option.value === raw.trim()) return option;
+        if (option.label.toLowerCase() === query) return option;
+      }
+      return null;
+    },
+    [optionMap]
+  );
+  const confirmSelection = React.useCallback(
+    (raw) => {
+      if (disabled) return;
+      const option = findOptionForInput(raw);
+      if (option) {
+        selectValue(option.value);
+        return;
+      }
+      if (!allowCustomValues) {
+        const currentOption = optionMap.get(value);
+        setInput(currentOption?.label ?? value ?? "");
+        setShowSuggestions(false);
+        return;
+      }
+      selectValue(raw);
+    },
+    [allowCustomValues, disabled, findOptionForInput, optionMap, selectValue, value]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        if (!showSuggestions) {
+          setShowSuggestions(true);
+          setSelectedIndex(0);
+        } else {
+          setSelectedIndex((prev) => Math.min(prev + 1, filteredSuggestions.length - 1));
+        }
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, -1));
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        if (selectedIndex >= 0 && filteredSuggestions[selectedIndex]) {
+          selectValue(filteredSuggestions[selectedIndex].value);
+        } else {
+          confirmSelection(input);
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setShowSuggestions(false);
+        setSelectedIndex(-1);
+      }
+    },
+    [confirmSelection, disabled, filteredSuggestions, input, selectValue, selectedIndex, showSuggestions]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "w-full h-9 rounded border px-2 text-sm disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+        value: input,
+        placeholder: placeholder || "Type to search...",
+        autoFocus,
+        "data-crud-focus-target": "",
+        disabled,
+        onFocus: () => {
+          setTouched(true);
+          setShowSuggestions(true);
+        },
+        onChange: (event) => {
+          setTouched(true);
+          setInput(event.target.value);
+          setShowSuggestions(true);
+          setSelectedIndex(-1);
+        },
+        onKeyDown: handleKeyDown,
+        onBlur: () => {
+          setTimeout(() => {
+            if (disabled) return;
+            confirmSelection(input);
+          }, 200);
+        }
+      }
+    ),
+    showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && /* @__PURE__ */ jsx("div", { className: "absolute z-50 w-full mt-1 rounded border bg-popover shadow-lg max-h-60 overflow-auto", children: loading && touched ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "Loading suggestions\u2026" }) : filteredSuggestions.map((option, index) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: [
+          "w-full flex flex-col items-start px-3 py-2 text-sm transition text-left",
+          index === selectedIndex ? "bg-accent" : "hover:bg-muted"
+        ].filter(Boolean).join(" "),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => selectValue(option.value),
+        onMouseEnter: () => setSelectedIndex(index),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label }),
+          option.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description }) : null
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+export {
+  ComboboxInput
+};
+//# sourceMappingURL=ComboboxInput.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/inputs/ComboboxInput.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\n\nexport type ComboboxOption = {\n  value: string\n  label: string\n  description?: string | null\n}\n\nexport type ComboboxInputProps = {\n  value: string\n  onChange: (next: string) => void\n  placeholder?: string\n  suggestions?: Array<string | ComboboxOption>\n  loadSuggestions?: (query?: string) => Promise<Array<string | ComboboxOption>>\n  resolveLabel?: (value: string) => string\n  resolveDescription?: (value: string) => string | null | undefined\n  autoFocus?: boolean\n  disabled?: boolean\n  allowCustomValues?: boolean\n}\n\nfunction normalizeOptions(input?: Array<string | ComboboxOption>): ComboboxOption[] {\n  if (!Array.isArray(input)) return []\n  return input\n    .map((option) => {\n      if (typeof option === 'string') {\n        const trimmed = option.trim()\n        if (!trimmed) return null\n        return { value: trimmed, label: trimmed }\n      }\n      const value = typeof option.value === 'string' ? option.value.trim() : ''\n      if (!value) return null\n      return {\n        value,\n        label: option.label?.trim() || value,\n        description: option.description ?? null,\n      }\n    })\n    .filter((option): option is ComboboxOption => !!option)\n}\n\nexport function ComboboxInput({\n  value,\n  onChange,\n  placeholder,\n  suggestions,\n  loadSuggestions,\n  resolveLabel,\n  resolveDescription,\n  autoFocus,\n  disabled = false,\n  allowCustomValues = true,\n}: ComboboxInputProps) {\n  const [input, setInput] = React.useState('')\n  const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])\n  const [loading, setLoading] = React.useState(false)\n  const [touched, setTouched] = React.useState(false)\n  const [showSuggestions, setShowSuggestions] = React.useState(false)\n  const [selectedIndex, setSelectedIndex] = React.useState(-1)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions])\n\n  const optionMap = React.useMemo(() => {\n    const map = new Map<string, ComboboxOption>()\n    const register = (option: ComboboxOption) => {\n      if (!map.has(option.value)) {\n        map.set(option.value, option)\n      }\n    }\n    staticOptions.forEach(register)\n    asyncOptions.forEach(register)\n    if (value) {\n      const existing = map.get(value)\n      if (!existing) {\n        map.set(value, {\n          value,\n          label: resolveLabel?.(value) ?? value,\n          description: resolveDescription?.(value) ?? null,\n        })\n      }\n    }\n    return map\n  }, [asyncOptions, resolveDescription, resolveLabel, staticOptions, value])\n\n  const availableOptions = React.useMemo(() => {\n    return Array.from(optionMap.values())\n  }, [optionMap])\n\n  const filteredSuggestions = React.useMemo(() => {\n    const query = input.toLowerCase().trim()\n    if (!query) return availableOptions.slice(0, 8)\n    return availableOptions.filter((option) => {\n      const labelMatch = option.label.toLowerCase().includes(query)\n      const descMatch = option.description?.toLowerCase().includes(query)\n      return labelMatch || Boolean(descMatch)\n    }).slice(0, 8)\n  }, [availableOptions, input])\n\n  React.useEffect(() => {\n    if (!loadSuggestions || !touched || disabled) return\n    const query = input.trim()\n    let cancelled = false\n    const handle = window.setTimeout(async () => {\n      setLoading(true)\n      try {\n        const items = await loadSuggestions(query)\n        if (!cancelled) {\n          setAsyncOptions(normalizeOptions(items))\n        }\n      } finally {\n        if (!cancelled) setLoading(false)\n      }\n    }, 200)\n    return () => {\n      cancelled = true\n      window.clearTimeout(handle)\n    }\n  }, [disabled, input, loadSuggestions, touched])\n\n  // Sync input with value when value changes externally and input is not focused\n  React.useEffect(() => {\n    if (document.activeElement !== inputRef.current) {\n      const option = optionMap.get(value)\n      setInput(option?.label ?? value ?? '')\n    }\n  }, [value, optionMap])\n\n  const selectValue = React.useCallback(\n    (nextValue: string) => {\n      if (disabled) return\n      const trimmed = nextValue.trim()\n      onChange(trimmed)\n      const option = optionMap.get(trimmed)\n      setInput(option?.label ?? trimmed)\n      setShowSuggestions(false)\n      setSelectedIndex(-1)\n    },\n    [disabled, onChange, optionMap]\n  )\n\n  const findOptionForInput = React.useCallback(\n    (raw: string): ComboboxOption | null => {\n      const query = raw.trim().toLowerCase()\n      if (!query) return null\n      for (const option of optionMap.values()) {\n        if (option.value === raw.trim()) return option\n        if (option.label.toLowerCase() === query) return option\n      }\n      return null\n    },\n    [optionMap]\n  )\n\n  const confirmSelection = React.useCallback(\n    (raw: string) => {\n      if (disabled) return\n      const option = findOptionForInput(raw)\n      if (option) {\n        selectValue(option.value)\n        return\n      }\n      if (!allowCustomValues) {\n        // Revert to current value if custom values not allowed\n        const currentOption = optionMap.get(value)\n        setInput(currentOption?.label ?? value ?? '')\n        setShowSuggestions(false)\n        return\n      }\n      selectValue(raw)\n    },\n    [allowCustomValues, disabled, findOptionForInput, optionMap, selectValue, value]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n\n      if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        if (!showSuggestions) {\n          setShowSuggestions(true)\n          setSelectedIndex(0)\n        } else {\n          setSelectedIndex((prev) => Math.min(prev + 1, filteredSuggestions.length - 1))\n        }\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        setSelectedIndex((prev) => Math.max(prev - 1, -1))\n      } else if (event.key === 'Enter') {\n        event.preventDefault()\n        if (selectedIndex >= 0 && filteredSuggestions[selectedIndex]) {\n          selectValue(filteredSuggestions[selectedIndex].value)\n        } else {\n          confirmSelection(input)\n        }\n      } else if (event.key === 'Escape') {\n        event.preventDefault()\n        setShowSuggestions(false)\n        setSelectedIndex(-1)\n      }\n    },\n    [confirmSelection, disabled, filteredSuggestions, input, selectValue, selectedIndex, showSuggestions]\n  )\n\n  return (\n    <div className=\"relative w-full\">\n      <input\n        ref={inputRef}\n        type=\"text\"\n        className=\"w-full h-9 rounded border px-2 text-sm disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed\"\n        value={input}\n        placeholder={placeholder || 'Type to search...'}\n        autoFocus={autoFocus}\n        data-crud-focus-target=\"\"\n        disabled={disabled}\n        onFocus={() => {\n          setTouched(true)\n          setShowSuggestions(true)\n        }}\n        onChange={(event) => {\n          setTouched(true)\n          setInput(event.target.value)\n          setShowSuggestions(true)\n          setSelectedIndex(-1)\n        }}\n        onKeyDown={handleKeyDown}\n        onBlur={() => {\n          // Delay to allow click on suggestions\n          setTimeout(() => {\n            if (disabled) return\n            confirmSelection(input)\n          }, 200)\n        }}\n      />\n\n      {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (\n        <div className=\"absolute z-50 w-full mt-1 rounded border bg-popover shadow-lg max-h-60 overflow-auto\">\n          {loading && touched ? (\n            <div className=\"px-3 py-2 text-xs text-muted-foreground\">Loading suggestions\u2026</div>\n          ) : (\n            filteredSuggestions.map((option, index) => (\n              <button\n                key={option.value}\n                type=\"button\"\n                className={[\n                  'w-full flex flex-col items-start px-3 py-2 text-sm transition text-left',\n                  index === selectedIndex ? 'bg-accent' : 'hover:bg-muted',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => selectValue(option.value)}\n                onMouseEnter={() => setSelectedIndex(index)}\n              >\n                <span className=\"font-medium\">{option.label}</span>\n                {option.description ? (\n                  <span className=\"text-xs text-muted-foreground\">{option.description}</span>\n                ) : null}\n              </button>\n            ))\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/inputs/LookupSelect.js

@@ -0,0 +1,191 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Loader2, Search, X } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { cn } from "@open-mercato/shared/lib/utils";
+function LookupSelect({
+  value,
+  onChange,
+  fetchItems,
+  fetchOptions,
+  options,
+  minQuery = 2,
+  actionSlot,
+  onReady,
+  placeholder,
+  searchPlaceholder = placeholder ?? "Search\u2026",
+  clearLabel = "Clear selection",
+  emptyLabel = "No results",
+  loadingLabel = "Searching\u2026",
+  selectLabel = "Select",
+  selectedLabel = "Selected",
+  minQueryHintLabel,
+  startTypingLabel = "Start typing to search.",
+  selectedHintLabel,
+  disabled = false,
+  loading: loadingProp = false,
+  defaultOpen = false
+}) {
+  const [query, setQuery] = React.useState("");
+  const [items, setItems] = React.useState(options ?? []);
+  const [loading, setLoading] = React.useState(false);
+  const [hasTyped, setHasTyped] = React.useState(defaultOpen);
+  const [error, setError] = React.useState(null);
+  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions);
+  const setQueryRef = React.useRef(setQuery);
+  React.useEffect(() => {
+    fetchItemsRef.current = fetchItems ?? fetchOptions;
+  }, [fetchItems, fetchOptions]);
+  React.useEffect(() => {
+    if (Array.isArray(options)) {
+      setItems(options);
+    }
+  }, [options]);
+  React.useEffect(() => {
+    setQueryRef.current = setQuery;
+    if (onReady) onReady({ setQuery });
+  }, [onReady, setQuery]);
+  const shouldSearch = defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0);
+  React.useEffect(() => {
+    if (disabled) {
+      setItems(options ?? []);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    let timer = null;
+    if (!shouldSearch) {
+      setItems(options ?? []);
+      setLoading(false);
+      setError(null);
+      return () => {
+        cancelled = true;
+      };
+    }
+    setLoading(true);
+    setError(null);
+    timer = setTimeout(() => {
+      const requestId = Date.now();
+      const fetcher = fetchItemsRef.current;
+      const loader = fetcher ?? (() => Promise.resolve(options ?? []));
+      loader(query.trim()).then((result) => {
+        if (cancelled) return;
+        setItems(result);
+      }).catch((err) => {
+        if (cancelled) return;
+        console.error("LookupSelect.fetchItems", err);
+        setError("error");
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return requestId;
+    }, 220);
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [query, shouldSearch]);
+  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(
+          "input",
+          {
+            className: "w-full rounded border pl-8 pr-2 py-2 text-sm",
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setHasTyped(true);
+            },
+            placeholder: searchPlaceholder,
+            disabled
+          }
+        )
+      ] }),
+      actionSlot ? /* @__PURE__ */ jsx("div", { className: "sm:self-start", children: actionSlot }) : null
+    ] }),
+    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
+      ] }) : 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) => {
+        const isSelected = value === item.id;
+        const handleSelect = () => {
+          if (item.disabled && !isSelected) return;
+          onChange(item.id);
+        };
+        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-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              isSelected ? "border-primary/70 bg-primary/5" : "hover:border-primary/50"
+            ),
+            role: "button",
+            tabIndex: item.disabled ? -1 : 0,
+            onClick: handleSelect,
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleSelect();
+              }
+            },
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-12 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
+                ] }),
+                /* @__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();
+                      handleSelect();
+                    },
+                    disabled: item.disabled && !isSelected,
+                    children: isSelected ? selectedLabel : selectLabel
+                  }
+                ) })
+              ] })
+            ]
+          },
+          item.id
+        );
+      }) }),
+      value ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "w-fit gap-1 text-sm font-normal",
+          onClick: () => onChange(null),
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            clearLabel
+          ]
+        }
+      ) : 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
+  ] });
+}
+export {
+  LookupSelect
+};
+//# sourceMappingURL=LookupSelect.js.map

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

@@ -0,0 +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 fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      setItems(options)\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])\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              const handleSelect = () => {\n                if (item.disabled && !isSelected) return\n                onChange(item.id)\n              }\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-primary/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={handleSelect}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      handleSelect()\n                    }\n                  }}\n                  aria-pressed={isSelected}\n                >\n                  <div className=\"flex h-12 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                          handleSelect()\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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",
+  "names": []
+}

package/dist/backend/inputs/PhoneNumberField.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+const DEFAULT_MIN_DIGITS = 6;
+const DIGIT_PATTERN = /\d+/g;
+const digitsOnly = (value) => {
+  const matches = value.match(DIGIT_PATTERN);
+  return matches ? matches.join("") : "";
+};
+function PhoneNumberField({
+  value,
+  onValueChange,
+  onDigitsChange,
+  disabled = false,
+  autoFocus,
+  placeholder,
+  minDigits = DEFAULT_MIN_DIGITS,
+  checkingLabel,
+  duplicateLabel,
+  duplicateLinkLabel,
+  onDuplicateLookup
+}) {
+  const [local, setLocal] = React.useState(() => value == null ? "" : String(value));
+  const [duplicate, setDuplicate] = React.useState(null);
+  const [checking, setChecking] = React.useState(false);
+  React.useEffect(() => {
+    if (value == null || value === "") {
+      setLocal("");
+      onDigitsChange?.(null);
+      return;
+    }
+    const nextValue = String(value);
+    setLocal(nextValue);
+    onDigitsChange?.(digitsOnly(nextValue) || null);
+  }, [value, onDigitsChange]);
+  React.useEffect(() => {
+    if (!onDuplicateLookup || disabled) {
+      setDuplicate(null);
+      setChecking(false);
+      return;
+    }
+    const digits = digitsOnly(local);
+    if (!digits || digits.length < minDigits) {
+      setDuplicate(null);
+      setChecking(false);
+      return;
+    }
+    let cancelled = false;
+    setChecking(true);
+    const handle = window.setTimeout(async () => {
+      try {
+        const match = await onDuplicateLookup(digits);
+        if (!cancelled) setDuplicate(match);
+      } catch {
+        if (!cancelled) setDuplicate(null);
+      } finally {
+        if (!cancelled) setChecking(false);
+      }
+    }, 350);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(handle);
+    };
+  }, [local, disabled, minDigits, onDuplicateLookup]);
+  const handleChange = React.useCallback(
+    (event) => {
+      const next = event.target.value;
+      const cleanDigits = digitsOnly(next);
+      setLocal(next);
+      onValueChange(next.length ? next : void 0);
+      onDigitsChange?.(cleanDigits.length ? cleanDigits : null);
+    },
+    [onValueChange, onDigitsChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "tel",
+        className: "w-full h-9 rounded border px-2 text-sm",
+        value: local,
+        onChange: handleChange,
+        placeholder,
+        autoFocus,
+        disabled,
+        "data-crud-focus-target": ""
+      }
+    ),
+    !disabled && duplicate && duplicateLabel && duplicateLinkLabel ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-amber-600", children: [
+      duplicateLabel(duplicate),
+      " ",
+      /* @__PURE__ */ jsx("a", { className: "font-medium text-primary underline underline-offset-2", href: duplicate.href, children: duplicateLinkLabel })
+    ] }) : null,
+    !disabled && !duplicate && checking && checkingLabel ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: checkingLabel }) : null
+  ] });
+}
+export {
+  PhoneNumberField
+};
+//# sourceMappingURL=PhoneNumberField.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/inputs/PhoneNumberField.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\n\nexport type PhoneDuplicateMatch = {\n  id: string\n  label: string\n  href: string\n}\n\nexport type PhoneNumberFieldProps = {\n  value?: string | null\n  onValueChange: (next: string | undefined) => void\n  onDigitsChange?: (digits: string | null) => void\n  disabled?: boolean\n  autoFocus?: boolean\n  placeholder?: string\n  minDigits?: number\n  checkingLabel?: string\n  duplicateLabel?: (match: PhoneDuplicateMatch) => string\n  duplicateLinkLabel?: string\n  onDuplicateLookup?: (normalizedValue: string) => Promise<PhoneDuplicateMatch | null>\n}\n\nconst DEFAULT_MIN_DIGITS = 6\nconst DIGIT_PATTERN = /\\d+/g\n\nconst digitsOnly = (value: string): string => {\n  const matches = value.match(DIGIT_PATTERN)\n  return matches ? matches.join('') : ''\n}\n\nexport function PhoneNumberField({\n  value,\n  onValueChange,\n  onDigitsChange,\n  disabled = false,\n  autoFocus,\n  placeholder,\n  minDigits = DEFAULT_MIN_DIGITS,\n  checkingLabel,\n  duplicateLabel,\n  duplicateLinkLabel,\n  onDuplicateLookup,\n}: PhoneNumberFieldProps) {\n  const [local, setLocal] = React.useState<string>(() => (value == null ? '' : String(value)))\n  const [duplicate, setDuplicate] = React.useState<PhoneDuplicateMatch | null>(null)\n  const [checking, setChecking] = React.useState(false)\n\n  React.useEffect(() => {\n    if (value == null || value === '') {\n      setLocal('')\n      onDigitsChange?.(null)\n      return\n    }\n    const nextValue = String(value)\n    setLocal(nextValue)\n    onDigitsChange?.(digitsOnly(nextValue) || null)\n  }, [value, onDigitsChange])\n\n  React.useEffect(() => {\n    if (!onDuplicateLookup || disabled) {\n      setDuplicate(null)\n      setChecking(false)\n      return\n    }\n    const digits = digitsOnly(local)\n    if (!digits || digits.length < minDigits) {\n      setDuplicate(null)\n      setChecking(false)\n      return\n    }\n\n    let cancelled = false\n    setChecking(true)\n    const handle = window.setTimeout(async () => {\n      try {\n        const match = await onDuplicateLookup(digits)\n        if (!cancelled) setDuplicate(match)\n      } catch {\n        if (!cancelled) setDuplicate(null)\n      } finally {\n        if (!cancelled) setChecking(false)\n      }\n    }, 350)\n\n    return () => {\n      cancelled = true\n      window.clearTimeout(handle)\n    }\n  }, [local, disabled, minDigits, onDuplicateLookup])\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value\n      const cleanDigits = digitsOnly(next)\n      setLocal(next)\n      onValueChange(next.length ? next : undefined)\n      onDigitsChange?.(cleanDigits.length ? cleanDigits : null)\n    },\n    [onValueChange, onDigitsChange]\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        type=\"tel\"\n        className=\"w-full h-9 rounded border px-2 text-sm\"\n        value={local}\n        onChange={handleChange}\n        placeholder={placeholder}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        data-crud-focus-target=\"\"\n      />\n      {!disabled && duplicate && duplicateLabel && duplicateLinkLabel ? (\n        <p className=\"text-xs text-amber-600\">\n          {duplicateLabel(duplicate)}{' '}\n          <a className=\"font-medium text-primary underline underline-offset-2\" href={duplicate.href}>\n            {duplicateLinkLabel}\n          </a>\n        </p>\n      ) : null}\n      {!disabled && !duplicate && checking && checkingLabel ? (\n        <p className=\"text-xs text-muted-foreground\">{checkingLabel}</p>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAyGM,cAWE,YAXF;AAvGN,YAAY,WAAW;AAsBvB,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AAEtB,MAAM,aAAa,CAAC,UAA0B;AAC5C,QAAM,UAAU,MAAM,MAAM,aAAa;AACzC,SAAO,UAAU,QAAQ,KAAK,EAAE,IAAI;AACtC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAiB,MAAO,SAAS,OAAO,KAAK,OAAO,KAAK,CAAE;AAC3F,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAqC,IAAI;AACjF,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,UAAU,MAAM;AACpB,QAAI,SAAS,QAAQ,UAAU,IAAI;AACjC,eAAS,EAAE;AACX,uBAAiB,IAAI;AACrB;AAAA,IACF;AACA,UAAM,YAAY,OAAO,KAAK;AAC9B,aAAS,SAAS;AAClB,qBAAiB,WAAW,SAAS,KAAK,IAAI;AAAA,EAChD,GAAG,CAAC,OAAO,cAAc,CAAC;AAE1B,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,qBAAqB,UAAU;AAClC,mBAAa,IAAI;AACjB,kBAAY,KAAK;AACjB;AAAA,IACF;AACA,UAAM,SAAS,WAAW,KAAK;AAC/B,QAAI,CAAC,UAAU,OAAO,SAAS,WAAW;AACxC,mBAAa,IAAI;AACjB,kBAAY,KAAK;AACjB;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,gBAAY,IAAI;AAChB,UAAM,SAAS,OAAO,WAAW,YAAY;AAC3C,UAAI;AACF,cAAM,QAAQ,MAAM,kBAAkB,MAAM;AAC5C,YAAI,CAAC,UAAW,cAAa,KAAK;AAAA,MACpC,QAAQ;AACN,YAAI,CAAC,UAAW,cAAa,IAAI;AAAA,MACnC,UAAE;AACA,YAAI,CAAC,UAAW,aAAY,KAAK;AAAA,MACnC;AAAA,IACF,GAAG,GAAG;AAEN,WAAO,MAAM;AACX,kBAAY;AACZ,aAAO,aAAa,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,WAAW,iBAAiB,CAAC;AAElD,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAA+C;AAC9C,YAAM,OAAO,MAAM,OAAO;AAC1B,YAAM,cAAc,WAAW,IAAI;AACnC,eAAS,IAAI;AACb,oBAAc,KAAK,SAAS,OAAO,MAAS;AAC5C,uBAAiB,YAAY,SAAS,cAAc,IAAI;AAAA,IAC1D;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAChC;AAEA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAAuB;AAAA;AAAA,IACzB;AAAA,IACC,CAAC,YAAY,aAAa,kBAAkB,qBAC3C,qBAAC,OAAE,WAAU,0BACV;AAAA,qBAAe,SAAS;AAAA,MAAG;AAAA,MAC5B,oBAAC,OAAE,WAAU,yDAAwD,MAAM,UAAU,MAClF,8BACH;AAAA,OACF,IACE;AAAA,IACH,CAAC,YAAY,CAAC,aAAa,YAAY,gBACtC,oBAAC,OAAE,WAAU,iCAAiC,yBAAc,IAC1D;AAAA,KACN;AAEJ;",
+  "names": []
+}