@agroshine/ags-web-ui-kit 1.0.0 → 1.2.0

package/dist/{chunk-C4LX3XTN.cjs → chunk-NDHF6M7F.cjs}

@@ -720,114 +720,249 @@ var QueryState = React.forwardRef(function QueryState2({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 });
 QueryState.displayName = "QueryState";
-function SearchFilterBar({
+var SearchCategoryMenu = ({
   options,
-  selectedOption,
-  onOptionChange,
-  searchValue,
-  onSearchChange,
-  searchPlaceholder = "Buscar...",
-  className = ""
-}) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const dropdownRef = React.useRef(null);
-  const selectedLabel = React.useMemo(
-    () => options.find((option) => String(option.value) === selectedOption)?.label ?? selectedOption,
-    [options, selectedOption]
-  );
-  React.useEffect(() => {
-    const onClickOutside = (event) => {
-      if (!dropdownRef.current) return;
-      if (!dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", onClickOutside);
-    return () => document.removeEventListener("mousedown", onClickOutside);
-  }, []);
+  isActive,
+  onSelect,
+  multi
+}) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((opt) => {
+  const v = String(opt.value);
+  const active = isActive(v);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    "button",
     {
-      className: `flex w-full flex-col gap-3 sm:flex-row sm:items-stretch sm:gap-0 ${className}`,
+      type: "button",
+      onClick: () => onSelect(v),
+      disabled: opt.disabled,
+      className: chunkA3A7PJWG_cjs.cn(
+        "flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        active ? "bg-primary-50 text-primary" : "text-foreground hover:bg-primary-50 hover:text-primary"
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full sm:w-[180px] sm:min-w-[180px]", ref: dropdownRef, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setIsOpen((prev) => !prev),
-              className: "flex h-10 w-full items-center justify-between rounded-md border border-primary-500 bg-white px-4 text-left text-sm font-semibold text-primary-500 sm:rounded-r-none sm:border-r-0",
-              "aria-haspopup": "listbox",
-              "aria-expanded": isOpen,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-tight", children: selectedLabel }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: "h-4 w-4 flex-shrink-0 text-primary-500",
-                    viewBox: "0 0 20 20",
-                    fill: "currentColor",
-                    "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
+        multi && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            readOnly: true,
+            checked: active,
+            tabIndex: -1,
+            className: "h-4 w-4 shrink-0 accent-primary"
+          }
+        ),
+        opt.leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-primary [&_svg]:h-[18px] [&_svg]:w-[18px]", children: opt.leadingIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: opt.label })
+      ]
+    },
+    v
+  );
+}) });
+var SearchFilterBar = React.forwardRef(
+  function SearchFilterBar2(props, ref) {
+    const {
+      options,
+      searchValue,
+      onSearchChange,
+      searchPlaceholder = "Busca en la categor\xEDa seleccionada",
+      onSearch,
+      onClear,
+      showClear = true,
+      suggestions,
+      suggestionsOpen,
+      categoryMenuWidth = 280,
+      className
+    } = props;
+    const [catOpen, setCatOpen] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const isMulti = props.categoryMultiSelect === true;
+    const categoryLabel = React.useMemo(() => {
+      if (isMulti) {
+        const selected = props.selectedOptions;
+        if (selected.length === 0) {
+          return props.categoryEmptyLabel ?? "Categor\xEDas";
+        }
+        const labelFn = props.categoryMultiLabel;
+        return labelFn?.(selected.length) ?? `${selected.length} elementos...`;
+      }
+      const v = props.selectedOption;
+      return options.find((o) => String(o.value) === v)?.label ?? v;
+    }, [isMulti, props, options]);
+    const isOptionActive = React.useCallback(
+      (v) => {
+        if (isMulti) return props.selectedOptions.includes(v);
+        return props.selectedOption === v;
+      },
+      [isMulti, props]
+    );
+    const handleSelect = React.useCallback(
+      (v) => {
+        if (isMulti) {
+          const selected = props.selectedOptions;
+          const next = selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v];
+          props.onOptionsChange(next);
+        } else {
+          props.onOptionChange(v);
+          setCatOpen(false);
+        }
+      },
+      [isMulti, props]
+    );
+    const showSuggestions = suggestionsOpen ?? (focused && searchValue.length > 0 && suggestions !== void 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkA3A7PJWG_cjs.cn("relative", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(chunk2KRMLIJQ_cjs.Popover, { open: catOpen, onOpenChange: setCatOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunk2KRMLIJQ_cjs.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkA3A7PJWG_cjs.cn(
+              "flex h-12 items-center rounded-lg border-[1.5px] bg-background transition-colors",
+              catOpen || focused ? "border-primary" : "border-primary-200 hover:border-primary-400"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunk2KRMLIJQ_cjs.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex h-full w-[190px] shrink-0 cursor-pointer items-center gap-3 border-0 bg-transparent px-4 text-left text-sm font-semibold text-primary focus:outline-none",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": catOpen,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: categoryLabel }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.ChevronDown,
                       {
-                        fillRule: "evenodd",
-                        d: "M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z",
-                        clipRule: "evenodd"
+                        "aria-hidden": "true",
+                        className: chunkA3A7PJWG_cjs.cn(
+                          "h-3 w-3 shrink-0 transition-transform duration-200",
+                          catOpen && "rotate-180"
+                        )
                       }
                     )
-                  }
-                )
-              ]
-            }
-          ),
-          isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-            "ul",
-            {
-              role: "listbox",
-              className: "absolute z-20 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-[#d1d5db] bg-white py-1 shadow-lg",
-              children: options.map((option) => {
-                const value = String(option.value);
-                const isSelected = value === selectedOption;
-                return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "h-6 w-px shrink-0 bg-primary-200" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  value: searchValue,
+                  onChange: (e) => onSearchChange(e.target.value),
+                  onFocus: () => setFocused(true),
+                  onBlur: () => {
+                    window.setTimeout(() => setFocused(false), 120);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") onSearch?.(searchValue);
+                  },
+                  placeholder: searchPlaceholder,
+                  className: "h-full min-w-0 flex-1 border-0 bg-transparent pl-4 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3 pr-4", children: [
+                showClear && searchValue && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
+                    "aria-label": "Limpiar",
                     onClick: () => {
-                      onOptionChange(value);
-                      setIsOpen(false);
+                      onSearchChange("");
+                      onClear?.();
+                      inputRef.current?.focus();
                     },
-                    className: `w-full px-4 py-2 text-left text-sm hover:bg-blue-50 ${isSelected ? "bg-blue-50 font-medium text-primary-500" : "text-[#374151]"}`,
-                    children: option.label
+                    className: "grid h-6 w-6 cursor-pointer place-items-center border-0 bg-transparent p-0 text-muted-foreground hover:text-foreground",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "h-5 w-5" })
                   }
-                ) }, value);
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:max-w-[360px] sm:flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-10 w-full items-center rounded-md border border-[#d1d5db] bg-white px-4 sm:rounded-l-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              value: searchValue,
-              onChange: (event) => onSearchChange(event.target.value),
-              placeholder: searchPlaceholder,
-              className: "w-full bg-transparent pr-8 text-sm text-gray-500-500 placeholder:text-[#9ca3af] focus:outline-none"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactFontawesome.FontAwesomeIcon,
-            {
-              icon: freeSolidSvgIcons.faSearch,
-              className: "pointer-events-none absolute right-3 text-[#c4c8d0]"
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
-}
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Buscar",
+                    onClick: () => onSearch?.(searchValue),
+                    className: "grid h-6 w-6 cursor-pointer place-items-center border-0 bg-transparent p-0 text-primary hover:text-primary-600",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": "true", className: "h-5 w-5" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunk2KRMLIJQ_cjs.PopoverContent,
+          {
+            align: "start",
+            sideOffset: 6,
+            style: { width: categoryMenuWidth },
+            className: "p-1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SearchCategoryMenu,
+              {
+                options,
+                isActive: isOptionActive,
+                onSelect: handleSelect,
+                multi: isMulti
+              }
+            )
+          }
+        )
+      ] }),
+      showSuggestions && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-x-0 top-full z-20 mt-1.5 overflow-hidden rounded-lg border border-border bg-popover shadow-md",
+          onMouseDown: (e) => e.preventDefault(),
+          children: suggestions
+        }
+      )
+    ] });
+  }
+);
+SearchFilterBar.displayName = "SearchFilterBar";
+var SearchSuggestRow = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkA3A7PJWG_cjs.cn("border-b border-border px-[18px] py-3 text-sm last:border-0", className), children });
+var SearchSuggestQuery = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(SearchSuggestRow, { className: "font-medium text-foreground", children });
+var SearchSuggestHeader = ({
+  title,
+  action
+}) => /* @__PURE__ */ jsxRuntime.jsxs(SearchSuggestRow, { className: "flex items-center justify-between font-semibold text-foreground", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+  action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cursor-pointer text-[13.5px] font-medium text-primary underline underline-offset-[3px]", children: action })
+] });
+var SearchSuggestItem = ({
+  active,
+  withLinkIcon,
+  onClick,
+  children,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    role: "option",
+    "aria-selected": active,
+    onClick,
+    className: chunkA3A7PJWG_cjs.cn(
+      "flex cursor-pointer items-center gap-3 border-b border-border px-[18px] py-3 text-sm text-foreground transition-colors last:border-0 hover:bg-primary-50",
+      active && "bg-primary-50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+      withLinkIcon && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-foreground" })
+    ]
+  }
+);
+var SearchSuggestFooter = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-[18px] py-3 text-xs text-muted-foreground", children });
+var SearchSuggestEmpty = ({
+  title,
+  description
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-[18px] py-7 text-center", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: title }),
+  description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-1.5 max-w-[36ch] text-xs text-muted-foreground", children: description })
+] });
 var sidebarItemVariants = classVarianceAuthority.cva(
   [
     "group/sb-item relative flex items-center gap-2.5 text-[13px] cursor-pointer select-none outline-none",
@@ -1179,9 +1314,15 @@ exports.RangePicker = RangePicker;
 exports.Result = Result;
 exports.SearchBox = SearchBox;
 exports.SearchFilterBar = SearchFilterBar;
+exports.SearchSuggestEmpty = SearchSuggestEmpty;
+exports.SearchSuggestFooter = SearchSuggestFooter;
+exports.SearchSuggestHeader = SearchSuggestHeader;
+exports.SearchSuggestItem = SearchSuggestItem;
+exports.SearchSuggestQuery = SearchSuggestQuery;
+exports.SearchSuggestRow = SearchSuggestRow;
 exports.Sidebar = Sidebar;
 exports.Toaster = Toaster;
 exports.Tree = Tree;
 exports.UserAvatar = UserAvatar;
-//# sourceMappingURL=chunk-C4LX3XTN.cjs.map
-//# sourceMappingURL=chunk-C4LX3XTN.cjs.map
+//# sourceMappingURL=chunk-NDHF6M7F.cjs.map
+//# sourceMappingURL=chunk-NDHF6M7F.cjs.map