@lanaco/lnc-react-ui/dist/IconButton.js

React component library

import { jsx as a } from "react/jsx-runtime";
import { forwardRef as I, isValidElement as N } from "react";
import { P as o } from "./index-S5Cd7WrG.js";
import { n as h } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { c as $, b as t, d as n, e as B, h as f, a as V } from "./utils-DtRLzzTZ.js";
import { u as j } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const k = (e) => `
        outline: none;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border: none;
        transition: all 50  ms ease-in;
        cursor: pointer;
        color: ${!e.disabled && "white"};

        border-radius: ${V(
  e.theme,
  e.borderRadius
)};

        min-width: ${n(e.theme, e.size)};
        max-width: ${n(e.theme, e.size)};
    `, D = h.i`
  font-size: 1.125rem;
`, x = h.button`
  ${(e) => k(e)}

  ${(e) => $(
  e.theme,
  "ButtonFilled",
  e.size,
  "enabled"
)};

  background-color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "enabled",
  "background"
)};
  color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "enabled",
  "text"
)};

  min-height: ${(e) => n(e.theme, e.size)};
  max-height: ${(e) => n(e.theme, e.size)};

  &:hover {
    background-color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "hover",
  "background"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "hover",
  "text"
)};
  }

  &:focus {
    background-color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "focus",
  "background"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "focus",
  "text"
)};

    ${(e) => e.disabled === !1 && B(e.theme)};
  }

  &:active {
    background-color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "active",
  "background"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "active",
  "text"
)};
  }

  &:disabled {
    ${(e) => e.disabled === !0 && f(e.theme)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  "gray",
  "disabled",
  "background"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "disabled",
  "text"
)};
  }
`, P = h.button`
  ${(e) => k(e)}

  ${(e) => $(
  e.theme,
  "ButtonTinted",
  e.size,
  "enabled"
)};

  backdrop-filter: blur(48px);
  color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "enabled",
  "text"
)};

  background-color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};

  min-height: ${(e) => n(e.theme, e.size)};
  max-height: ${(e) => n(e.theme, e.size)};

  &:hover {
    background-color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "hover",
  "text"
)};
  }

  &:focus {
    background-color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "focus",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "focus",
  "text"
)};
    ${(e) => e.disabled === !1 && B(e.theme)};
  }

  &:active {
    background-color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => e.disabled !== !0 && t(
  e.theme,
  "ButtonTinted",
  e.color,
  "active",
  "text"
)};
  }
  &:disabled {
    ${(e) => e.disabled === !0 && f(e.theme)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  "gray",
  "disabled",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  "gray",
  "disabled",
  "text"
)};
  }
`, v = h.button`
  ${(e) => k(e)}

  ${(e) => $(
  e.theme,
  "ButtonTinted",
  e.size,
  "enabled"
)};

  color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "enabled",
  "text"
)};

  background-color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};

  min-height: ${(e) => n(e.theme, e.size)};
  max-height: ${(e) => n(e.theme, e.size)};

  &:hover {
    background-color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "hover",
  "text"
)};
  }

  &:focus {
    background-color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "focus",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "hover",
  "text"
)};
    ${(e) => e.disabled === !1 && B(e.theme)};
  }

  &:active {
    background-color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "active",
  "text"
)};
  }

  &:disabled {
    ${(e) => e.disabled === !0 && f(e.theme)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  "gray",
  "disabled",
  "background",
  "backgroundOpacity"
)};
  }
`, K = h(v)`
  border: 1px solid
    ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "enabled",
  "border",
  "borderOpacity"
)};
`, U = I((e, c) => {
  const {
    icon: g = null,
    iconStyle: T = "solid",
    borderRadius: O = "regular",
    btnType: l = "filled",
    disabled: z = !1,
    tabIndex: W = 0,
    //----------------
    onFocus: i = () => {
    },
    onBlur: d = () => {
    },
    onClick: r = () => {
    },
    onKeyDown: u = () => {
    },
    //----------------
    size: y = "small",
    color: F = "primary",
    className: w = "",
    style: C = {},
    ...b
  } = e, s = {
    theme: j(),
    color: F,
    size: y,
    style: C,
    className: "lnc-ui-icon-button " + w,
    disabled: z,
    borderRadius: O,
    btnType: l
  }, R = () => {
    var S = T === "solid" ? "fas" : "far";
    return `${S} fa-${g} fa-fw`;
  }, m = () => N(g) ? g : /* @__PURE__ */ a(D, { className: R() });
  return l === "filled" ? /* @__PURE__ */ a(
    x,
    {
      ref: c,
      "data-type": "filled",
      ...s,
      onFocus: i,
      onBlur: d,
      onClick: r,
      onKeyDown: u,
      type: l,
      ...b,
      children: m()
    }
  ) : l === "tinted" ? /* @__PURE__ */ a(
    P,
    {
      ref: c,
      "data-type": "tinted",
      ...s,
      onFocus: i,
      onBlur: d,
      onClick: r,
      onKeyDown: u,
      ...b,
      children: m()
    }
  ) : l === "outline" ? /* @__PURE__ */ a(
    K,
    {
      ref: c,
      "data-type": "outline",
      ...s,
      onFocus: i,
      onBlur: d,
      onClick: r,
      onKeyDown: u,
      ...b,
      children: m()
    }
  ) : l === "basic" ? /* @__PURE__ */ a(
    v,
    {
      ref: c,
      "data-type": "basic",
      ...s,
      onFocus: i,
      onBlur: d,
      onClick: r,
      onKeyDown: u,
      ...b,
      children: m()
    }
  ) : /* @__PURE__ */ a(
    x,
    {
      ref: c,
      "data-type": "filled",
      size: y,
      ...s,
      onFocus: i,
      onBlur: d,
      onClick: r,
      onKeyDown: u,
      ...b,
      children: m()
    }
  );
});
U.propTypes = {
  icon: o.oneOfType([o.string, o.element]),
  iconStyle: o.oneOf(["regular", "solid"]),
  borderRadius: o.oneOf([
    "slight",
    "regular",
    "edged",
    "curved",
    "none"
  ]),
  /**
   * Different styles
   */
  btnType: o.oneOf(["filled", "tinted", "outline", "basic"]),
  disabled: o.bool,
  tabIndex: o.number,
  //---------------------------------------------------------------
  onBlur: o.func,
  onFocus: o.func,
  onClick: o.func,
  onKeyDown: o.func,
  //---------------------------------------------------------------
  className: o.string,
  style: o.object,
  color: o.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ]),
  size: o.oneOf(["small", "medium", "large"])
};
export {
  U as default
};