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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AgroShine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,17 +1,29 @@
-# ags-web-ui-kit
+# @agroshine/ags-web-ui-kit
 
 Librería de componentes React para AgroShine · Luna Nueva.
 
 Stack: React 18+ · TypeScript · Tailwind CSS v4 · shadcn/ui · Radix UI · class-variance-authority · lucide-react.
 
-## Instalación (workspace pnpm)
+## Instalación
+
+Desde el registro público de npm:
+
+```bash
+pnpm add @agroshine/ags-web-ui-kit
+# o
+npm i @agroshine/ags-web-ui-kit
+# o
+yarn add @agroshine/ags-web-ui-kit
+```
+
+### Workspace pnpm (consumidores internos)
 
 Desde un consumidor del workspace (admin, client, website):
 
 ```jsonc
 // package.json
 "dependencies": {
-  "ags-web-ui-kit": "workspace:*"
+  "@agroshine/ags-web-ui-kit": "workspace:*"
 }
 ```
 
@@ -19,7 +31,7 @@ Luego:
 
 ```bash
 pnpm install
-pnpm --filter ags-web-ui-kit build
+pnpm --filter @agroshine/ags-web-ui-kit build
 ```
 
 ## Uso del Tailwind preset
@@ -27,10 +39,10 @@ pnpm --filter ags-web-ui-kit build
 ```js
 // tailwind.config.{js,ts}
 module.exports = {
-  presets: [require('ags-web-ui-kit/tailwind.preset')],
+  presets: [require('@agroshine/ags-web-ui-kit/tailwind.preset')],
   content: [
     './src/**/*.{ts,tsx}',
-    './node_modules/ags-web-ui-kit/dist/**/*.{js,cjs}',
+    './node_modules/@agroshine/ags-web-ui-kit/dist/**/*.{js,cjs}',
   ],
 };
 ```
@@ -40,16 +52,16 @@ En Tailwind v4 (config CSS-first), importar también los tokens semánticos:
 ```css
 /* src/index.css */
 @import 'tailwindcss';
-@import 'ags-web-ui-kit/styles/tokens.css';
+@import '@agroshine/ags-web-ui-kit/styles/tokens.css';
 ```
 
 ## Imports
 
 ```ts
-import { Button, Tag, Drawer } from 'ags-web-ui-kit';
+import { Button, Tag, Drawer } from '@agroshine/ags-web-ui-kit';
 // o por categoría:
-import { Button } from 'ags-web-ui-kit/atoms';
-import { Sheet } from 'ags-web-ui-kit/ui';
+import { Button } from '@agroshine/ags-web-ui-kit/atoms';
+import { Sheet } from '@agroshine/ags-web-ui-kit/ui';
 ```
 
 ## Estructura

package/dist/{chunk-JTFCE6RA.js → chunk-BZATZ5U5.js}

@@ -1,14 +1,14 @@
 import { FormItem } from './chunk-QEG27NX6.js';
 import { Spinner, Button } from './chunk-QAZMI5VH.js';
 import { Accordion, Calendar as Calendar$1, AccordionItem, AccordionTrigger, AccordionContent } from './chunk-6O2IDBTX.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-6YUNWKT3.js';
+import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './chunk-6YUNWKT3.js';
 import { cn } from './chunk-MOED3QPY.js';
