@progress/kendo-react-common/unstyled/buttons.mjs

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { getClassByName as z } from "./interfaces/common.mjs";
import { buttonPrefix as e, elements as u, base as r, states as a, roundedMap as g, themeColorMap as d, fillModeMap as b, sizeMap as f, containers as l, directionMap as C, ddbPrefix as p } from "./json-classes.mjs";
const w = {
  wrapper: {
    main: e,
    size: {
      small: `${e}-${f.small}`,
      medium: `${e}-${f.medium}`,
      large: `${e}-${f.large}`
    },
    fillMode: {
      solid: `${e}-${b.solid}`,
      outline: `${e}-${b.outline}`,
      flat: `${e}-${b.flat}`,
      link: `${e}-${b.link}`,
      clear: `${e}-${b.clear}`
    },
    themeColor: {
      base: `${e}-${d.base}`,
      primary: `${e}-${d.primary}`,
      secondary: `${e}-${d.secondary}`,
      tertiary: `${e}-${d.tertiary}`,
      info: `${e}-${d.info}`,
      success: `${e}-${d.success}`,
      warning: `${e}-${d.warning}`,
      error: `${e}-${d.error}`,
      dark: `${e}-${d.dark}`,
      light: `${e}-${d.light}`,
      inverse: `${e}-${d.inverse}`
    },
    rounded: {
      small: `${r.prefix}-${r.rounded}-${g.small}`,
      medium: `${r.prefix}-${r.rounded}-${g.medium}`,
      large: `${r.prefix}-${r.rounded}-${g.large}`
    },
    iconButton: `${r.prefix}-${u.icon}-${u.button}`,
    disabled: `${r.prefix}-${a.disabled}`,
    selected: `${r.prefix}-${a.selected}`,
    isRtl: `${r.prefix}-${r.rtl}`
  },
  text: `${e}-${u.text}`,
  icon: `${e}-${u.icon}`
}, R = {
  wrapper: (o) => {
    const { isRtl: i, selected: n, disabled: s, size: t, fillMode: x, rounded: c, themeColor: h, iconButton: B, c: y = w } = o, $ = y.wrapper, k = h && $.themeColor ? $.themeColor[h] : void 0;
    return {
      [$.main]: !0,
      [$.size[t]]: t && $.size[t],
      [`${e}-${t}`]: t && !$.size[t],
      [$.fillMode[x]]: x && $.fillMode[x],
      [k]: k,
      [$.rounded[c]]: c && $.rounded[c],
      [`${r.prefix}-${r.rounded}-${c}`]: c && !$.rounded[c],
      [$.iconButton]: B,
      [$.disabled]: s,
      [$.selected]: n,
      [$.isRtl]: i
    };
  },
  text: (o) => {
    const { c: i = w } = o;
    return {
      [i.text]: !0
    };
  },
  icon: (o) => {
    const { c: i = w } = o;
    return {
      [i.icon]: !0
    };
  }
}, M = {
  wrapper: {
    main: `${e}-${l.group}`,
    stretched: `${e}-${l.group}-${a.stretched}`,
    disabled: `${r.prefix}-${a.disabled}`
  },
  position: {
    start: `${r.prefix}-${l.group}-${C.start}`,
    end: `${r.prefix}-${l.group}-${C.end}`
  }
}, G = {
  wrapper: (o) => {
    const { stretched: i, disabled: n, c: s = M } = o, t = s.wrapper;
    return {
      [t.main]: !0,
      [t.stretched]: i,
      [t.disabled]: n
    };
  },
  position: (o) => {
    const { start: i, end: n, c: s = M } = o, t = s.position;
    return {
      [t.start]: i,
      [t.end]: n
    };
  }
}, m = {
  wrapper: {
    main: `${p}-${u.button}`,
    focus: `${r.prefix}-${a.focus}`,
    disabled: `${r.prefix}-${a.disabled}`
  },
  ul: {
    group: `${p}-${l.group}`,
    size: {
      small: `${p}-${l.group}-${f.small}`,
      medium: `${p}-${l.group}-${f.medium}`,
      large: `${p}-${l.group}-${f.large}`
    }
  },
  li: {
    item: `${r.prefix}-${l.item}`,
    focus: `${r.prefix}-${a.focus}`
  },
  item: `${p}-${l.item}`,
  link: {
    main: `${r.prefix}-${u.link}`,
    link: `${p}-${u.link}`,
    selected: `${r.prefix}-${a.selected}`,
    disabled: `${r.prefix}-${a.disabled}`
  },
  popup: `${p}-${l.popup}`
}, P = {
  wrapper: (o) => {
    const { focused: i, disabled: n, c: s = m } = o, t = s.wrapper;
    return {
      [t.main]: !0,
      [t.focus]: i,
      [t.disabled]: n
    };
  },
  ul: (o) => {
    const { size: i, c: n = m } = o, s = n.ul;
    return {
      [s.group]: !0,
      [s.size[i]]: s.size[i],
      [`${p}-${l.group}-${i}`]: i && !s.size[i]
    };
  },
  li: (o) => {
    const { focused: i, c: n = m } = o, s = n.li;
    return {
      [s.item]: !0,
      [s.focus]: i
    };
  },
  item: z(m, "item"),
  link: (o) => {
    const { selected: i, disabled: n, c: s = m } = o, t = s.link;
    return {
      [t.main]: !0,
      [t.link]: !0,
      [t.selected]: i,
      [t.disabled]: n
    };
  },
  popup: z(m, "popup")
};
export {
  R as uButton,
  G as uButtonGroup,
  P as uDropDownButton
};