@seekho/ui 0.1.9 → 0.1.12

package/dist/index.js

@@ -1,10 +1,391 @@
 'use strict';
 
-var react = require('react');
-var reactHotkeysHook = require('react-hotkeys-hook');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactHotkeysHook = require('react-hotkeys-hook');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-// src/components/Modal/Modal.tsx
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/AutoComplete/AutoComplete.tsx
+function AutoComplete({
+  label,
+  value,
+  options,
+  disabled = false,
+  error = false,
+  className,
+  getOptionLabel,
+  isOptionEqualToValue,
+  isLoading = false,
+  renderOption,
+  onChange,
+  onInputChange
+}) {
+  const inputId = React.useId();
+  const containerRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState(
+    value ? getOptionLabel(value) : ""
+  );
+  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+  const filteredOptions = options.filter(
+    (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+  );
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setInputValue(val);
+    setOpen(true);
+    setHighlightedIndex(-1);
+    onInputChange == null ? void 0 : onInputChange(val);
+  };
+  const handleSelect = ({ option }) => {
+    onChange(option);
+    setInputValue(getOptionLabel(option));
+    setOpen(false);
+    setHighlightedIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setOpen(true);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      setHighlightedIndex(
+        (prev) => Math.min(prev + 1, filteredOptions.length - 1)
+      );
+    } else if (e.key === "ArrowUp") {
+      setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      handleSelect({ option: filteredOptions[highlightedIndex] });
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      setInputValue(value ? getOptionLabel(value) : "");
+    }
+  };
+  const isSelected = ({ option }) => {
+    if (!value) return false;
+    return isOptionEqualToValue ? isOptionEqualToValue(option, value) : getOptionLabel(option) === getOptionLabel(value);
+  };
+  React.useEffect(() => {
+    setInputValue(value ? getOptionLabel(value) : "");
+  }, [value]);
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setInputValue(value ? getOptionLabel(value) : "");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [value]);
+  const isFloated = !!(inputValue || open);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: ["relative w-full", className || ""].join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: [
+              "relative flex items-center rounded-md bg-white px-3 py-2 gap-2 transition-colors",
+              disabled ? "bg-gray-50 opacity-60 cursor-not-allowed" : ""
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "fieldset",
+                {
+                  className: [
+                    "absolute inset-0 rounded-md border pointer-events-none transition-colors",
+                    error ? "border-red-400" : open ? "border-basePurple border-2" : "border-gray-300"
+                  ].join(" "),
+                  style: { paddingLeft: "8px" },
+                  children: label && /* @__PURE__ */ jsxRuntime.jsx(
+                    "legend",
+                    {
+                      className: "text-[11px] transition-all duration-150 h-0 overflow-visible",
+                      style: {
+                        maxWidth: isFloated ? "100%" : "0.01px",
+                        visibility: "hidden",
+                        whiteSpace: "nowrap"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 text-[11px]", children: label })
+                    }
+                  )
+                }
+              ),
+              label && /* @__PURE__ */ jsxRuntime.jsx(
+                "label",
+                {
+                  htmlFor: inputId,
+                  className: [
+                    "absolute left-3 transition-all duration-150 pointer-events-none",
+                    isFloated ? "-top-[9px] text-[11px] bg-white px-1" : "top-1/2 -translate-y-1/2 text-[13px]",
+                    error ? "text-red-500" : isFloated || open ? "text-basePurple" : "text-gray-500"
+                  ].join(" "),
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  id: inputId,
+                  value: inputValue,
+                  disabled,
+                  autoComplete: "off",
+                  className: "w-full text-[13px] focus:outline-none bg-transparent text-gray-800 disabled:cursor-not-allowed",
+                  onChange: handleInputChange,
+                  onFocus: () => setOpen(true),
+                  onKeyDown: handleKeyDown
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+                isLoading && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    className: "animate-spin w-4 h-4 text-gray-400",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                value && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onChange(null);
+                      setInputValue("");
+                      onInputChange == null ? void 0 : onInputChange("");
+                    },
+                    className: "text-gray-400 hover:text-gray-600 transition-colors",
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        className: "w-3.5 h-3.5",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled,
+                    onClick: () => !disabled && setOpen((prev) => !prev),
+                    className: "text-gray-400 hover:text-gray-600 transition-colors disabled:cursor-not-allowed",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        className: [
+                          "w-4 h-4 transition-transform",
+                          open ? "rotate-180" : ""
+                        ].join(" "),
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        open && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            ref: listRef,
+            className: "absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-56 overflow-y-auto",
+            children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-2 text-[13px] text-gray-400", children: "Loading..." }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-2 text-[13px] text-gray-400", children: "No options" }) : filteredOptions.map((option, idx) => {
+              const optionProps = {
+                onClick: () => handleSelect({ option }),
+                onMouseEnter: () => setHighlightedIndex(idx),
+                className: [
+                  "px-3 py-2 text-[13px] cursor-pointer select-none",
+                  highlightedIndex === idx ? "bg-basePurple/10 text-basePurple" : "text-gray-700",
+                  isSelected({ option }) ? "font-semibold" : ""
+                ].join(" ")
+              };
+              return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  onMouseDown: () => handleSelect({ option }),
+                  onMouseEnter: () => setHighlightedIndex(idx),
+                  className: optionProps.className,
+                  children: getOptionLabel(option)
+                },
+                idx
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+var ButtonLoader = ({ className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      className: `animate-spin h-5 w-5 text-white ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 018 8h-4l3 3 3-3h-4a8 8 0 01-8 8v-4l-3 3 3 3v-4a8 8 0 01-8-8z"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/utils/helperFunctions.ts
+var cn = (...classes) => classes.filter(Boolean).join(" ");
+var handleCopyTextToClipboard = async ({
+  clipboardText
+}) => {
+  if (clipboardText === void 0 || clipboardText === null) return false;
+  const text = String(clipboardText);
+  if (navigator.clipboard && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (err) {
+      console.warn(
+        "navigator.clipboard.writeText failed, falling back to execCommand",
+        err
+      );
+    }
+  }
+  try {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.opacity = "0";
+    textArea.setAttribute("readonly", "");
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    textArea.setSelectionRange(0, text.length);
+    const success = document.execCommand("copy");
+    document.body.removeChild(textArea);
+    if (success) return true;
+  } catch (err) {
+    console.warn("execCommand copy failed", err);
+  }
+  try {
+    window.prompt("Copy to clipboard: Cmd+C, Enter", text);
+    return false;
+  } catch (e) {
+    return false;
+  }
+};
+var CopyId = ({
+  id,
+  className,
+  displayHash = true,
+  onCopy
+}) => {
+  const handleClick = async (e) => {
+    e.stopPropagation();
+    const success = await handleCopyTextToClipboard({ clipboardText: id });
+    onCopy == null ? void 0 : onCopy(success);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: handleClick,
+      className: [
+        "border border-basePurple px-3 py-[1px] text-basePurple",
+        "rounded-[24px] text-[11px] mt-1 hover:bg-basePurple/10 transition-colors",
+        className || ""
+      ].join(" "),
+      children: [
+        displayHash && "#",
+        id
+      ]
+    }
+  );
+};
+var CustomAnchor = ({
+  displayText,
+  href,
+  className,
+  openInNewTab = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      className: `hover:text-black hover:no-underline ${className || ""}`,
+      target: openInNewTab ? "_blank" : "",
+      rel: openInNewTab ? "noopener noreferrer" : void 0,
+      children: displayText
+    }
+  );
+};
 
 // src/utils/modalStack.ts
 var stack = [];
@@ -32,8 +413,8 @@ function Modal({
   handleConfirmation,
   handleConfirmationBtnText = "Confirm"
 }) {
-  const modalId = react.useId();
-  react.useEffect(() => {
+  const modalId = React.useId();
+  React.useEffect(() => {
     if (show) handlePushModal({ id: modalId });
     return () => handlePopModal({ id: modalId });
   }, [show, modalId]);
@@ -160,11 +541,17 @@ function ReadMore({
   displayText,
   className,
   numberOfCharactersToShow = 300,
-  handleCopyDisplayText,
+  showCopy = false,
+  onCopy,
   handleToggleReadMore
 }) {
   const isExpanded = readMore == null ? void 0 : readMore[index];
   const isLong = (displayText == null ? void 0 : displayText.length) > numberOfCharactersToShow;
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    const success = await handleCopyTextToClipboard({ clipboardText: displayText });
+    onCopy == null ? void 0 : onCopy(success);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "p",
     {
@@ -181,32 +568,23 @@ function ReadMore({
             onClick: handleToggleReadMore,
             className: "text-basePurple cursor-pointer font-semibold text-[11px]",
             children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-              handleCopyDisplayText && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+              showCopy && /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: handleCopy, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
                 {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleCopyDisplayText({ displayText });
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      className: "text-gray-500 w-[14px] h-[14px]",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                      ]
-                    }
-                  )
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "text-gray-500 w-[14px] h-[14px]",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  ]
                 }
-              ),
+              ) }),
               " ",
               "...Read Less"
             ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "...Read More" })
@@ -216,8 +594,79 @@ function ReadMore({
     }
   ) });
 }
+function SearchBar({
+  value,
+  placeHolder,
+  wrapperClass,
+  className,
+  searchParamQuery = "",
+  onChange,
+  handleInputKey,
+  handleClearInput
+}) {
+  const showClear = searchParamQuery || value;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        "flex items-center rounded-full justify-between border px-2 bg-white",
+        wrapperClass || ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "text-gray-400 w-[14px] h-[14px] ml-2 shrink-0",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value,
+            placeholder: placeHolder,
+            className: [
+              "w-[95%] focus:outline-none rounded-r-full",
+              "placeholder:text-[13px] text-[13px] py-[8px] px-2",
+              className || ""
+            ].join(" "),
+            onKeyPress: handleInputKey,
+            onChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[20px] shrink-0", children: showClear && handleClearInput && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClearInput, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "w-[16px] h-[16px]",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+}
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = react.useState(() => {
+  const [storedValue, setStoredValue] = React.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -250,14 +699,15 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue, remove];
 }
 
-// src/utils/cn.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
+exports.AutoComplete = AutoComplete;
+exports.ButtonLoader = ButtonLoader;
+exports.CopyId = CopyId;
+exports.CustomAnchor = CustomAnchor;
 exports.Modal = Modal;
 exports.ReadMore = ReadMore;
+exports.SearchBar = SearchBar;
 exports.cn = cn;
+exports.handleCopyTextToClipboard = handleCopyTextToClipboard;
 exports.useLocalStorage = useLocalStorage;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map