@cometchat/chat-uikit-react/dist/chunk-KOCEARYG.js

Ready-to-use Chat UI Components for React

import './index.css';
import React2, { createContext, forwardRef, useMemo, useContext } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

var CometChatButtonContext = createContext(null);
function useCometChatButtonContext() {
  const ctx = useContext(CometChatButtonContext);
  if (!ctx) {
    throw new Error("useCometChatButtonContext must be used within <CometChatButton.Root>");
  }
  return ctx;
}
var CometChatButtonRoot = forwardRef(
  ({
    variant = "primary",
    size = "md",
    isLoading = false,
    loadingLabel,
    hoverText,
    disabled = false,
    children,
    className,
    type = "button",
    title,
    ...rest
  }, ref) => {
    const isDisabled = disabled || isLoading;
    const resolvedTitle = hoverText ?? title;
    const ctxValue = useMemo(
      () => ({ variant, size, isLoading, disabled: isDisabled }),
      [variant, size, isLoading, isDisabled]
    );
    const baseClass = "cometchat-button";
    const variantClass = `cometchat-button--${variant}`;
    const sizeClass = `cometchat-button--${size}`;
    const loadingClass = isLoading ? "cometchat-button--loading" : "";
    const disabledClass = isDisabled ? "cometchat-button--disabled" : "";
    const classes = [baseClass, variantClass, sizeClass, loadingClass, disabledClass, className].filter(Boolean).join(" ");
    return /* @__PURE__ */ jsx(CometChatButtonContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
      "button",
      {
        ref,
        type,
        className: classes,
        disabled: isDisabled,
        title: resolvedTitle,
        "aria-disabled": isDisabled || void 0,
        "aria-busy": isLoading || void 0,
        "aria-label": isLoading ? loadingLabel : void 0,
        ...rest,
        children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("span", { className: "cometchat-button__spinner", "aria-hidden": "true" }),
          /* @__PURE__ */ jsx("span", { className: "cometchat-button__content--hidden", children })
        ] }) : children
      }
    ) });
  }
);
CometChatButtonRoot.displayName = "CometChatButtonRoot";
var CometChatButtonIcon = ({
  children,
  className
}) => {
  const { size } = useCometChatButtonContext();
  const baseClass = "cometchat-button__icon";
  const sizeClass = `cometchat-button__icon--${size}`;
  const classes = [baseClass, sizeClass, className].filter(Boolean).join(" ");
  return /* @__PURE__ */ jsx("span", { className: classes, children });
};
var CometChatButtonText = ({
  children,
  className
}) => {
  const baseClass = "cometchat-button__text";
  const classes = className ? `${baseClass} ${className}` : baseClass;
  return /* @__PURE__ */ jsx("span", { className: classes, children });
};
var CometChatButtonComponent = React2.forwardRef(
  ({ icon, text, ...rootProps }, ref) => {
    return /* @__PURE__ */ jsxs(CometChatButtonRoot, { ref, ...rootProps, children: [
      icon && /* @__PURE__ */ jsx(CometChatButtonIcon, { children: icon }),
      text && /* @__PURE__ */ jsx(CometChatButtonText, { children: text })
    ] });
  }
);
CometChatButtonComponent.displayName = "CometChatButton";
var CometChatButton = Object.assign(CometChatButtonComponent, {
  Root: CometChatButtonRoot,
  Icon: CometChatButtonIcon,
  Text: CometChatButtonText
});

export { CometChatButton, useCometChatButtonContext };