@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/Button.js

@@ -0,0 +1,542 @@
+import { jsx as i, jsxs as K, Fragment as W } from "react/jsx-runtime";
+import _ from "react";
+import { P as o } from "./index-Ds9PUTwb.js";
+/* empty css                     */
+import { i as y } from "./index-Cdkz-XH-.js";
+import { n as r } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { a as x, b as t, f as c, g as T, h as z, c as E } from "./utils-DEke8iwo.js";
+import j from "./Icon.js";
+import { u as q } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.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: ${E(
+  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};
+    `, A = r.span`
+  padding-right: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
+`, G = 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"
+)};
+  }
+`, H = 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"
+)};
+  }
+`, J = r(R)`
+  border: 1px solid
+    ${(e) => t(
+  e.theme,
+  "ButtonBasic",
+  e.color,
+  "enabled",
+  "border",
+  "borderOpacity"
+)};
+`, M = _.forwardRef((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: Q,
+    onTrailingIconClick: X,
+    //----------------
+    size: B = "small",
+    color: U = "primary",
+    className: D = "",
+    style: N = {},
+    children: P,
+    ...h
+  } = e, f = {
+    theme: q(),
+    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(A, { size: B, children: /* @__PURE__ */ i(
+      j,
+      {
+        icon: F,
+        sizeInUnits: "1.125rem",
+        iconStyle: O
+      }
+    ) }),
+    v,
+    P,
+    l && /* @__PURE__ */ i(G, { 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(
+    H,
+    {
+      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(
+    J,
+    {
+      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: $()
+    }
+  );
+});
+M.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 {
+  M as default
+};

package/dist/ButtonGroup.cjs

@@ -0,0 +1,44 @@
+"use strict";const i=require("react/jsx-runtime");require("react");const a=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./index-DXnSjbfJ.cjs"),o=require("./utils-hdRGTsQ7.cjs"),b=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),s=a.newStyled.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  width: fit-content;
+  border-radius: ${e=>e.borderRadius};
+
+  & button {
+    border: none;
+    border-top: ${e=>"0.0625rem solid "+o.getColorRgbaValue(e.theme,"ButtonGroup",e.color,"enabled","border")};
+
+    border-bottom: ${e=>"0.0625rem  solid "+o.getColorRgbaValue(e.theme,"ButtonGroup",e.color,"enabled","border")};
+  }
+
+  & button:focus {
+    outline: none;
+  }
+
+  & button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+  }
+
+  & button[data-type="filled"],
+  button[data-type="tinted"] {
+    border: none;
+  }
+
+  & button:first-of-type {
+    border-radius: ${e=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
+    border-left: ${e=>"0.0625rem solid "+o.getColorRgbaValue(e.theme,"ButtonGroup",e.color,"enabled","border")};
+  }
+
+  & button:last-of-type {
+    border-radius: ${e=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
+    border-right: ${e=>"0.0625rem solid "+o.getColorRgbaValue(e.theme,"ButtonGroup",e.color,"enabled","border")};
+  }
+
+  & button:first-of-type:not([data-type="filled"]) {
+    border-right: ${e=>"0.0625rem solid "+o.getColorRgbaValue(e.theme,"ButtonGroup",e.color,"enabled","border")};
+  }
+
+  & button:not(:first-of-type):not(:last-of-type):not([data-type="filled"]) {
+    border-right: ${e=>"0.0625rem solid "+o.getColorRgbaValue(e.theme,"ButtonGroup",e.color,"enabled","border")};
+  }
+`,d=({children:e,borderRadius:n="regular",style:u={},className:l=""})=>{const r=b.useTheme();return i.jsx(s,{borderRadius:o.getBorderRadiusValueWithUnits(r,n),theme:r,style:u,className:"lnc-ui-button-group "+l,children:e})};d.propTypes={borderRadius:t.PropTypes.oneOf(["slight","regular","edged","curved","none"]),className:t.PropTypes.string,style:t.PropTypes.object};module.exports=d;

package/dist/ButtonGroup.js

@@ -0,0 +1,112 @@
+import { jsx as u } from "react/jsx-runtime";
+import "react";
+import { n as i } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { b as o, c as b } from "./utils-DEke8iwo.js";
+import { u as l } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const s = i.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  width: fit-content;
+  border-radius: ${(e) => e.borderRadius};
+
+  & button {
+    border: none;
+    border-top: ${(e) => "0.0625rem solid " + o(
+  e.theme,
+  "ButtonGroup",
+  e.color,
+  "enabled",
+  "border"
+)};
+
+    border-bottom: ${(e) => "0.0625rem  solid " + o(
+  e.theme,
+  "ButtonGroup",
+  e.color,
+  "enabled",
+  "border"
+)};
+  }
+
+  & button:focus {
+    outline: none;
+  }
+
+  & button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+  }
+
+  & button[data-type="filled"],
+  button[data-type="tinted"] {
+    border: none;
+  }
+
+  & button:first-of-type {
+    border-radius: ${(e) => `${e.borderRadius} 0 0 ${e.borderRadius}`};
+    border-left: ${(e) => "0.0625rem solid " + o(
+  e.theme,
+  "ButtonGroup",
+  e.color,
+  "enabled",
+  "border"
+)};
+  }
+
+  & button:last-of-type {
+    border-radius: ${(e) => `0 ${e.borderRadius} ${e.borderRadius} 0`};
+    border-right: ${(e) => "0.0625rem solid " + o(
+  e.theme,
+  "ButtonGroup",
+  e.color,
+  "enabled",
+  "border"
+)};
+  }
+
+  & button:first-of-type:not([data-type="filled"]) {
+    border-right: ${(e) => "0.0625rem solid " + o(
+  e.theme,
+  "ButtonGroup",
+  e.color,
+  "enabled",
+  "border"
+)};
+  }
+
+  & button:not(:first-of-type):not(:last-of-type):not([data-type="filled"]) {
+    border-right: ${(e) => "0.0625rem solid " + o(
+  e.theme,
+  "ButtonGroup",
+  e.color,
+  "enabled",
+  "border"
+)};
+  }
+`, m = ({ children: e, borderRadius: d = "regular", style: n = {}, className: a = "" }) => {
+  const r = l();
+  return /* @__PURE__ */ u(
+    s,
+    {
+      borderRadius: b(r, d),
+      theme: r,
+      style: n,
+      className: "lnc-ui-button-group " + a,
+      children: e
+    }
+  );
+};
+m.propTypes = {
+  borderRadius: t.oneOf([
+    "slight",
+    "regular",
+    "edged",
+    "curved",
+    "none"
+  ]),
+  className: t.string,
+  style: t.object
+};
+export {
+  m as default
+};