@fayz-ai/ui 0.8.1 → 0.8.3

package/dist/{chunk-7PTRAWHO.cjs → chunk-SVVKUMSL.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkOW73RZOU_cjs = require('./chunk-OW73RZOU.cjs');
-var chunkODY3GZ3Y_cjs = require('./chunk-ODY3GZ3Y.cjs');
+var chunkMI6FOB4O_cjs = require('./chunk-MI6FOB4O.cjs');
 var chunkH6OULCHF_cjs = require('./chunk-H6OULCHF.cjs');
 var React10 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -695,12 +695,12 @@ function ListView({
       ))
     ] }),
     toolbar,
-    loading ? /* @__PURE__ */ jsxRuntime.jsx(chunkODY3GZ3Y_cjs.DataTable, { columns, data: [], loading: true, variant: "card" }) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center rounded-lg border-2 border-dashed border-muted", children: [
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(chunkMI6FOB4O_cjs.DataTable, { columns, data: [], loading: true, variant: "card" }) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center rounded-lg border-2 border-dashed border-muted", children: [
       EmptyIcon && /* @__PURE__ */ jsxRuntime.jsx(EmptyIcon, { className: "h-8 w-8 text-muted-foreground/30 mb-2" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
       emptyActionLabel && onEmptyAction && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onEmptyAction, className: "text-xs text-primary hover:underline mt-1", children: emptyActionLabel })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-      chunkODY3GZ3Y_cjs.DataTable,
+      chunkMI6FOB4O_cjs.DataTable,
       {
         columns,
         data,
@@ -1436,7 +1436,7 @@ function MarkdownEditor({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkH6OULCHF_cjs.cn("flex flex-col gap-2", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkODY3GZ3Y_cjs.SegmentedControl,
+      chunkMI6FOB4O_cjs.SegmentedControl,
       {
         "aria-label": "Markdown mode",
         options: [
@@ -1463,6 +1463,216 @@ function MarkdownEditor({
     ) : renderPreview ? renderPreview(value) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-card p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { source: value }) })
   ] });
 }
