@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/zalo/modal-add-friend-zalo.js

@@ -0,0 +1,277 @@
+import { useState, useRef } from "react";
+import { toast } from "sonner";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import {
+  addFriendZalo,
+  findUserZalo,
+  sendMessageZalo
+} from "@zenify-omni/chat-js/api/settings/channel.js";
+import { useQueryClient } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const TypeModelAddZalo = {
+  AddFriendDefault: 1,
+  SendMessage: 2,
+  ZaloInfo: 3,
+  AddFriendInChat: 4
+};
+const isAddFriendType = (type) => {
+  return [
+    TypeModelAddZalo.AddFriendDefault,
+    TypeModelAddZalo.AddFriendInChat
+  ].includes(type);
+};
+const useModelAddZalo = ({
+  setPageSelectPop = () => {
+  },
+  ticket,
+  contact,
+  ticketId,
+  onSendMessageSuccess,
+  setLoadingZalo = () => {
+  },
+  setLoadingSendMess = () => {
+  },
+  onFindUserFinished = () => {
+  },
+  onSubmitFinished = () => {
+  },
+  isCheckAddFriendOnFindUser = true
+}) => {
+  const user = getUser();
+  const queryClient = useQueryClient();
+  const handleFindUserZalo = async (phone, type = TypeModelAddZalo.AddFriendDefault, options = {}, showNotify = true) => {
+    const {
+      isCheckFriendly = false,
+      personal_zalo_id,
+      sendFromPage,
+      zalosAllocated,
+      _openModalAddFriend = false,
+      _pzaloType = null
+    } = options;
+    setLoadingZalo(true);
+    try {
+      if (!phone && type !== TypeModelAddZalo.AddFriendInChat) {
+        setLoadingZalo(false);
+        if (showNotify) {
+          toast.error(
+            i18n.t("customer:message.invalidZaloPhone", {
+              defaultValue: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i Zalo kh\xF4ng h\u1EE3p l\u1EC7"
+            })
+          );
+        }
+        return;
+      }
+      const payloadFindUserZalo = {
+        user_id: user._id
+      };
+      if (type === TypeModelAddZalo.AddFriendInChat) {
+        payloadFindUserZalo.zalo_customer_id = personal_zalo_id;
+        payloadFindUserZalo.page_id = ticket.source_id;
+      } else {
+        payloadFindUserZalo.phone = phone;
+        payloadFindUserZalo.page_id = sendFromPage;
+      }
+      console.log("payloadFindUserZalo", payloadFindUserZalo);
+      const userZalo = await findUserZalo(payloadFindUserZalo);
+      if (userZalo) {
+        const name = userZalo?.data?.data?.me?.displayName;
+        let zalo_data = userZalo?.data?.data?.user;
+        setLoadingZalo(false);
+        if (type === TypeModelAddZalo.SendMessage) {
+          isCheckAddFriendOnFindUser = false;
+        }
+        if (isCheckAddFriendOnFindUser || isCheckFriendly) {
+          if (zalo_data?.isFr === 1) {
+            return toast.error(
+              i18n.t("customer:message.alreadyFriend", {
+                defaultValue: "User \u0111\xE3 l\xE0 b\u1EA1n b\xE8"
+              })
+            );
+          }
+          if (isAddFriendType(type) && userZalo?.data?.data?.is_friend_request_sent) {
+            return toast.error(
+              i18n.t("customer:message.friendRequestAlreadySent", {
+                defaultValue: "L\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c g\u1EEDi tr\u01B0\u1EDBc \u0111\xF3"
+              })
+            );
+          }
+        }
+        const data = {
+          zalo_data: {
+            ...zalo_data,
+            is_friend_request_sent: userZalo?.data?.data?.is_friend_request_sent
+          },
+          modal_type: type || TypeModelAddZalo.AddFriendDefault,
+          phone,
+          sendFromPage,
+          zalosAllocated,
+          defaultMessage: isAddFriendType(type) ? i18n.t("customer:message.friendRequestGreeting", {
+            name,
+            defaultValue: "Xin ch\xE0o, m\xECnh l\xE0 {name}. K\u1EBFt b\u1EA1n v\u1EDBi m\xECnh nh\xE9"
+          }) : ``,
+          _pzaloType
+        };
+        setZaloPop(data);
+        setPageSelectPop(null);
+        onFindUserFinished(true, data, { _openModalAddFriend });
+      } else {
+        setLoadingZalo(false);
+        onFindUserFinished(false, null, { _openModalAddFriend });
+        if (showNotify) {
+          toast.error(
+            i18n.t("customer:message.zaloUserNotFound", {
+              defaultValue: "Kh\xF4ng t\xECm th\u1EA5y ng\u01B0\u1EDDi d\xF9ng Zalo v\u1EDBi s\u1ED1 \u0111i\u1EC7n tho\u1EA1i n\xE0y"
+            })
+          );
+        }
+      }
+    } catch (error) {
+      setLoadingZalo(false);
+      toast.error(
+        error?.response?.data?.error?.message || i18n.t("common:toast.errorOccurred", {
+          defaultValue: "\u0110\xE3 x\u1EA3y ra l\u1ED7i"
+        })
+      );
+    }
+  };
+  const textareaRef = useRef(null);
+  const getAllZaloLocate = () => {
+    if ([
+      TypeModelAddZalo.AddFriendDefault,
+      TypeModelAddZalo.AddFriendInChat
+    ].includes(zaloPop.modal_type)) {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_ZALOS_ALLOCATED]
+      });
+    }
+  };
+  const handleSubmit = async () => {
+    setLoadingSendMess(true);
+    try {
+      const user2 = getUser();
+      const user_id = user2._id;
+      const phone = zaloPop.phone;
+      const sendFromPage = zaloPop.sendFromPage;
+      const valueMessage = textareaRef.current?.value;
+      const message = valueMessage || zaloPop.defaultMessage;
+      if (!valueMessage?.trim()) {
+        setLoadingSendMess(false);
+        return toast.error(
+          i18n.t("customer:message.messageRequired", {
+            defaultValue: "Tin nh\u1EAFn kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+          })
+        );
+      }
+      const fn = [
+        TypeModelAddZalo.AddFriendDefault,
+        TypeModelAddZalo.AddFriendInChat
+      ].includes(zaloPop.modal_type) ? addFriendZalo : sendMessageZalo;
+      const successMessage = [
+        TypeModelAddZalo.AddFriendDefault,
+        TypeModelAddZalo.AddFriendInChat
+      ].includes(zaloPop.modal_type) ? i18n.t("chat:toast.sendZaloFriendRequestSuccess", {
+        defaultValue: "\u0110\xE3 g\u1EEDi l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n Zalo th\xE0nh c\xF4ng"
+      }) : i18n.t("chat:toast.sendZaloMessageSuccess", {
+        defaultValue: "\u0110\xE3 g\u1EEDi tin nh\u1EAFn Zalo th\xE0nh c\xF4ng"
+      });
+      const errorMessage = [
+        TypeModelAddZalo.AddFriendDefault,
+        TypeModelAddZalo.AddFriendInChat
+      ].includes(zaloPop.modal_type) ? i18n.t("chat:label.anErrorOccurredPleaseDouble", {
+        defaultValue: "C\xF3 l\u1ED7i x\u1EA3y ra, h\xE3y ki\u1EC3m tra l\u1EA1i th\xF4ng tin zalo"
+      }) : i18n.t("chat:toast.sendZaloMessageFail", {
+        defaultValue: "Kh\xF4ng th\u1EC3 g\u1EEDi tin nh\u1EAFn Zalo, h\xE3y ki\u1EC3m tra l\u1EA1i th\xF4ng tin zalo"
+      });
+      const payload = {
+        user_id,
+        first_message: message?.trim()
+      };
+      if (zaloPop.modal_type === TypeModelAddZalo.AddFriendInChat) {
+        payload.customer_id = contact?._id;
+        payload.zalo_user_id = contact?.personal_zalo_ids?.[0] || zaloPop?.zalo_data?.uid || zaloPop?.zalo_data?.userId;
+        payload.page_id = ticket.source_id;
+      } else {
+        payload.old_ticket_id = ticketId;
+        payload.phone = phone;
+      }
+      if ([
+        TypeModelAddZalo.SendMessage,
+        TypeModelAddZalo.AddFriendDefault
+      ].includes(zaloPop.modal_type)) {
+        payload.page_id = sendFromPage;
+      }
+      const data = await fn(payload);
+      setZaloPop(false);
+      onSubmitFinished(true, data);
+      if (data) {
+        setLoadingSendMess(false);
+        getAllZaloLocate();
+        toast.success(successMessage);
+        if (onSendMessageSuccess && zaloPop.modal_type !== 1) {
+          if (!data?.data?.data?.is_hidden) {
+            onSendMessageSuccess(
+              data?.data?.data?.msgId,
+              data?.data?.data?.source_id
+            );
+          }
+        } else {
+          queryClient.invalidateQueries({
+            queryKey: [QUERY_KEY.GET_TICKET_COMMENTS]
+          });
+        }
+      } else {
+        setLoadingSendMess(false);
+        toast.error(errorMessage);
+      }
+    } catch (error) {
+      getAllZaloLocate();
+      onSubmitFinished(true, null);
+      setLoadingSendMess(false);
+      toast.error(
+        error.response?.data?.error?.message || i18n.t("chat:label.anErrorOccurredPleaseDouble", {
+          defaultValue: "C\xF3 l\u1ED7i x\u1EA3y ra, h\xE3y ki\u1EC3m tra l\u1EA1i th\xF4ng tin zalo"
+        })
+      );
+    }
+  };
+  const [zaloPop, setZaloPop] = useState(false);
+  const getTitleButon = (type) => {
+    switch (type) {
+      case TypeModelAddZalo.AddFriendDefault:
+      case TypeModelAddZalo.AddFriendInChat:
+        return "K\u1EBFt b\u1EA1n";
+      case TypeModelAddZalo.SendMessage:
+        return "G\u1EEDi tin nh\u1EAFn";
+      default:
+        return "";
+    }
+  };
+  const getTitle = (type) => {
+    switch (type) {
+      case TypeModelAddZalo.AddFriendDefault:
+      case TypeModelAddZalo.AddFriendInChat:
+        return "G\u1EEDi k\u1EBFt b\u1EA1n Zalo";
+      case TypeModelAddZalo.SendMessage:
+        return "G\u1EEDi tin nh\u1EAFn Zalo";
+      case TypeModelAddZalo.ZaloInfo:
+        return "Th\xF4ng tin Zalo";
+      default:
+        return "";
+    }
+  };
+  return {
+    handleFindUserZalo,
+    zaloPop,
+    setZaloPop,
+    textareaRef,
+    handleSubmit,
+    getTitle,
+    getTitleButon
+  };
+};
+var modal_add_friend_zalo_default = useModelAddZalo;
+export {
+  TypeModelAddZalo,
+  modal_add_friend_zalo_default as default
+};

package/components/custom/SafeHTML.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import DOMPurify from "dompurify";
+import { useRef, useEffect } from "react";
+import { applyZaloEmojiStyles } from "../../utils/replaceZaloSprite.js";
+function isVisiblyEmpty(html = "") {
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+  return temp.children.length === 0 && !temp.textContent?.trim();
+}
+function SafeHTML({
+  html,
+  className,
+  isReply,
+  /** Allow inline `style` (e.g. Zalo RTF colors) — only pass for trusted server/FE-generated HTML */
+  allowStyledRtf = false
+}) {
+  const ref = useRef(null);
+  const original = typeof html === "string" ? html.replace(/\r\n?/g, "\n").trim() : "";
+  const sanitized = allowStyledRtf ? DOMPurify.sanitize(original, { ADD_ATTR: ["style", "target"] }) : DOMPurify.sanitize(original, { ADD_ATTR: ["target"] });
+  const shouldFallback = !sanitized || isVisiblyEmpty(sanitized);
+  useEffect(() => {
+    applyZaloEmojiStyles(ref.current);
+  }, [sanitized]);
+  return shouldFallback ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("w-full break-words py-2", className),
+      style: { whiteSpace: !isReply && "pre-wrap" },
+      children: original
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("w-full break-words py-2", className),
+      style: { whiteSpace: !isReply && "pre-wrap" },
+      dangerouslySetInnerHTML: { __html: sanitized }
+    }
+  );
+}
+export {
+  SafeHTML as default
+};