-import React, { forwardRef, useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import React, { forwardRef, useState, useCallback, useMemo, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { cva } from 'class-variance-authority';
-import { Search, Calendar, ServerCrash, FileQuestion, Info, AlertTriangle, XCircle, CheckCircle2, ChevronRight } from 'lucide-react';
-import { faArrowLeft, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { Search, Calendar, ChevronDown, X, ServerCrash, FileQuestion, Info, AlertTriangle, XCircle, CheckCircle2, ChevronRight, ArrowUpRight } from 'lucide-react';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import dayjs from 'dayjs';
 import { Toaster as Toaster$1 } from 'sonner';
@@ -713,114 +713,249 @@ var QueryState = forwardRef(function QueryState2({
   return /* @__PURE__ */ jsx(Fragment, { children });
 });
 QueryState.displayName = "QueryState";
-function SearchFilterBar({
+var SearchCategoryMenu = ({
   options,
-  selectedOption,
-  onOptionChange,
-  searchValue,
-  onSearchChange,
-  searchPlaceholder = "Buscar...",
-  className = ""
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-  const selectedLabel = useMemo(
-    () => options.find((option) => String(option.value) === selectedOption)?.label ?? selectedOption,
-    [options, selectedOption]
-  );
-  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__ */ jsx(Fragment, { children: options.map((opt) => {
+  const v = String(opt.value);
+  const active = isActive(v);
   return /* @__PURE__ */ 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: 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__ */ jsxs("div", { className: "relative w-full sm:w-[180px] sm:min-w-[180px]", ref: dropdownRef, children: [
-          /* @__PURE__ */ 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__ */ jsx("span", { className: "text-sm leading-tight", children: selectedLabel }),
-                /* @__PURE__ */ 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__ */ jsx(
-                      "path",
+        multi && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            readOnly: true,
+            checked: active,
+            tabIndex: -1,
+            className: "h-4 w-4 shrink-0 accent-primary"
+          }
+        ),
+        opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-primary [&_svg]:h-[18px] [&_svg]:w-[18px]", children: opt.leadingIcon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: opt.label })
+      ]
+    },
+    v
+  );
+}) });
+var SearchFilterBar = 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] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+    const isMulti = props.categoryMultiSelect === true;
+    const categoryLabel = 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 = useCallback(
+      (v) => {
+        if (isMulti) return props.selectedOptions.includes(v);
+        return props.selectedOption === v;
+      },
+      [isMulti, props]
+    );
+    const handleSelect = 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__ */ jsxs("div", { ref, className: cn("relative", className), children: [
+      /* @__PURE__ */ jsxs(Popover, { open: catOpen, onOpenChange: setCatOpen, children: [
+        /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: 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__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx("span", { className: "flex-1 truncate", children: categoryLabel }),
+                    /* @__PURE__ */ jsx(
+                      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: cn(
+                          "h-3 w-3 shrink-0 transition-transform duration-200",
+                          catOpen && "rotate-180"
+                        )
                       }
                     )
-                  }
-                )
-              ]
-            }
-          ),
-          isOpen && /* @__PURE__ */ 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__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-6 w-px shrink-0 bg-primary-200" }),
+              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 pr-4", children: [
+                showClear && searchValue && /* @__PURE__ */ 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__ */ jsx(X, { "aria-hidden": "true", className: "h-5 w-5" })
                   }
-                ) }, value);
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-full sm:max-w-[360px] sm:flex-1", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
-            FontAwesomeIcon,
-            {
-              icon: faSearch,
-              className: "pointer-events-none absolute right-3 text-[#c4c8d0]"
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
-}
+                ),
+                /* @__PURE__ */ 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__ */ jsx(Search, { "aria-hidden": "true", className: "h-5 w-5" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            align: "start",
+            sideOffset: 6,
+            style: { width: categoryMenuWidth },
+            className: "p-1.5",
+            children: /* @__PURE__ */ jsx(
+              SearchCategoryMenu,
+              {
+                options,
+                isActive: isOptionActive,
+                onSelect: handleSelect,
+                multi: isMulti
+              }
+            )
+          }
+        )
+      ] }),
+      showSuggestions && /* @__PURE__ */ 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__ */ jsx("div", { className: cn("border-b border-border px-[18px] py-3 text-sm last:border-0", className), children });
+var SearchSuggestQuery = ({ children }) => /* @__PURE__ */ jsx(SearchSuggestRow, { className: "font-medium text-foreground", children });
+var SearchSuggestHeader = ({
+  title,
+  action
+}) => /* @__PURE__ */ jsxs(SearchSuggestRow, { className: "flex items-center justify-between font-semibold text-foreground", children: [
+  /* @__PURE__ */ jsx("span", { children: title }),
+  action && /* @__PURE__ */ 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__ */ jsxs(
+  "div",
+  {
+    role: "option",
+    "aria-selected": active,
+    onClick,
+    className: 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__ */ jsx("span", { className: "flex-1", children }),
+      withLinkIcon && /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-foreground" })
+    ]
+  }
+);
+var SearchSuggestFooter = ({ children }) => /* @__PURE__ */ jsx("div", { className: "border-t border-border px-[18px] py-3 text-xs text-muted-foreground", children });
+var SearchSuggestEmpty = ({
+  title,
+  description
+}) => /* @__PURE__ */ jsxs("div", { className: "px-[18px] py-7 text-center", children: [
+  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title }),
+  description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-1.5 max-w-[36ch] text-xs text-muted-foreground", children: description })
+] });
 var sidebarItemVariants = cva(
   [
     "group/sb-item relative flex items-center gap-2.5 text-[13px] cursor-pointer select-none outline-none",
@@ -1151,6 +1286,6 @@ var Tree = forwardRef(function Tree2({ data, defaultExpanded, expanded, onExpand
 });
 Tree.displayName = "Tree";
 
-export { Accordion2 as Accordion, BrandLogo, Content, DEFAULT_FORMAT, DEFAULT_FORMATS, DatePicker, FarmChip, FormCard, Header, Layout, PageHeader, PickerPanel, QueryState, RangePicker, Result, SearchBox, SearchFilterBar, Sidebar, Toaster, Tree, UserAvatar };
-//# sourceMappingURL=chunk-JTFCE6RA.js.map
-//# sourceMappingURL=chunk-JTFCE6RA.js.map
+export { Accordion2 as Accordion, BrandLogo, Content, DEFAULT_FORMAT, DEFAULT_FORMATS, DatePicker, FarmChip, FormCard, Header, Layout, PageHeader, PickerPanel, QueryState, RangePicker, Result, SearchBox, SearchFilterBar, SearchSuggestEmpty, SearchSuggestFooter, SearchSuggestHeader, SearchSuggestItem, SearchSuggestQuery, SearchSuggestRow, Sidebar, Toaster, Tree, UserAvatar };
+//# sourceMappingURL=chunk-BZATZ5U5.js.map
+//# sourceMappingURL=chunk-BZATZ5U5.js.map