analytica-frontend-lib/dist/Search/index.js

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/Search/Search.tsx
var Search_exports = {};
__export(Search_exports, {
  default: () => Search_default
});
module.exports = __toCommonJS(Search_exports);
var import_phosphor_react2 = require("phosphor-react");
var import_react2 = require("react");

// src/components/DropdownMenu/DropdownMenu.tsx
var import_phosphor_react = require("phosphor-react");
var import_react = require("react");
var import_zustand = require("zustand");

// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// src/components/Button/Button.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES = {
  solid: {
    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
  },
  outline: {
    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
  },
  link: {
    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
  }
};
var SIZE_CLASSES = {
  "extra-small": "text-xs px-3.5 py-2",
  small: "text-sm px-4 py-2.5",
  medium: "text-md px-5 py-2.5",
  large: "text-lg px-6 py-3",
  "extra-large": "text-lg px-7 py-3.5"
};
var Button = ({
  children,
  iconLeft,
  iconRight,
  size = "medium",
  variant = "solid",
  action = "primary",
  className = "",
  disabled,
  type = "button",
  ...props
}) => {
  const sizeClasses = SIZE_CLASSES[size];
  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "button",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      disabled,
      type,
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
      ]
    }
  );
};
var Button_default = Button;

// src/components/DropdownMenu/DropdownMenu.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function createDropdownStore() {
  return (0, import_zustand.create)((set) => ({
    open: false,
    setOpen: (open) => set({ open })
  }));
}
var useDropdownStore = (externalStore) => {
  if (!externalStore) {
    throw new Error(
      "Component must be used within a DropdownMenu (store is missing)"
    );
  }
  return externalStore;
};
var injectStore = (children, store) => {
  return import_react.Children.map(children, (child) => {
    if ((0, import_react.isValidElement)(child)) {
      const typedChild = child;
      const newProps = {
        store
      };
      if (typedChild.props.children) {
        newProps.children = injectStore(typedChild.props.children, store);
      }
      return (0, import_react.cloneElement)(typedChild, newProps);
    }
    return child;
  });
};
var DropdownMenu = ({
  children,
  open: propOpen,
  onOpenChange
}) => {
  const storeRef = (0, import_react.useRef)(null);
  storeRef.current ??= createDropdownStore();
  const store = storeRef.current;
  const { open, setOpen: storeSetOpen } = (0, import_zustand.useStore)(store, (s) => s);
  const setOpen = (newOpen) => {
    storeSetOpen(newOpen);
  };
  const menuRef = (0, import_react.useRef)(null);
  const handleArrowDownOrArrowUp = (event) => {
    const menuContent = menuRef.current?.querySelector('[role="menu"]');
    if (menuContent) {
      event.preventDefault();
      const items = Array.from(
        menuContent.querySelectorAll(
          '[role="menuitem"]:not([aria-disabled="true"])'
        )
      ).filter((el) => el instanceof HTMLElement);
      if (items.length === 0) return;
      const focusedItem = document.activeElement;
      const currentIndex = items.findIndex((item) => item === focusedItem);
      let nextIndex;
      if (event.key === "ArrowDown") {
        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
      } else {
        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
      }
      items[nextIndex]?.focus();
    }
  };
  const handleDownkey = (event) => {
    if (event.key === "Escape") {
      setOpen(false);
    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
      handleArrowDownOrArrowUp(event);
    }
  };
  const handleClickOutside = (event) => {
    if (menuRef.current && !menuRef.current.contains(event.target)) {
      setOpen(false);
    }
  };
  (0, import_react.useEffect)(() => {
    if (open) {
      document.addEventListener("mousedown", handleClickOutside);
      document.addEventListener("keydown", handleDownkey);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", handleDownkey);
    };
  }, [open]);
  (0, import_react.useEffect)(() => {
    setOpen(open);
    onOpenChange?.(open);
  }, [open, onOpenChange]);
  (0, import_react.useEffect)(() => {
    if (propOpen) {
      setOpen(propOpen);
    }
  }, [propOpen]);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
};
var DropdownMenuTrigger = ({
  className,
  children,
  onClick,
  store: externalStore,
  ...props
}) => {
  const store = useDropdownStore(externalStore);
  const open = (0, import_zustand.useStore)(store, (s) => s.open);
  const toggleOpen = () => store.setState({ open: !open });
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    "button",
    {
      onClick: (e) => {
        e.stopPropagation();
        toggleOpen();
        if (onClick) onClick(e);
      },
      "aria-expanded": open,
      className: cn(className),
      ...props,
      children
    }
  );
};
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
var ITEM_SIZE_CLASSES = {
  small: "text-sm",
  medium: "text-md"
};
var SIDE_CLASSES = {
  top: "bottom-full",
  right: "top-full",
  bottom: "top-full",
  left: "top-full"
};
var ALIGN_CLASSES = {
  start: "left-0",
  center: "left-1/2 -translate-x-1/2",
  end: "right-0"
};
var MENUCONTENT_VARIANT_CLASSES = {
  menu: "p-1",
  profile: "p-6"
};
var MenuLabel = (0, import_react.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    "div",
    {
      ref,
      className: cn("text-sm w-full", inset ? "pl-8" : "", className),
      ...props
    }
  );
});
MenuLabel.displayName = "MenuLabel";
var DropdownMenuContent = (0, import_react.forwardRef)(
  ({
    className,
    align = "start",
    side = "bottom",
    variant = "menu",
    sideOffset = 4,
    children,
    store: externalStore,
    ...props
  }, ref) => {
    const store = useDropdownStore(externalStore);
    const open = (0, import_zustand.useStore)(store, (s) => s.open);
    const [isVisible, setIsVisible] = (0, import_react.useState)(open);
    (0, import_react.useEffect)(() => {
      if (open) {
        setIsVisible(true);
      } else {
        const timer = setTimeout(() => setIsVisible(false), 200);
        return () => clearTimeout(timer);
      }
    }, [open]);
    if (!isVisible) return null;
    const getPositionClasses = () => {
      const vertical = SIDE_CLASSES[side];
      const horizontal = ALIGN_CLASSES[align];
      return `absolute ${vertical} ${horizontal}`;
    };
    const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "div",
      {
        ref,
        role: "menu",
        className: `
        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
        ${getPositionClasses()}
        ${variantClasses}
        ${className}
      `,
        style: {
          marginTop: side === "bottom" ? sideOffset : void 0,
          marginBottom: side === "top" ? sideOffset : void 0,
          marginLeft: side === "right" ? sideOffset : void 0,
          marginRight: side === "left" ? sideOffset : void 0
        },
        ...props,
        children
      }
    );
  }
);
DropdownMenuContent.displayName = "DropdownMenuContent";
var DropdownMenuItem = (0, import_react.forwardRef)(
  ({
    className,
    size = "small",
    children,
    iconRight,
    iconLeft,
    disabled = false,
    onClick,
    variant = "menu",
    store: externalStore,
    ...props
  }, ref) => {
    const store = useDropdownStore(externalStore);
    const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
    const sizeClasses = ITEM_SIZE_CLASSES[size];
    const handleClick = (e) => {
      if (disabled) {
        e.preventDefault();
        e.stopPropagation();
        return;
      }
      onClick?.(e);
      setOpen(false);
    };
    const getVariantClasses = () => {
      if (variant === "profile") {
        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
      }
      return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
    };
    const getVariantProps = () => {
      return variant === "profile" ? { "data-variant": "profile" } : {};
    };
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
      "div",
      {
        ref,
        role: "menuitem",
        ...getVariantProps(),
        "aria-disabled": disabled,
        className: `
          focus-visible:bg-background-50
           ${getVariantClasses()}
          ${sizeClasses}
          ${className}
          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
        `,
        onClick: handleClick,
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === " ") handleClick(e);
        },
        tabIndex: disabled ? -1 : 0,
        ...props,
        children: [
          iconLeft,
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-full text-md", children }),
          iconRight
        ]
      }
    );
  }
);
DropdownMenuItem.displayName = "DropdownMenuItem";
var DropdownMenuSeparator = (0, import_react.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
  "div",
  {
    ref,
    className: cn("my-1 h-px bg-border-200", className),
    ...props
  }
));
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
var ProfileMenuTrigger = (0, import_react.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
  const store = useDropdownStore(externalStore);
  const open = (0, import_zustand.useStore)(store, (s) => s.open);
  const toggleOpen = () => store.setState({ open: !open });
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    "button",
    {
      ref,
      className: cn(
        "rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer",
        className
      ),
      onClick: (e) => {
        e.stopPropagation();
        toggleOpen();
        onClick?.(e);
      },
      "aria-expanded": open,
      ...props,
      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { className: "text-primary-950", size: 18 }) })
    }
  );
});
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
var ProfileMenuHeader = (0, import_react.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    "div",
    {
      ref,
      "data-component": "ProfileMenuHeader",
      className: cn("flex flex-row gap-4 items-center", className),
      ...props,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { size: 34, className: "text-primary-950" }) }),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col ", children: [
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-md text-text-600", children: email })
        ] })
      ]
    }
  );
});
ProfileMenuHeader.displayName = "ProfileMenuHeader";
var ProfileMenuSection = (0, import_react.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
});
ProfileMenuSection.displayName = "ProfileMenuSection";
var ProfileMenuFooter = ({
  className,
  disabled = false,
  onClick,
  store: externalStore,
  ...props
}) => {
  const store = useDropdownStore(externalStore);
  const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    Button_default,
    {
      variant: "outline",
      className: cn("w-full", className),
      disabled,
      onClick: (e) => {
        setOpen(false);
        onClick?.(e);
      },
      ...props,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.SignOut, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Sair" })
      ]
    }
  );
};
ProfileMenuFooter.displayName = "ProfileMenuFooter";
var DropdownMenu_default = DropdownMenu;