package/components/custom/audio-player.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Slider } from "../ui/slider.js";
+import { Button } from "../ui/button.js";
+import { Play, Pause, SkipBack, SkipForward } from "lucide-react";
+function AudioPlayer({ src }) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const audioRef = useRef(null);
+  useEffect(() => {
+    const audio = audioRef.current;
+    audio.addEventListener("loadedmetadata", onLoadedMetadata);
+    audio.addEventListener("timeupdate", onTimeUpdate);
+    audio.addEventListener("ended", onEnded);
+    return () => {
+      audio.removeEventListener("loadedmetadata", onLoadedMetadata);
+      audio.removeEventListener("timeupdate", onTimeUpdate);
+      audio.removeEventListener("ended", onEnded);
+    };
+  }, []);
+  const onLoadedMetadata = () => {
+    setDuration(audioRef.current.duration);
+  };
+  const onTimeUpdate = () => {
+    setCurrentTime(audioRef.current.currentTime);
+  };
+  const onEnded = () => {
+    setIsPlaying(false);
+    setCurrentTime(0);
+  };
+  const togglePlayPause = () => {
+    if (isPlaying) {
+      audioRef.current.pause();
+    } else {
+      audioRef.current.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+  const onSliderChange = (value) => {
+    const time = value[0];
+    audioRef.current.currentTime = time;
+    setCurrentTime(time);
+  };
+  const skipBackward = () => {
+    audioRef.current.currentTime -= 10;
+  };
+  const skipForward = () => {
+    audioRef.current.currentTime += 10;
+  };
+  const formatTime = (time) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full rounded-lg bg-card p-4 shadow-md", children: [
+    /* @__PURE__ */ jsx("audio", { ref: audioRef, src }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex justify-between text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
+      /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value: [currentTime],
+        max: duration,
+        step: 0.1,
+        onValueChange: onSliderChange,
+        className: "w-full"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: skipBackward, children: /* @__PURE__ */ jsx(SkipBack, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", onClick: togglePlayPause, children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: skipForward, children: /* @__PURE__ */ jsx(SkipForward, { className: "h-4 w-4" }) })
+    ] })
+  ] });
+}
+export {
+  AudioPlayer
+};

