@turnkey/react-wallet-kit/dist/components/design/Buttons.mjs

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import '@headlessui/react';
import clsx from 'clsx';
import { Spinner } from './Spinners.mjs';

var _excluded = ["children", "className", "disabled"];
function BaseButton(props) {
  var children = props.children,
    className = props.className,
    disabled = props.disabled,
    buttonProps = _objectWithoutProperties(props, _excluded);
  return jsx("button", _objectSpread2(_objectSpread2({
    className: clsx("cursor-pointer", className),
    disabled: !!disabled
  }, buttonProps), {}, {
    children: children
  }));
}
function IconButton(props) {
  var icon = props.icon,
    onClick = props.onClick,
    disabled = props.disabled,
    loading = props.loading,
    className = props.className,
    spinnerClassName = props.spinnerClassName;
  return jsx(BaseButton, {
    className: clsx("flex items-center justify-center p-2 rounded-full border-none text-icon-text-light dark:text-icon-text-dark bg-icon-background-light dark:bg-icon-background-dark active:outline-2 active:outline-primary-light active:dark:outline-primary-dark", disabled && "opacity-50 cursor-not-allowed", className),
    onClick: onClick,
    disabled: !!disabled,
    children: loading ? jsx("div", {
      className: "flex justify-center items-center",
      children: jsx(Spinner, {
        className: clsx("w-4 h-4", spinnerClassName)
      })
    }) : jsx(FontAwesomeIcon, {
      icon: icon
    })
  });
}
function ActionButton(props) {
  var children = props.children,
    onClick = props.onClick,
    onMouseEnter = props.onMouseEnter,
    onMouseLeave = props.onMouseLeave,
    disabled = props.disabled,
    loading = props.loading,
    loadingText = props.loadingText,
    className = props.className,
    spinnerClassName = props.spinnerClassName;
  return jsx(BaseButton, {
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    disabled: disabled || loading,
    className: clsx("w-full px-4 py-3 rounded-md border border-modal-background-dark/15 dark:border-modal-background-light/15 focus:outline-primary-light focus:dark:outline-primary-dark focus:outline-[1px] focus:outline-offset-0 transition-all duration-300", (disabled || loading) && "opacity-50 cursor-not-allowed", className),
    children: loading ? jsxs("div", {
      className: "flex justify-center space-x-2 items-center text-sm",
      children: [jsx(Spinner, {
        className: clsx("w-4 h-4", spinnerClassName)
      }), loadingText && jsx("span", {
        className: spinnerClassName,
        children: loadingText
      })]
    }) : children
  });
}

export { ActionButton, BaseButton, IconButton };
//# sourceMappingURL=Buttons.mjs.map