// src/components/Search/Search.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var filterOptions = (options, query) => {
  if (!query || query.length < 1) return [];
  return options.filter(
    (option) => option.toLowerCase().includes(query.toLowerCase())
  );
};
var updateInputValue = (value, ref, onChange) => {
  if (!onChange) return;
  if (ref && "current" in ref && ref.current) {
    ref.current.value = value;
    const event = new Event("input", { bubbles: true });
    Object.defineProperty(event, "target", {
      writable: false,
      value: ref.current
    });
    onChange(event);
  } else {
    const event = {
      target: { value },
      currentTarget: { value }
    };
    onChange(event);
  }
};
var Search = (0, import_react2.forwardRef)(
  ({
    options = [],
    onSelect,
    onSearch,
    showDropdown: controlledShowDropdown,
    onDropdownChange,
    dropdownMaxHeight = 240,
    noResultsText = "Nenhum resultado encontrado",
    className = "",
    containerClassName = "",
    disabled,
    readOnly,
    id,
    onClear,
    value,
    onChange,
    placeholder = "Buscar...",
    ...props
  }, ref) => {
    const [dropdownOpen, setDropdownOpen] = (0, import_react2.useState)(false);
    const dropdownStore = (0, import_react2.useRef)(createDropdownStore()).current;
    const dropdownRef = (0, import_react2.useRef)(null);
    const filteredOptions = (0, import_react2.useMemo)(() => {
      if (!options.length) {
        return [];
      }
      const filtered = filterOptions(options, value || "");
      return filtered;
    }, [options, value]);
    const showDropdown = controlledShowDropdown ?? (dropdownOpen && value && String(value).length > 0);
    (0, import_react2.useEffect)(() => {
      const shouldShow = Boolean(value && String(value).length > 0);
      setDropdownOpen(shouldShow);
      dropdownStore.setState({ open: shouldShow });
      onDropdownChange?.(shouldShow);
    }, [value, onDropdownChange, dropdownStore]);
    const handleSelectOption = (option) => {
      onSelect?.(option);
      setDropdownOpen(false);
      dropdownStore.setState({ open: false });
      updateInputValue(option, ref, onChange);
    };
    (0, import_react2.useEffect)(() => {
      const handleClickOutside = (event) => {
        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
          setDropdownOpen(false);
          dropdownStore.setState({ open: false });
        }
      };
      if (showDropdown) {
        document.addEventListener("mousedown", handleClickOutside);
      }
      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }, [showDropdown, dropdownStore]);
    const generatedId = (0, import_react2.useId)();
    const inputId = id ?? `search-${generatedId}`;
    const handleClear = () => {
      if (onClear) {
        onClear();
      } else {
        updateInputValue("", ref, onChange);
      }
    };
    const handleClearClick = (e) => {
      e.preventDefault();
      e.stopPropagation();
      handleClear();
    };
    const handleLeftIconClick = () => {
      if (ref && "current" in ref && ref.current) {
        ref.current.blur();
      }
    };
    const handleInputChange = (e) => {
      onChange?.(e);
      onSearch?.(e.target.value);
    };
    const getInputStateClasses = (disabled2, readOnly2) => {
      if (disabled2) return "cursor-not-allowed opacity-40";
      if (readOnly2) return "cursor-default focus:outline-none !text-text-900";
      return "hover:border-border-400";
    };
    const showClearButton = value && !disabled && !readOnly;
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
      "div",
      {
        ref: dropdownRef,
        className: `w-full max-w-lg md:w-[488px] ${containerClassName}`,
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center", children: [
            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
              "button",
              {
                type: "button",
                className: "w-6 h-6 text-text-800 flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer hover:text-text-600 transition-colors",
                onClick: handleLeftIconClick,
                "aria-label": "Voltar",
                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react2.CaretLeft, {})
              }
            ) }),
            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
              "input",
              {
                ref,
                id: inputId,
                type: "text",
                className: `w-full py-0 px-4 pl-10 ${showClearButton ? "pr-10" : "pr-4"} font-normal text-text-900 focus:outline-primary-950 border rounded-full bg-primary border-border-300 focus:border-2 focus:border-primary-950 h-10 placeholder:text-text-600 ${getInputStateClasses(disabled, readOnly)} ${className}`,
                value,
                onChange: handleInputChange,
                disabled,
                readOnly,
                placeholder,
                "aria-expanded": showDropdown ? "true" : void 0,
                "aria-haspopup": options.length > 0 ? "listbox" : void 0,
                role: options.length > 0 ? "combobox" : void 0,
                ...props
              }
            ),
            showClearButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
              "button",
              {
                type: "button",
                className: "p-0 border-0 bg-transparent cursor-pointer",
                onMouseDown: handleClearClick,
                "aria-label": "Limpar busca",
                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react2.X, {}) })
              }
            ) })
          ] }),
          showDropdown && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenu_default, { open: showDropdown, onOpenChange: setDropdownOpen, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
            DropdownMenuContent,
            {
              className: "w-full mt-1",
              style: { maxHeight: dropdownMaxHeight },
              align: "start",
              children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                DropdownMenuItem,
                {
                  onClick: () => handleSelectOption(option),
                  className: "text-text-700 text-base leading-6 cursor-pointer",
                  children: option
                },
                option
              )) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-3 py-3 text-text-700 text-base", children: noResultsText })
            }
          ) })
        ]
      }
    );
  }
);
Search.displayName = "Search";
var Search_default = Search;
//# sourceMappingURL=index.js.map