package/components/custom/avatar.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/utils.js";
+import { Edit } from "lucide-react";
+const _failedAvatarSrcs = /* @__PURE__ */ new Set();
+function normalizeAvatarUrl(src) {
+  if (!src) return src;
+  try {
+    const url = new URL(src);
+    url.searchParams.delete("_r");
+    return url.toString();
+  } catch {
+    return src;
+  }
+}
+const Avatar = React.forwardRef(
+  ({ className, statusColor, edit, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(
+          "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+          className
+        ),
+        ...props
+      }
+    ),
+    statusColor && !edit && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-card",
+          statusColor || "bg-muted-foreground"
+        )
+      }
+    ),
+    edit && /* @__PURE__ */ jsx(
+      Edit,
+      {
+        className: cn("absolute bottom-1 right-1 h-3 w-3", statusColor)
+      }
+    )
+  ] })
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(
+  ({ className, src, onLoadingStatusChange, ...props }, ref) => {
+    const normalized = normalizeAvatarUrl(src);
+    const effectiveSrc = _failedAvatarSrcs.has(normalized) ? void 0 : src;
+    return /* @__PURE__ */ jsx(
+      AvatarPrimitive.Image,
+      {
+        ref,
+        className: cn("aspect-square h-full w-full", className),
+        src: effectiveSrc,
+        onLoadingStatusChange: (status) => {
+          if (status === "error" && normalized) _failedAvatarSrcs.add(normalized);
+          onLoadingStatusChange?.(status);
+        },
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full border-2 border-card bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+const generateAvatarFallback = (name) => {
+  if (!name) return "";
+  const words = name.trim().split(" ");
+  if (words.length === 1) {
+    return words[0].slice(0, 2)?.toUpperCase();
+  }
+  const firstLetter = words[0][0]?.toUpperCase();
+  const lastLetter = words[words.length - 1][0]?.toUpperCase();
+  return firstLetter + lastLetter;
+};
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  generateAvatarFallback
+};

package/components/custom/between-date-picker/index.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import DateTimePicker from "../date-time-picker/index.js";
+import { cn } from "../../../lib/utils.js";
+import { isSameDay } from "date-fns";
+function BetweenDatePicker({
+  value,
+  onChange,
+  disabled,
+  direction = "column",
+  showTimeComponent = true,
+  classNames,
+  size
+}) {
+  const from = value?.from ? new Date(value.from) : void 0;
+  const to = value?.to ? new Date(value.to) : void 0;
+  const isRow = direction === "row";
+  const handleChange = (key, date) => {
+    const next = {
+      ...value || {},
+      [key]: date ? date.toISOString() : null
+    };
+    if (key === "from" && date && next.to && date > new Date(next.to)) {
+      next.to = null;
+    }
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex gap-2", isRow ? "flex-row items-center" : "flex-col"),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(isRow && "flex-1"), children: /* @__PURE__ */ jsx(
+          DateTimePicker,
+          {
+            date: from,
+            onChange: (date) => handleChange("from", date),
+            showTimeComponent,
+            disabled,
+            classNames,
+            size,
+            disabledDate: to ? { after: to } : void 0,
+            disabledHourFunc: (hour) => {
+              if (!to || !from || !isSameDay(from, to)) {
+                return false;
+              }
+              return Number(hour) > to.getHours();
+            },
+            disabledMinuteFunc: (minute) => {
+              if (!to || !from || !isSameDay(from, to)) {
+                return false;
+              }
+              return from.getHours() < to.getHours() ? false : Number(minute) > to.getMinutes();
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: cn(isRow && "flex-1"), children: /* @__PURE__ */ jsx(
+          DateTimePicker,
+          {
+            date: to,
+            onChange: (date) => handleChange("to", date),
+            showTimeComponent,
+            disabled,
+            classNames,
+            size,
+            disabledDate: from ? { before: from } : void 0,
+            disabledHourFunc: (hour) => {
+              if (!from || !to || !isSameDay(to, from)) {
+                return false;
+              }
+              return Number(hour) < from.getHours();
+            },
+            disabledMinuteFunc: (minute) => {
+              if (!from || !to || !isSameDay(to, from)) {
+                return false;
+              }
+              return from.getHours() < to.getHours() ? false : Number(minute) < from.getMinutes();
+            }
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  BetweenDatePicker as default
+};

package/components/custom/button-close.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { forwardRef } from "react";
+import { Button } from "./button.js";
+const ButtonClose = forwardRef(({ onClose, title, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      type: "button",
+      variant: "outlet",
+      onClick: (e) => {
+        onClose?.();
+        props.onClick?.(e);
+      },
+      ...props,
+      className: "border border-muted bg-surface-subtle text-foreground shadow-sm",
+      children: title || i18n.t("common:action.close", {
+        defaultValue: "\u0110\xF3ng"
+      })
+    }
+  );
+});
+ButtonClose.displayName = "ButtonClose";
+var button_close_default = ButtonClose;
+export {
+  button_close_default as default
+};

package/components/custom/button.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { LoaderCircle } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground",
+        success: "bg-success text-primary-foreground shadow hover:bg-success/90",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ["outline-secondary"]: "border border-[hsl(var(--border-secondary))] bg-card text-secondary-foreground shadow-sm hover:bg-accent",
+        ["eye-viewer"]: "border border-[hsl(var(--border-eye-viewer))] bg-card text-[hsl(var(--icon-eye-viewer))] shadow-sm hover:bg-accent",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        action: "bg-card border border-primary text-primary hover:bg-secondary rounded-[5px]"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+        action: "h-[40px] w-[40px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, children, ...props }, ref) => {
+    const { asChild, ...rest } = props;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          className: cn(buttonVariants({ variant, size, className })),
+          ref,
+          ...rest,
+          children
+        }
+      );
+    }
+    const {
+      loading = false,
+      leftSection,
+      rightSection,
+      disabled,
+      ...otherProps
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        disabled: loading || disabled,
+        ref,
+        ...otherProps,
+        children: [
+          (leftSection && loading || !leftSection && !rightSection && loading) && /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 w-4 animate-spin" }),
+          !loading && leftSection && /* @__PURE__ */ jsx("div", { className: "mr-2", children: leftSection }),
+          children,
+          !loading && rightSection && /* @__PURE__ */ jsx("div", { className: "ml-2", children: rightSection }),
+          rightSection && loading && /* @__PURE__ */ jsx(LoaderCircle, { className: "ml-2 w-4 animate-spin" })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};