@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/IconButton.cjs

@@ -0,0 +1,122 @@
+"use strict";const a=require("react/jsx-runtime"),$=require("react"),o=require("./index-DXnSjbfJ.cjs");;/* empty css                       */const b=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./utils-hdRGTsQ7.cjs"),S=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),m=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: ${t.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
+
+        min-width: ${t.getSizeValueWithUnits(e.theme,e.size)};
+        max-width: ${t.getSizeValueWithUnits(e.theme,e.size)};
+    `,P=b.newStyled.i`
+  font-size: 1.125rem;
+`,B=b.newStyled.button`
+  ${e=>m(e)}
+
+  ${e=>t.getComponentTypographyCss(e.theme,"ButtonFilled",e.size,"enabled")};
+
+  background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"enabled","background")};
+  color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"enabled","text")};
+
+  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
+
+  &:hover {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","background")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","text")};
+  }
+
+  &:focus {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","background")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","text")};
+
+    ${e=>e.disabled===!1&&t.getOutlineCss(e.theme)};
+  }
+
+  &:active {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","background")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","text")};
+  }
+
+  &:disabled {
+    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
+    cursor: default;
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled","gray","disabled","background")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","text")};
+  }
+`,w=b.newStyled.button`
+  ${e=>m(e)}
+
+  ${e=>t.getComponentTypographyCss(e.theme,"ButtonTinted",e.size,"enabled")};
+
+  backdrop-filter: blur(48px);
+  color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"enabled","text")};
+
+  background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"enabled","background","backgroundOpacity")};
+
+  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
+
+  &:hover {
+    background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"hover","background","backgroundOpacity")};
+    color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"hover","text")};
+  }
+
+  &:focus {
+    background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"focus","background","backgroundOpacity")};
+    color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"focus","text")};
+    ${e=>e.disabled===!1&&t.getOutlineCss(e.theme)};
+  }
+
+  &:active {
+    background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"active","background","backgroundOpacity")};
+    color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"active","text")};
+  }
+  &:disabled {
+    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
+    cursor: default;
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","background","backgroundOpacity")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","text")};
+  }
+`,C=b.newStyled.button`
+  ${e=>m(e)}
+
+  ${e=>t.getComponentTypographyCss(e.theme,"ButtonTinted",e.size,"enabled")};
+
+  color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","text")};
+
+  background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","background","backgroundOpacity")};
+
+  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
+
+  &:hover {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"hover","background","backgroundOpacity")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"hover","text")};
+  }
+
+  &:focus {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"focus","background","backgroundOpacity")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"hover","text")};
+    ${e=>e.disabled===!1&&t.getOutlineCss(e.theme)};
+  }
+
+  &:active {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"active","background","backgroundOpacity")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"active","text")};
+  }
+
+  &:disabled {
+    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
+    cursor: default;
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic","gray","disabled","background","backgroundOpacity")};
+  }
+`,F=b.newStyled(C)`
+  border: 1px solid
+    ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
+`,f=$.forwardRef((e,n)=>{const{icon:h=null,iconStyle:k="solid",borderRadius:V="regular",btnType:l="filled",disabled:R=!1,tabIndex:j=0,onFocus:r=()=>{},onBlur:i=()=>{},onClick:c=()=>{},onKeyDown:u=()=>{},size:y="small",color:T="primary",className:x="",style:z={},...d}=e,g={theme:S.useTheme(),color:T,size:y,style:z,className:"lnc-ui-icon-button "+x,disabled:R,borderRadius:V,btnType:l},v=()=>{var O=k==="solid"?"fas":"far";return`${O} fa-${h} fa-fw`},s=()=>$.isValidElement(h)?h:a.jsx(P,{className:v()});return l==="filled"?a.jsx(B,{ref:n,"data-type":"filled",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,type:l,...d,children:s()}):l==="tinted"?a.jsx(w,{ref:n,"data-type":"tinted",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()}):l==="outline"?a.jsx(F,{ref:n,"data-type":"outline",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()}):l==="basic"?a.jsx(C,{ref:n,"data-type":"basic",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()}):a.jsx(B,{ref:n,"data-type":"filled",size:y,...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()})});f.propTypes={icon:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),iconStyle:o.PropTypes.oneOf(["regular","solid"]),borderRadius:o.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:o.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:o.PropTypes.bool,tabIndex:o.PropTypes.number,onBlur:o.PropTypes.func,onFocus:o.PropTypes.func,onClick:o.PropTypes.func,onKeyDown:o.PropTypes.func,className:o.PropTypes.string,style:o.PropTypes.object,color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:o.PropTypes.oneOf(["small","medium","large"])};module.exports=f;

package/dist/IconButton.js

@@ -0,0 +1,481 @@
+import { jsx as l } from "react/jsx-runtime";
+import x from "react";
+import { P as o } from "./index-Ds9PUTwb.js";
+/* empty css                     */
+import { n as h } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { a as $, b as t, f as n, h as f, g as B, c as N } from "./utils-DEke8iwo.js";
+import { u as V } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.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: ${N(
+  e.theme,
+  e.borderRadius
+)};
+
+        min-width: ${n(e.theme, e.size)};
+        max-width: ${n(e.theme, e.size)};
+    `, j = h.i`
+  font-size: 1.125rem;
+`, v = 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 && f(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 && B(e.theme)};
+    cursor: default;
+    background-color: ${(e) => t(
+  e.theme,
+  "ButtonFilled",
+  "gray",
+  "disabled",
+  "background"
+)};
+    color: ${(e) => t(
+  e.theme,
+  "ButtonFilled",
+  e.color,
+  "disabled",
+  "text"
+)};
+  }
+`, D = 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 && f(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 && B(e.theme)};
+    cursor: default;
+    background-color: ${(e) => t(
+  e.theme,
+  "ButtonTinted",
+  "gray",
+  "disabled",
+  "background",
+  "backgroundOpacity"
+)};
+    color: ${(e) => t(
+  e.theme,
+  "ButtonTinted",
+  "gray",
+  "disabled",
+  "text"
+)};
+  }
+`, T = 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 && f(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 && B(e.theme)};
+    cursor: default;
+    background-color: ${(e) => t(
+  e.theme,
+  "ButtonBasic",
+  "gray",
+  "disabled",
+  "background",
+  "backgroundOpacity"
+)};
+  }
+`, P = h(T)`
+  border: 1px solid
+    ${(e) => t(
+  e.theme,
+  "ButtonBasic",
+  e.color,
+  "enabled",
+  "border",
+  "borderOpacity"
+)};
+`, K = x.forwardRef((e, c) => {
+  const {
+    icon: g = null,
+    iconStyle: O = "solid",
+    borderRadius: z = "regular",
+    btnType: a = "filled",
+    disabled: F = !1,
+    tabIndex: U = 0,
+    //----------------
+    onFocus: i = () => {
+    },
+    onBlur: d = () => {
+    },
+    onClick: r = () => {
+    },
+    onKeyDown: u = () => {
+    },
+    //----------------
+    size: y = "small",
+    color: w = "primary",
+    className: C = "",
+    style: R = {},
+    ...b
+  } = e, s = {
+    theme: V(),
+    color: w,
+    size: y,
+    style: R,
+    className: "lnc-ui-icon-button " + C,
+    disabled: F,
+    borderRadius: z,
+    btnType: a
+  }, S = () => {
+    var I = O === "solid" ? "fas" : "far";
+    return `${I} fa-${g} fa-fw`;
+  }, m = () => x.isValidElement(g) ? g : /* @__PURE__ */ l(j, { className: S() });
+  return a === "filled" ? /* @__PURE__ */ l(
+    v,
+    {
+      ref: c,
+      "data-type": "filled",
+      ...s,
+      onFocus: i,
+      onBlur: d,
+      onClick: r,
+      onKeyDown: u,
+      type: a,
+      ...b,
+      children: m()
+    }
+  ) : a === "tinted" ? /* @__PURE__ */ l(
+    D,
+    {
+      ref: c,
+      "data-type": "tinted",
+      ...s,
+      onFocus: i,
+      onBlur: d,
+      onClick: r,
+      onKeyDown: u,
+      ...b,
+      children: m()
+    }
+  ) : a === "outline" ? /* @__PURE__ */ l(
+    P,
+    {
+      ref: c,
+      "data-type": "outline",
+      ...s,
+      onFocus: i,
+      onBlur: d,
+      onClick: r,
+      onKeyDown: u,
+      ...b,
+      children: m()
+    }
+  ) : a === "basic" ? /* @__PURE__ */ l(
+    T,
+    {
+      ref: c,
+      "data-type": "basic",
+      ...s,
+      onFocus: i,
+      onBlur: d,
+      onClick: r,
+      onKeyDown: u,
+      ...b,
+      children: m()
+    }
+  ) : /* @__PURE__ */ l(
+    v,
+    {
+      ref: c,
+      "data-type": "filled",
+      size: y,
+      ...s,
+      onFocus: i,
+      onBlur: d,
+      onClick: r,
+      onKeyDown: u,
+      ...b,
+      children: m()
+    }
+  );
+});
+K.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 {
+  K as default
+};