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

React component library

import { jsx as n } from "react/jsx-runtime";
import { forwardRef as R, isValidElement as S } from "react";
import { s as $ } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as B, c as t, e as l, f as k, i as f, b as V } from "./utils-BUdHa0nB.js";
import { u as I } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const y = (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: ${l(e.theme, e.size)};
        max-width: ${l(e.theme, e.size)};
    `, j = $.i`
  font-size: 1.125rem;
`, v = $.button`
  ${(e) => y(e)}

  ${(e) => B(
  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) => l(e.theme, e.size)};
  max-height: ${(e) => l(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 && k(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",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  e.color,
  "disabled",
  "text"
)};
  }
`, D = $.button`
  ${(e) => y(e)}

  ${(e) => B(
  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) => l(e.theme, e.size)};
  max-height: ${(e) => l(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 && k(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",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  e.color,
  "disabled",
  "text"
)};
  }
`, T = $.button`
  ${(e) => y(e)}

  ${(e) => B(
  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) => l(e.theme, e.size)};
  max-height: ${(e) => l(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 && k(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",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
  }
`, U = $(T)`
  border: 1px solid
    ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "enabled",
  "border",
  "borderOpacity"
)};
`, H = R((e, d) => {
  const {
    icon: g = null,
    iconStyle: z = "solid",
    borderRadius: O = "regular",
    btnType: c = "filled",
    disabled: F = !1,
    //----------------
    onFocus: i = () => {
    },
    onBlur: u = () => {
    },
    onClick: r = () => {
    },
    onKeyDown: b = () => {
    },
    //----------------
    size: x = "small",
    color: a = "primary",
    className: m = "",
    style: N = {},
    ...s
  } = e, o = {
    theme: I(),
    color: a,
    size: x,
    style: N,
    className: "lnc-ui-icon-button",
    disabled: F,
    borderRadius: O,
    btnType: c
  }, C = () => {
    var w = z === "solid" ? "fas" : "far";
    return `${w} fa-${g} fa-fw`;
  }, h = () => S(g) ? g : /* @__PURE__ */ n(j, { className: C() });
  return c === "filled" ? /* @__PURE__ */ n(
    v,
    {
      ref: d,
      "data-type": "filled",
      ...o,
      className: `${o == null ? void 0 : o.className} ${a}-${c}-lnc-btn ${m}`,
      onFocus: i,
      onBlur: u,
      onClick: r,
      onKeyDown: b,
      type: c,
      ...s,
      children: h()
    }
  ) : c === "tinted" ? /* @__PURE__ */ n(
    D,
    {
      ref: d,
      "data-type": "tinted",
      ...o,
      className: `${o == null ? void 0 : o.className} ${a}-${c}-lnc-btn ${m}`,
      onFocus: i,
      onBlur: u,
      onClick: r,
      onKeyDown: b,
      ...s,
      children: h()
    }
  ) : c === "outline" ? /* @__PURE__ */ n(
    U,
    {
      ref: d,
      "data-type": "outline",
      ...o,
      className: `${o == null ? void 0 : o.className} ${a}-${c}-lnc-btn ${m}`,
      onFocus: i,
      onBlur: u,
      onClick: r,
      onKeyDown: b,
      ...s,
      children: h()
    }
  ) : c === "basic" ? /* @__PURE__ */ n(
    T,
    {
      ref: d,
      "data-type": "basic",
      ...o,
      className: `${o == null ? void 0 : o.className} ${a}-${c}-lnc-btn ${m}`,
      onFocus: i,
      onBlur: u,
      onClick: r,
      onKeyDown: b,
      ...s,
      children: h()
    }
  ) : /* @__PURE__ */ n(
    v,
    {
      ref: d,
      "data-type": "filled",
      size: x,
      ...o,
      className: `${o == null ? void 0 : o.className} ${a}-${c}-lnc-btn ${m}`,
      onFocus: i,
      onBlur: u,
      onClick: r,
      onKeyDown: b,
      ...s,
      children: h()
    }
  );
});
export {
  H as default
};