@progress/kendo-react-buttons/Button.mjs

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as e from "react";
import t from "prop-types";
import { useUnstyled as q, classNames as c, uButton as i, svgIconPropType as D, IconWrap as F } from "@progress/kendo-react-common";
function G({ imageUrl: a, name: d, iconClass: l, svgIcon: n, imageAlt: u, buttonClasses: s }) {
  return a ? /* @__PURE__ */ e.createElement(
    "img",
    {
      role: "presentation",
      className: c(i.icon({ c: s })),
      alt: u,
      src: a
    }
  ) : d || n ? /* @__PURE__ */ e.createElement(F, { className: c(i.icon({ c: s })), name: d, icon: n }) : l ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: s }), l) }) : null;
}
const M = e.forwardRef((a, d) => {
  const {
    children: l,
    togglable: n,
    dir: u,
    disabled: s,
    selected: r,
    icon: v,
    iconClass: h,
    svgIcon: y,
    imageUrl: b,
    imageAlt: z,
    className: A,
    startIcon: C,
    endIcon: E,
    onClick: N,
    size: O = g.size,
    rounded: T = g.rounded,
    fillMode: w = g.fillMode,
    themeColor: x = g.themeColor,
    ...P
  } = a, S = () => {
    n && r === void 0 && (m.current = !o, R(!o));
  }, U = (p) => {
    S(), N && N.call(void 0, p);
  }, m = e.useRef(void 0), I = e.useRef(null), [o, R] = e.useState(n === !0 && r === !0), H = y !== void 0 || v !== void 0 || h !== void 0 || b !== void 0, K = l !== void 0, W = q(), k = a.unstyled || W, f = k && k.uButton;
  e.useImperativeHandle(d, () => ({
    element: I.current,
    selected: m.current !== void 0 ? m.current : o
  })), e.useMemo(() => {
    n && r !== void 0 && r !== o && R(r);
  }, [n, r]), e.useEffect(() => {
    m.current = void 0;
  }, [o]);
  const j = G({
    name: v,
    svgIcon: y,
    iconClass: h,
    imageUrl: b,
    imageAlt: z,
    buttonClasses: f
  }), B = (p) => e.cloneElement(p, { className: c(i.icon({ c: f }), p.props.className) });
  return /* @__PURE__ */ e.createElement(
    "button",
    {
      ref: I,
      "aria-pressed": n ? o : void 0,
      ...P,
      dir: u,
      disabled: s,
      onClick: U,
      className: c(
        i.wrapper({
          c: f,
          isRtl: u === "rtl",
          selected: o,
          disabled: s,
          size: O,
          fillMode: w,
          rounded: T,
          themeColor: x,
          iconButton: !K && H
        }),
        A
      )
    },
    C && B(C),
    j,
    l && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, l),
    E && B(E)
  );
}), g = {
  togglable: !1,
  size: "medium",
  rounded: "medium",
  fillMode: "solid",
  themeColor: "base"
};
M.displayName = "KendoReactButton";
M.propTypes = {
  children: t.node,
  selected: t.bool,
  togglable: t.bool,
  icon: t.string,
  svgIcon: D,
  iconClass: t.string,
  imageUrl: t.string,
  imageAlt: t.string,
  size: t.oneOf([null, "small", "medium", "large"]),
  rounded: t.oneOf([null, "small", "medium", "large", "full"]),
  fillMode: t.oneOf([null, "flat", "link", "outline", "solid", "clear"]),
  // eslint-disable-next-line max-len
  themeColor: t.oneOf([
    null,
    "base",
    "primary",
    "secondary",
    "tertiary",
    "info",
    "success",
    "warning",
    "error",
    "dark",
    "light",
    "inverse"
  ])
};
export {
  M as Button
};