+function SearchCombobox({
+  value,
+  onChange,
+  onSelect,
+  options,
+  placeholder,
+  autoFocus,
+  onBlurEmpty,
+  renderRight,
+  allowCreate,
+  onCreateNew,
+  createLabel = "Create",
+  className,
+  minimal,
+  inlineLabel,
+  inlineIcon = "search",
+  loading,
+  onFocus: onFocusProp
+}) {
+  const [open, setOpen] = React10.useState(false);
+  const [activeIndex, setActiveIndex] = React10.useState(-1);
+  const [expanded, setExpanded] = React10.useState(!inlineLabel);
+  const [dropRect, setDropRect] = React10.useState(null);
+  const inputRef = React10.useRef(null);
+  const wrapperRef = React10.useRef(null);
+  const listRef = React10.useRef(null);
+  React10.useEffect(() => {
+    if (value && inlineLabel) setExpanded(true);
+    if (!value && inlineLabel && !open) setExpanded(false);
+  }, [value, open]);
+  function updateRect() {
+    if (wrapperRef.current) setDropRect(wrapperRef.current.getBoundingClientRect());
+  }
+  const showCreate = open && allowCreate && onCreateNew && value.trim().length > 0 && !options.some((o) => o.label.toLowerCase() === value.trim().toLowerCase());
+  const totalItems = options.length + (showCreate ? 1 : 0);
+  React10.useEffect(() => {
+    setActiveIndex(-1);
+  }, [options]);
+  React10.useEffect(() => {
+    if ((options.length > 0 || showCreate || loading) && document.activeElement === inputRef.current) setOpen(true);
+  }, [options, showCreate, loading]);
+  const handleKeyDown = React10.useCallback((e) => {
+    if (!open || totalItems === 0) {
+      if (e.key === "ArrowDown" && totalItems > 0) {
+        e.preventDefault();
+        setOpen(true);
+        setActiveIndex(0);
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((prev) => (prev + 1) % totalItems);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((prev) => prev <= 0 ? totalItems - 1 : prev - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < options.length) {
+          onSelect(options[activeIndex]);
+          setOpen(false);
+          setActiveIndex(-1);
+        } else if (showCreate && activeIndex === options.length) {
+          onCreateNew?.(value.trim());
+          setOpen(false);
+          setActiveIndex(-1);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        setActiveIndex(-1);
+        break;
+    }
+  }, [open, options, totalItems, activeIndex, onSelect, showCreate, onCreateNew, value]);
+  React10.useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return;
+    const items = listRef.current.children;
+    if (items[activeIndex]) items[activeIndex].scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+  function handleBlur() {
+    setTimeout(() => {
+      setOpen(false);
+      setActiveIndex(-1);
+      if (!value && onBlurEmpty) onBlurEmpty();
+      if (!value && inlineLabel) setExpanded(false);
+    }, 200);
+  }
+  const hasDropdown = open && (options.length > 0 || showCreate || loading);
+  if (!expanded && inlineLabel) {
+    const isPlus = inlineIcon === "plus";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setExpanded(true);
+          setTimeout(() => inputRef.current?.focus(), 50);
+        },
+        className: `flex items-center gap-1.5 w-full text-left text-sm py-1.5 pl-2 transition-colors ${isPlus ? "text-primary hover:text-primary/80" : "text-muted-foreground hover:text-foreground"} ${className ?? ""}`,
+        children: [
+          isPlus && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5 shrink-0" }),
+          inlineLabel
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: `relative ${className ?? ""}`, children: [
+    !minimal && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        onChange: (e) => {
+          onChange(e.target.value);
+          updateRect();
+          setOpen(true);
+        },
+        onFocus: () => {
+          updateRect();
+          onFocusProp?.();
+          if (options.length > 0 || showCreate || loading) setOpen(true);
+        },
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        autoFocus,
+        className: minimal ? "w-full bg-transparent pl-2 pr-3 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none border-b border-transparent hover:border-border focus:border-foreground transition-colors" : "w-full rounded-lg border bg-background pl-8 pr-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+        role: "combobox",
+        "aria-expanded": hasDropdown,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeIndex >= 0 ? `combobox-opt-${activeIndex}` : void 0
+      }
+    ),
+    hasDropdown && dropRect && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: listRef,
+          role: "listbox",
+          "data-modal-passthrough": true,
+          style: { position: "fixed", left: dropRect.left, top: dropRect.bottom + 4, width: dropRect.width, zIndex: 9999, pointerEvents: "auto" },
+          className: "fayz-glass-surface max-h-52 overflow-y-auto rounded-lg border bg-popover shadow-lg py-0.5 animate-in fade-in zoom-in-95 duration-100",
+          children: [
+            loading && options.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "h-3.5 w-3.5 animate-spin shrink-0", viewBox: "0 0 16 16", fill: "none", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.25" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.5 8a6.5 6.5 0 00-6.5-6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Buscando\u2026" })
+            ] }),
+            options.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                id: `combobox-opt-${i}`,
+                role: "option",
+                "aria-selected": i === activeIndex,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onSelect(opt);
+                  setOpen(false);
+                },
+                onMouseEnter: () => setActiveIndex(i),
+                className: `flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors ${i === activeIndex ? "bg-primary/10 text-primary" : "hover:bg-muted/50"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: opt.label }),
+                    opt.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: opt.subtitle })
+                  ] }),
+                  renderRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: renderRight(opt) })
+                ]
+              },
+              opt.id
+            )),
+            showCreate && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                id: `combobox-opt-${options.length}`,
+                role: "option",
+                "aria-selected": activeIndex === options.length,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onCreateNew?.(value.trim());
+                  setOpen(false);
+                },
+                onMouseEnter: () => setActiveIndex(options.length),
+                className: `flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors border-t ${activeIndex === options.length ? "bg-primary/10 text-primary" : "hover:bg-muted/50"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    createLabel,
+                    " \u201C",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: value.trim() }),
+                    "\u201D"
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 
 Object.defineProperty(exports, "toast", {
   enumerable: true,
@@ -1492,6 +1702,7 @@ exports.ModalTrigger = ModalTrigger;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.SearchCombobox = SearchCombobox;
 exports.SearchSelect = SearchSelect;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
@@ -1518,5 +1729,5 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.badgeVariants = badgeVariants;
 exports.renderMarkdown = renderMarkdown;
-//# sourceMappingURL=chunk-7PTRAWHO.cjs.map
-//# sourceMappingURL=chunk-7PTRAWHO.cjs.map
+//# sourceMappingURL=chunk-SVVKUMSL.cjs.map
+//# sourceMappingURL=chunk-SVVKUMSL.cjs.map