@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 G, classNames as c, uButton as i, svgIconPropType as J, IconWrap as L } from "@progress/kendo-react-common";
function Q({ imageUrl: a, name: d, iconClass: s, svgIcon: n, imageAlt: u, buttonClasses: r, iconSize: o }) {
  return a ? /* @__PURE__ */ e.createElement(
    "img",
    {
      role: "presentation",
      className: c(i.icon({ c: r })),
      alt: u,
      src: a
    }
  ) : d || n ? /* @__PURE__ */ e.createElement(
    L,
    {
      className: c(i.icon({ c: r })),
      name: d,
      icon: n,
      size: o
    }
  ) : s ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: r }), s) }) : null;
}
const k = e.forwardRef((a, d) => {
  const {
    children: s,
    togglable: n,
    dir: u,
    disabled: r,
    selected: o,
    icon: v,
    iconClass: h,
    svgIcon: y,
    imageUrl: b,
    imageAlt: A,
    className: B,
    startIcon: C,
    endIcon: E,
    onClick: N,
    size: P = g.size,
    rounded: O = g.rounded,
    fillMode: S = g.fillMode,
    themeColor: T = g.themeColor,
    ariaPressed: w,
    iconSize: x,
    ...U
  } = a, H = () => {
    n && o === void 0 && (m.current = !l, R(!l));
  }, K = (p) => {
    H(), N && N.call(void 0, p);
  }, m = e.useRef(void 0), I = e.useRef(null), [l, R] = e.useState(n === !0 && o === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || b !== void 0, j = s !== void 0, q = G(), z = a.unstyled || q, f = z && z.uButton;
  e.useImperativeHandle(d, () => ({
    element: I.current,
    selected: m.current !== void 0 ? m.current : l
  })), e.useMemo(() => {
    n && o !== void 0 && o !== l && R(o);
  }, [n, o]), e.useEffect(() => {
    m.current = void 0;
  }, [l]);
  const D = Q({
    name: v,
    svgIcon: y,
    iconClass: h,
    imageUrl: b,
    imageAlt: A,
    buttonClasses: f,
    iconSize: x
  }), M = (p) => e.cloneElement(p, {
    className: c(i.icon({ c: f }), p.props.className)
  }), F = e.useMemo(() => n ? l : w || void 0, []);
  return /* @__PURE__ */ e.createElement(
    "button",
    {
      ref: I,
      "aria-pressed": F,
      ...U,
      dir: u,
      disabled: r,
      onClick: K,
      className: c(
        i.wrapper({
          c: f,
          isRtl: u === "rtl",
          selected: l,
          disabled: r,
          size: P,
          fillMode: S,
          rounded: O,
          themeColor: T,
          iconButton: !j && W
        }),
        B
      )
    },
    C && M(C),
    D,
    s && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, s),
    E && M(E)
  );
}), g = {
  togglable: !1,
  size: "medium",
  rounded: "medium",
  fillMode: "solid",
  themeColor: "base"
};
k.displayName = "KendoReactButton";
k.propTypes = {
  children: t.node,
  selected: t.bool,
  togglable: t.bool,
  icon: t.string,
  svgIcon: J,
  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 {
  k as Button
};