'use strict';

var chunk7Z5LLJ3A_js = require('./chunk-7Z5LLJ3A.js');
var React2 = require('react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React2__default = /*#__PURE__*/_interopDefault(React2);

var SearchBox = ({
  searchQuery,
  onSearchChange,
  placeholder = "\u641C\u7D22\u5B9E\u9A8C\u9879\u76EE\u7684\u6807\u9898\u3001\u63CF\u8FF0\u6216\u6807\u7B7E...",
  size = "large"
}) => {
  const getSizeStyles = () => {
    switch (size) {
      case "small":
        return {
          container: "h-10",
          input: "pl-10 pr-10 text-sm",
          icon: "w-4 h-4",
          iconPosition: "left-3",
          clearButton: "right-2 w-6 h-6",
          clearIcon: "w-3 h-3"
        };
      case "medium":
        return {
          container: "h-12",
          input: "pl-12 pr-12 text-base",
          icon: "w-5 h-5",
          iconPosition: "left-3",
          clearButton: "right-3 w-7 h-7",
          clearIcon: "w-4 h-4"
        };
      case "large":
      default:
        return {
          container: "h-16",
          input: "pl-6 pr-16 text-lg",
          icon: "w-6 h-6",
          iconPosition: "left-6",
          clearButton: "right-4 w-8 h-8",
          clearIcon: "w-4 h-4"
        };
    }
  };
  const styles = getSizeStyles();
  const isLarge = size === "large";
  return /* @__PURE__ */ React2__default.default.createElement("div", { className: "relative group w-full" }, /* @__PURE__ */ React2__default.default.createElement(
    "input",
    {
      type: "text",
      placeholder,
      value: searchQuery,
      onChange: (e) => onSearchChange(e.target.value),
      className: `
          w-full ${styles.container} ${styles.input}
          ${isLarge ? "border-2 border-gray-200 rounded-2xl shadow-lg" : "border border-gray-300 rounded-lg shadow-sm"}
          bg-white 
          focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 
          hover:border-gray-400 ${isLarge ? "hover:shadow-xl" : "hover:shadow-md"}
          transition-all duration-300 ease-out
          text-gray-800 placeholder-gray-500
          ${isLarge ? "font-medium" : "font-normal"}
        `
    }
  ), searchQuery && /* @__PURE__ */ React2__default.default.createElement(
    "button",
    {
      onClick: () => onSearchChange(""),
      className: `
            absolute top-1/2 ${styles.clearButton} transform -translate-y-1/2
            z-10 group/clear
          `
    },
    /* @__PURE__ */ React2__default.default.createElement("div", { className: `
            ${styles.clearButton} flex items-center justify-center
            rounded-full 
            bg-gray-100 hover:bg-gray-200 
            transition-all duration-200 
            group-hover/clear:scale-105
          ` }, /* @__PURE__ */ React2__default.default.createElement(
      "svg",
      {
        className: `${styles.clearIcon} text-gray-500 group-hover/clear:text-gray-700`,
        fill: "none",
        stroke: "currentColor",
        viewBox: "0 0 24 24"
      },
      /* @__PURE__ */ React2__default.default.createElement(
        "path",
        {
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: 2,
          d: "M6 18L18 6M6 6l12 12"
        }
      )
    ))
  ));
};
var Modal = ({
  isOpen,
  onClose,
  title,
  children,
  width = 600,
  height,
  maskClosable = true,
  className = "",
  contentClassName = "",
  showCloseButton = true,
  zIndex
}) => {
  React2.useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
    return () => {
      document.body.style.overflow = "unset";
    };
  }, [isOpen]);
  if (!isOpen) return null;
  return /* @__PURE__ */ React2__default.default.createElement("div", { className: "fixed inset-0 flex items-center justify-center p-4", style: { zIndex: zIndex || 50 } }, /* @__PURE__ */ React2__default.default.createElement(
    "div",
    {
      className: "fixed inset-0 bg-black/50 transition-opacity",
      onClick: () => maskClosable && onClose()
    }
  ), /* @__PURE__ */ React2__default.default.createElement(
    "div",
    {
      className: chunk7Z5LLJ3A_js.cn(
        "bg-white rounded-xl shadow-2xl z-10 overflow-hidden flex flex-col transition-all transform scale-100",
        className
      ),
      style: {
        width: typeof width === "number" ? `${width}px` : width,
        height: typeof height === "number" ? `${height}px` : height,
        maxWidth: "100%"
      }
    },
    (title || showCloseButton) && /* @__PURE__ */ React2__default.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex justify-between items-center" }, /* @__PURE__ */ React2__default.default.createElement("h3", { className: "text-xl font-semibold text-gray-900" }, title), showCloseButton && /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 transition-colors" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-2xl" }, "\xD7"))),
    /* @__PURE__ */ React2__default.default.createElement("div", { className: chunk7Z5LLJ3A_js.cn("flex-1 overflow-y-auto", contentClassName) }, children)
  ));
};
var ConfirmModal = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = "\u786E\u5B9A",
  cancelText = "\u53D6\u6D88",
  isLoading = false,
  className = "",
  zIndex
}) => {
  if (!isOpen) return null;
  return /* @__PURE__ */ React2__default.default.createElement(Modal, { isOpen, onClose, title, width: 400, className, zIndex }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "p-6" }, /* @__PURE__ */ React2__default.default.createElement("p", { className: "text-gray-600 mb-6" }, message), /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex justify-end space-x-3" }, /* @__PURE__ */ React2__default.default.createElement(
    "button",
    {
      onClick: onClose,
      className: "px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors",
      disabled: isLoading
    },
    cancelText
  ), /* @__PURE__ */ React2__default.default.createElement(
    "button",
    {
      onClick: onConfirm,
      className: "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center",
      disabled: isLoading
    },
    isLoading && /* @__PURE__ */ React2__default.default.createElement("div", { className: "mr-2 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" }),
    confirmText
  ))));
};

exports.ConfirmModal = ConfirmModal;
exports.Modal = Modal;
exports.SearchBox = SearchBox;
//# sourceMappingURL=chunk-G6WRJ2H2.js.map
//# sourceMappingURL=chunk-G6WRJ2H2.js.map