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