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

React component library

import { jsx as a, jsxs as W, Fragment as E } from "react/jsx-runtime";
import { forwardRef as K } from "react";
import { i as x } from "./index-vz5mtWGo.js";
import { s as r } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as T, c as t, e as d, i as z, f as v, b as q } from "./utils-BUdHa0nB.js";
import j from "./Icon.js";
import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const y = {
  small: {
    regular: "1rem",
    icon: "0.75rem",
    justIcon: "0.5rem"
  },
  medium: {
    regular: "1.5rem",
    icon: "1rem",
    justIcon: "0.5rem"
  },
  large: {
    regular: "1.5rem",
    icon: "1rem",
    justIcon: "0.5rem"
  }
}, O = (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: ${q(
  e.theme,
  e.borderRadius
)};
        
        padding-left: ${e.hasLeadingIcon ? y[e.size].icon : y[e.size].regular};
        padding-right: ${e.hasTrailingIcon ? y[e.size].icon : y[e.size].regular};
    `, G = r.span`
  padding-right: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
`, H = r.span`
  padding-left: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
`, R = r.button`
  ${(e) => O(e)}

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

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

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

  &:disabled {
    ${(e) => e.disabled === !0 && z(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"
)};
  }

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

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

  &:active {
    background-color: ${(e) => e.disabled === !1 && t(
  e.theme,
  "ButtonFilled",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
    color: ${(e) => e.disabled === !1 && t(
  e.theme,
  "ButtonFilled",
  e.color,
  "active",
  "text"
)};
  }
`, J = r.button`
  ${(e) => O(e)}

  min-height: ${(e) => d(e.theme, e.size)};
  max-height: ${(e) => d(e.theme, e.size)};
  ${(e) => T(
  e.theme,
  "ButtonTinted",
  e.size,
  "enabled"
)};

  backdrop-filter: blur(48px);
  background-color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};

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

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

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

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

    color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  e.color,
  "focus",
  "text"
)};
    ${(e) => e.disabled === !1 && v(e.theme)};
  }

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

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

  &:disabled {
    /* ${(e) => e.disabled === !0 && z(e.theme)};
     */
    color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  e.color,
  "disabled",
  "text"
)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
  }
`, w = r.button`
  ${(e) => O(e)}

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

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

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

  min-height: ${(e) => d(e.theme, e.size)};
  max-height: ${(e) => d(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,
  "focus",
  "text"
)};

    ${(e) => !e.disabled && v(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 && z(e.theme)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
  }
`, M = r(w)`
  border: 1px solid
    ${(e) => t(
  e.theme,
  "ButtonBasic",
  e.color,
  "enabled",
  "border",
  "borderOpacity"
)};
`, te = K((e, u) => {
  const {
    text: I = "",
    iconStyle: F = "solid",
    leadingIcon: N = null,
    trailingIcon: C = null,
    borderRadius: U = "regular",
    btnType: n = "filled",
    disabled: L = !1,
    tabIndex: s = 0,
    //----------------
    onFocus: b,
    onBlur: m,
    onClick: g,
    onKeyDown: h,
    //----------------
    size: f = "small",
    color: c = "primary",
    className: $ = "",
    style: S = {},
    children: V,
    ...B
  } = e, o = {
    theme: A(),
    color: c,
    size: f,
    style: S,
    disabled: L,
    borderRadius: U,
    btnType: n,
    className: "lnc-ui-button "
  }, l = !x(N), i = !x(C), D = !x(I), k = () => /* @__PURE__ */ W(E, { children: [
    l && /* @__PURE__ */ a(G, { size: f, children: /* @__PURE__ */ a(
      j,
      {
        icon: N,
        sizeInUnits: "1.125rem",
        iconStyle: F
      }
    ) }),
    I,
    V,
    i && /* @__PURE__ */ a(H, { size: f, children: /* @__PURE__ */ a(
      j,
      {
        icon: C,
        sizeInUnits: "1.125rem",
        iconStyle: F
      }
    ) })
  ] });
  return n === "filled" ? /* @__PURE__ */ a(
    R,
    {
      ref: u,
      "data-type": "filled",
      ...o,
      className: `${o == null ? void 0 : o.className} ${c}-${n}-lnc-btn ${$}`,
      hasLeadingIcon: l,
      hasTrailingIcon: i,
      onFocus: b,
      onBlur: m,
      onClick: g,
      onKeyDown: h,
      tabIndex: s,
      btnType: n,
      ...B,
      children: k()
    }
  ) : n === "tinted" ? /* @__PURE__ */ a(
    J,
    {
      ref: u,
      "data-type": "tinted",
      ...o,
      className: `${o == null ? void 0 : o.className} ${c}-${n}-lnc-btn ${$}`,
      hasLeadingIcon: l,
      hasTrailingIcon: i,
      onFocus: b,
      onBlur: m,
      onClick: g,
      onKeyDown: h,
      tabIndex: s,
      btnType: n,
      ...B,
      children: k()
    }
  ) : n === "outline" ? /* @__PURE__ */ a(
    M,
    {
      ref: u,
      "data-type": "outline",
      ...o,
      className: `${o == null ? void 0 : o.className} ${c}-${n}-lnc-btn ${$}`,
      hasLeadingIcon: l,
      hasTrailingIcon: i,
      onFocus: b,
      onBlur: m,
      onClick: g,
      onKeyDown: h,
      tabIndex: s,
      btnType: n,
      ...B,
      children: k()
    }
  ) : n === "basic" ? /* @__PURE__ */ a(
    w,
    {
      ref: u,
      "data-type": "basic",
      ...o,
      className: `${o == null ? void 0 : o.className} ${c}-${n}-lnc-btn ${$}`,
      hasLeadingIcon: l,
      hasTrailingIcon: i,
      onFocus: b,
      onBlur: m,
      onClick: g,
      onKeyDown: h,
      tabIndex: s,
      btnType: n,
      ...B,
      children: k()
    }
  ) : /* @__PURE__ */ a(
    R,
    {
      ref: u,
      "data-type": "filled",
      size: f,
      ...o,
      className: `${o == null ? void 0 : o.className} ${c}-${n}-lnc-btn ${$}`,
      hasLeadingIcon: l,
      hasTrailingIcon: i,
      onFocus: b,
      onBlur: m,
      onClick: g,
      onKeyDown: h,
      hasText: D,
      tabIndex: s,
      btnType: n,
      ...B,
      children: k()
    }
  );
});
export {
  te as default
};