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

React component library

import { jsx as i, jsxs as K, Fragment as W } from "react/jsx-runtime";
import { forwardRef as E } from "react";
import { P as o } from "./index-S5Cd7WrG.js";
import { i as y } from "./index-BlxaTV-D.js";
import { n as r } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { c as x, b as t, d as c, h as T, e as z, a as q } from "./utils-DtRLzzTZ.js";
import j from "./Icon.js";
import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const k = {
  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"
  }
}, I = (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 ? k[e.size].icon : k[e.size].regular};
        padding-right: ${e.hasTrailingIcon ? k[e.size].icon : k[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"};
`, w = r.button`
  ${(e) => I(e)}

  ${(e) => x(
  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) => c(e.theme, e.size)};
  max-height: ${(e) => c(e.theme, e.size)};

  &:disabled {
    ${(e) => e.disabled === !0 && T(e.theme)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonFilled",
  "gray",
  "disabled",
  "background"
)};
    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"
)};
    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"
)};
    color: ${(e) => e.disabled === !1 && t(
  e.theme,
  "ButtonFilled",
  e.color,
  "focus",
  "text"
)};
    ${(e) => !e.disabled && z(e.theme)};
  }

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

  min-height: ${(e) => c(e.theme, e.size)};
  max-height: ${(e) => c(e.theme, e.size)};
  ${(e) => x(
  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 && z(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 && T(e.theme)};
    cursor: default;
    background-color: ${(e) => t(
  e.theme,
  "ButtonTinted",
  "gray",
  "disabled",
  "background"
)};
  }
`, R = r.button`
  ${(e) => I(e)}

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