@lidofinance/lido-ui 1.10.13 → 2.0.0-next.2

package/dist/cjs/box/src/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Box", {
+    enumerable: true,
+    get: ()=>_box.default
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _box = /*#__PURE__*/ _interopRequireDefault(require("./Box"));
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/box/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/box/src/index.ts"],"sourcesContent":["export { default as Box } from './Box'\n"],"names":["Box"],"mappings":"AAAA;;;;+BAAoBA,KAAG;;aAAHA,IAAG,QAAA;;;0DAAQ,OAAO"}

package/dist/cjs/button/src/Button.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _buttonStyles = require("./ButtonStyles");
+const _useRipple = require("./useRipple");
+const loaderSizes = {
+    xxs: 'small',
+    xs: 'small',
+    sm: 'small',
+    md: 'medium',
+    lg: 'medium'
+};
+function Button(props, ref) {
+    const { size ='md' , variant ='filled' , color ='primary' , square =false , fullwidth =false , loading =false , active =false , onClick , disabled , children , ...rest } = props;
+    const { handleClick , ripple  } = (0, _useRipple.useRipple)(props);
+    const loaderSize = loaderSizes[size];
+    return /*#__PURE__*/ _react.default.createElement(_buttonStyles.ButtonStyle, _extends({
+        $size: size,
+        $variant: variant,
+        $fullwidth: fullwidth,
+        $color: color,
+        $square: square,
+        $loading: loading,
+        $active: active,
+        onClick: handleClick,
+        disabled: disabled || loading,
+        type: "button",
+        ref: ref
+    }, rest), /*#__PURE__*/ _react.default.createElement(_buttonStyles.ButtonContentStyle, {
+        $hidden: loading
+    }, children), loading && /*#__PURE__*/ _react.default.createElement(_buttonStyles.ButtonLoaderStyle, {
+        size: loaderSize
+    }), !active && ripple);
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(Button);
+
+//# sourceMappingURL=Button.js.map

package/dist/cjs/button/src/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/Button.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport {\n  ButtonStyle,\n  ButtonContentStyle,\n  ButtonLoaderStyle,\n} from './ButtonStyles'\nimport { ButtonProps } from './types'\nimport { useRipple } from './useRipple'\n\nconst loaderSizes = {\n  xxs: 'small',\n  xs: 'small',\n  sm: 'small',\n  md: 'medium',\n  lg: 'medium',\n} as const\n\nfunction Button(props: ButtonProps, ref?: ForwardedRef<HTMLButtonElement>) {\n  const {\n    size = 'md',\n    variant = 'filled',\n    color = 'primary',\n    square = false,\n    fullwidth = false,\n    loading = false,\n    active = false,\n    onClick,\n    disabled,\n    children,\n    ...rest\n  } = props\n\n  const { handleClick, ripple } = useRipple(props)\n  const loaderSize = loaderSizes[size]\n\n  return (\n    <ButtonStyle\n      $size={size}\n      $variant={variant}\n      $fullwidth={fullwidth}\n      $color={color}\n      $square={square}\n      $loading={loading}\n      $active={active}\n      onClick={handleClick}\n      disabled={disabled || loading}\n      type='button'\n      ref={ref}\n      {...rest}\n    >\n      <ButtonContentStyle $hidden={loading}>{children}</ButtonContentStyle>\n      {loading && <ButtonLoaderStyle size={loaderSize} />}\n      {!active && ripple}\n    </ButtonStyle>\n  )\n}\n\nexport default forwardRef(Button)\n"],"names":["loaderSizes","xxs","xs","sm","md","lg","Button","props","ref","size","variant","color","square","fullwidth","loading","active","onClick","disabled","children","rest","handleClick","ripple","useRipple","loaderSize","ButtonStyle","$size","$variant","$fullwidth","$color","$square","$loading","$active","type","ButtonContentStyle","$hidden","ButtonLoaderStyle","forwardRef"],"mappings":"AAAA;;;;+BAyDA,SAAiC;;aAAjC,QAAiC;;;;6DAzDe,OAAO;8BAKhD,gBAAgB;2BAEG,aAAa;AAEvC,MAAMA,WAAW,GAAG;IAClBC,GAAG,EAAE,OAAO;IACZC,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE,QAAQ;IACZC,EAAE,EAAE,QAAQ;CACb,AAAS;AAEV,SAASC,MAAM,CAACC,KAAkB,EAAEC,GAAqC,EAAE;IACzE,MAAM,EACJC,IAAI,EAAG,IAAI,CAAA,EACXC,OAAO,EAAG,QAAQ,CAAA,EAClBC,KAAK,EAAG,SAAS,CAAA,EACjBC,MAAM,EAAG,KAAK,CAAA,EACdC,SAAS,EAAG,KAAK,CAAA,EACjBC,OAAO,EAAG,KAAK,CAAA,EACfC,MAAM,EAAG,KAAK,CAAA,EACdC,OAAO,CAAA,EACPC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EACR,GAAGC,IAAI,EACR,GAAGZ,KAAK;IAET,MAAM,EAAEa,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGC,IAAAA,UAAS,UAAA,EAACf,KAAK,CAAC;IAChD,MAAMgB,UAAU,GAAGvB,WAAW,CAACS,IAAI,CAAC;IAEpC,qBACE,6BAACe,aAAW,YAAA;QACVC,KAAK,EAAEhB,IAAI;QACXiB,QAAQ,EAAEhB,OAAO;QACjBiB,UAAU,EAAEd,SAAS;QACrBe,MAAM,EAAEjB,KAAK;QACbkB,OAAO,EAAEjB,MAAM;QACfkB,QAAQ,EAAEhB,OAAO;QACjBiB,OAAO,EAAEhB,MAAM;QACfC,OAAO,EAAEI,WAAW;QACpBH,QAAQ,EAAEA,QAAQ,IAAIH,OAAO;QAC7BkB,IAAI,EAAC,QAAQ;QACbxB,GAAG,EAAEA,GAAG;OACJW,IAAI,iBAER,6BAACc,aAAkB,mBAAA;QAACC,OAAO,EAAEpB,OAAO;OAAGI,QAAQ,CAAsB,EACpEJ,OAAO,kBAAI,6BAACqB,aAAiB,kBAAA;QAAC1B,IAAI,EAAEc,UAAU;MAAI,EAClD,CAACR,MAAM,IAAIM,MAAM,CACN,CACf;AACH,CAAC;MAED,QAAiC,iBAAlBe,IAAAA,MAAU,WAAA,EAAC9B,MAAM,CAAC"}

package/dist/cjs/button/src/ButtonIcon.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _buttonIconStyles = require("./ButtonIconStyles");
+const _button = /*#__PURE__*/ _interopRequireDefault(require("./Button"));
+function ButtonIcon(props, ref) {
+    const { icon , children , ...rest } = props;
+    const hasNoChildren = !children;
+    return /*#__PURE__*/ _react.default.createElement(_button.default, _extends({
+        square: hasNoChildren
+    }, rest, {
+        ref: ref
+    }), /*#__PURE__*/ _react.default.createElement(_buttonIconStyles.ButtonWrapperStyle, null, /*#__PURE__*/ _react.default.createElement(_buttonIconStyles.ButtonIconStyle, {
+        $square: hasNoChildren
+    }, icon), /*#__PURE__*/ _react.default.createElement(_buttonIconStyles.ButtonContentStyle, null, children)));
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(ButtonIcon);
+
+//# sourceMappingURL=ButtonIcon.js.map

package/dist/cjs/button/src/ButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/ButtonIcon.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport {\n  ButtonWrapperStyle,\n  ButtonIconStyle,\n  ButtonContentStyle,\n} from './ButtonIconStyles'\nimport { ButtonIconProps } from './types'\nimport Button from './Button'\n\nfunction ButtonIcon(\n  props: ButtonIconProps,\n  ref?: ForwardedRef<HTMLButtonElement>\n) {\n  const { icon, children, ...rest } = props\n  const hasNoChildren = !children\n\n  return (\n    <Button square={hasNoChildren} {...rest} ref={ref}>\n      <ButtonWrapperStyle>\n        <ButtonIconStyle $square={hasNoChildren}>{icon}</ButtonIconStyle>\n        <ButtonContentStyle>{children}</ButtonContentStyle>\n      </ButtonWrapperStyle>\n    </Button>\n  )\n}\n\nexport default forwardRef(ButtonIcon)\n"],"names":["ButtonIcon","props","ref","icon","children","rest","hasNoChildren","Button","square","ButtonWrapperStyle","ButtonIconStyle","$square","ButtonContentStyle","forwardRef"],"mappings":"AAAA;;;;+BA0BA,SAAqC;;aAArC,QAAqC;;;;;6DA1BW,OAAO;kCAKhD,oBAAoB;6DAER,UAAU;AAE7B,SAASA,UAAU,CACjBC,KAAsB,EACtBC,GAAqC,EACrC;IACA,MAAM,EAAEC,IAAI,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGC,IAAI,EAAE,GAAGJ,KAAK;IACzC,MAAMK,aAAa,GAAG,CAACF,QAAQ;IAE/B,qBACE,6BAACG,OAAM,QAAA;QAACC,MAAM,EAAEF,aAAa;OAAMD,IAAI;QAAEH,GAAG,EAAEA,GAAG;sBAC/C,6BAACO,iBAAkB,mBAAA,sBACjB,6BAACC,iBAAe,gBAAA;QAACC,OAAO,EAAEL,aAAa;OAAGH,IAAI,CAAmB,gBACjE,6BAACS,iBAAkB,mBAAA,QAAER,QAAQ,CAAsB,CAChC,CACd,CACV;AACH,CAAC;MAED,QAAqC,iBAAtBS,IAAAA,MAAU,WAAA,EAACb,UAAU,CAAC"}

package/dist/cjs/button/src/ButtonIconStyles.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ButtonWrapperStyle: ()=>ButtonWrapperStyle,
+    ButtonIconStyle: ()=>ButtonIconStyle,
+    ButtonContentStyle: ()=>ButtonContentStyle
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
+const ButtonWrapperStyle = _styledComponents.default.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1em;
+  min-width: 1em;
+`;
+const ButtonIconStyle = _styledComponents.default.span`
+  margin: ${(param)=>{
+    let { $square  } = param;
+    return $square ? '-12px' : '-12px -6px';
+}};
+  line-height: 0;
+  flex-shrink: 0;
+
+  svg {
+    fill: currentColor;
+  }
+`;
+const ButtonContentStyle = _styledComponents.default.span`
+  margin-left: 10px;
+
+  :empty {
+    display: none;
+  }
+`;
+
+//# sourceMappingURL=ButtonIconStyles.js.map

package/dist/cjs/button/src/ButtonIconStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/ButtonIconStyles.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ButtonWrapperStyle = styled.span`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 1em;\n  min-width: 1em;\n`\n\nexport const ButtonIconStyle = styled.span<{ $square: boolean }>`\n  margin: ${({ $square }) => ($square ? '-12px' : '-12px -6px')};\n  line-height: 0;\n  flex-shrink: 0;\n\n  svg {\n    fill: currentColor;\n  }\n`\n\nexport const ButtonContentStyle = styled.span`\n  margin-left: 10px;\n\n  :empty {\n    display: none;\n  }\n`\n"],"names":["ButtonWrapperStyle","ButtonIconStyle","ButtonContentStyle","styled","span","$square"],"mappings":"AAAA;;;;;;;;;;;IAEaA,kBAAkB,MAAlBA,kBAAkB;IAQlBC,eAAe,MAAfA,eAAe;IAUfC,kBAAkB,MAAlBA,kBAAkB;;;uEApBZ,mBAAmB;AAE/B,MAAMF,kBAAkB,GAAGG,iBAAM,QAAA,CAACC,IAAI,CAAC;;;;;;AAM9C,CAAC;AAEM,MAAMH,eAAe,GAAGE,iBAAM,QAAA,CAACC,IAAI,AAAsB,CAAC;UACvD,EAAE,SAAiB;QAAhB,EAAEC,OAAO,CAAA,EAAE;WAAMA,OAAO,GAAG,OAAO,GAAG,YAAY;AAAA,CAAC,CAAC;;;;;;;AAOhE,CAAC;AAEM,MAAMH,kBAAkB,GAAGC,iBAAM,QAAA,CAACC,IAAI,CAAC;;;;;;AAM9C,CAAC"}

package/dist/cjs/button/src/ButtonStyles.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ButtonStyle: ()=>ButtonStyle,
+    ripple: ()=>ripple,
+    ButtonRippleStyle: ()=>ButtonRippleStyle,
+    ButtonContentStyle: ()=>ButtonContentStyle,
+    ButtonLoaderStyle: ()=>ButtonLoaderStyle
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireWildcard(require("styled-components"));
+const _loaders = require("../../loaders/src/index");
+const sizes = {
+    xxs: (0, _styledComponents.css)`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xxxs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.sm;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '11px' : '11px 16px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '50px';
+    }};
+  `,
+    xs: (0, _styledComponents.css)`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xxs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.sm;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '10px' : '10px 16px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '60px';
+    }};
+  `,
+    sm: (0, _styledComponents.css)`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.sm;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '16px' : '16px 24px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '100px';
+    }};
+  `,
+    md: (0, _styledComponents.css)`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.lg;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '21px' : '21px 44px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '120px';
+    }};
+  `,
+    lg: (0, _styledComponents.css)`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.sm;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.lg;
+    }}px;
+    box-shadow: ${(param)=>{
+        let { theme  } = param;
+        return theme.boxShadows.md;
+    }}
+      var(--lido-color-shadowDark);
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '24px' : '24px 64px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '160px';
+    }};
+  `
+};
+const getMainColor = (props)=>{
+    const colorsMap = {
+        primary: `var(--lido-color-primary)`,
+        secondary: `var(--lido-color-secondary)`,
+        warning: `var(--lido-color-warning)`,
+        error: `var(--lido-color-error)`,
+        success: `var(--lido-color-success)`
+    };
+    return colorsMap[props.$color];
+};
+const getContrastColor = (props)=>{
+    const colorsMap = {
+        primary: `var(--lido-color-primaryContrast)`,
+        secondary: `var(--lido-color-secondaryContrast)`,
+        warning: `var(--lido-color-warningContrast)`,
+        error: `var(--lido-color-errorContrast)`,
+        success: `var(--lido-color-successContrast)`
+    };
+    return colorsMap[props.$color];
+};
+const getHoverColor = (props)=>{
+    const colorsMap = {
+        primary: `var(--lido-color-primaryHover)`,
+        secondary: `var(--lido-color-secondaryHover)`,
+        warning: `var(--lido-color-warningHover)`,
+        error: `var(--lido-color-errorHover)`,
+        success: `var(--lido-color-successHover)`
+    };
+    return colorsMap[props.$color];
+};
+const variants = {
+    filled: (0, _styledComponents.css)`
+    color: ${getContrastColor};
+    background-color: ${getMainColor};
+    transition: background-color ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+
+    :not(:disabled):hover,
+    :focus-visible {
+      background-color: ${getHoverColor};
+    }
+  `,
+    outlined: (0, _styledComponents.css)`
+    color: ${getMainColor};
+    transition: background-color ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease,
+      color ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+
+    :before {
+      display: block;
+      border: 1px solid ${getMainColor};
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      background-color: ${getHoverColor};
+      color: ${getContrastColor};
+    }
+  `,
+    text: (0, _styledComponents.css)`
+    color: ${getMainColor};
+    background-color: var(--lido-color-foreground);
+
+    :before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+      opacity: 0;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      :before {
+        opacity: 0.1;
+      }
+    }
+  `,
+    ghost: (0, _styledComponents.css)`
+    color: ${getMainColor};
+
+    :before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+      opacity: 0;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      :before {
+        opacity: 0.1;
+      }
+    }
+  `,
+    translucent: (0, _styledComponents.css)`
+    color: ${getMainColor};
+
+    :before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+      opacity: 0.1;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      :before {
+        opacity: 0.2;
+      }
+    }
+  `
+};
+const ButtonStyle = _styledComponents.default.button`
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  background: transparent;
+  font-family: inherit;
+  font-weight: 700;
+  width: ${(param)=>{
+    let { $fullwidth  } = param;
+    return $fullwidth ? ' 100%' : 'auto';
+}};
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    display: none;
+  }
+
+  :not(:disabled) {
+    cursor: pointer;
+  }
+
+  :disabled {
+    opacity: ${(param)=>{
+    let { $loading  } = param;
+    return $loading ? 1 : 0.5;
+}};
+  }
+
+  ${(props)=>sizes[props.$size]}
+  ${(props)=>variants[props.$variant]}
+`;
+const ripple = (0, _styledComponents.keyframes)`
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+`;
+const ButtonRippleStyle = _styledComponents.default.span`
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  pointer-events: none;
+  animation: ${ripple} 0.8s linear;
+  background-color: currentColor;
+  opacity: 0.4;
+`;
+const ButtonContentStyle = _styledComponents.default.span`
+  position: relative;
+  pointer-events: none;
+  visibility: ${(param)=>{
+    let { $hidden  } = param;
+    return $hidden ? 'hidden' : 'visible';
+}};
+`;
+const ButtonLoaderStyle = (0, _styledComponents.default)(_loaders.Loader)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentColor;
+  pointer-events: none;
+`;
+
+//# sourceMappingURL=ButtonStyles.js.map

package/dist/cjs/button/src/ButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/ButtonStyles.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { Theme } from '@lidofinance/theme'\nimport { Loader } from '@lidofinance/loaders'\nimport { ButtonColors, ButtonSizes, ButtonVariants } from './types'\n\ntype InjectedProps = {\n  $color: ButtonColors\n  $size: ButtonSizes\n  $variant: ButtonVariants\n  $fullwidth: boolean\n  $square: boolean\n  $loading: boolean\n  $active: boolean\n  theme: Theme\n}\n\nconst sizes = {\n  xxs: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxxs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '11px' : '11px 16px')};\n    min-width: ${({ $square }) => ($square ? '0' : '50px')};\n  `,\n  xs: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '10px' : '10px 16px')};\n    min-width: ${({ $square }) => ($square ? '0' : '60px')};\n  `,\n  sm: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '16px' : '16px 24px')};\n    min-width: ${({ $square }) => ($square ? '0' : '100px')};\n  `,\n  md: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n    padding: ${({ $square }) => ($square ? '21px' : '21px 44px')};\n    min-width: ${({ $square }) => ($square ? '0' : '120px')};\n  `,\n  lg: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.sm}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n    box-shadow: ${({ theme }) => theme.boxShadows.md}\n      var(--lido-color-shadowDark);\n    padding: ${({ $square }) => ($square ? '24px' : '24px 64px')};\n    min-width: ${({ $square }) => ($square ? '0' : '160px')};\n  `,\n}\n\nconst getMainColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primary)`,\n    secondary: `var(--lido-color-secondary)`,\n    warning: `var(--lido-color-warning)`,\n    error: `var(--lido-color-error)`,\n    success: `var(--lido-color-success)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst getContrastColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primaryContrast)`,\n    secondary: `var(--lido-color-secondaryContrast)`,\n    warning: `var(--lido-color-warningContrast)`,\n    error: `var(--lido-color-errorContrast)`,\n    success: `var(--lido-color-successContrast)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst getHoverColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primaryHover)`,\n    secondary: `var(--lido-color-secondaryHover)`,\n    warning: `var(--lido-color-warningHover)`,\n    error: `var(--lido-color-errorHover)`,\n    success: `var(--lido-color-successHover)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst variants = {\n  filled: css`\n    color: ${getContrastColor};\n    background-color: ${getMainColor};\n    transition: background-color ${({ theme }) => theme.duration.fast} ease;\n\n    :not(:disabled):hover,\n    :focus-visible {\n      background-color: ${getHoverColor};\n    }\n  `,\n  outlined: css`\n    color: ${getMainColor};\n    transition: background-color ${({ theme }) => theme.duration.fast} ease,\n      color ${({ theme }) => theme.duration.fast} ease;\n\n    :before {\n      display: block;\n      border: 1px solid ${getMainColor};\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      background-color: ${getHoverColor};\n      color: ${getContrastColor};\n    }\n  `,\n  text: css`\n    color: ${getMainColor};\n    background-color: var(--lido-color-foreground);\n\n    :before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      :before {\n        opacity: 0.1;\n      }\n    }\n  `,\n  ghost: css`\n    color: ${getMainColor};\n\n    :before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      :before {\n        opacity: 0.1;\n      }\n    }\n  `,\n  translucent: css`\n    color: ${getMainColor};\n\n    :before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0.1;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      :before {\n        opacity: 0.2;\n      }\n    }\n  `,\n}\n\nexport const ButtonStyle = styled.button<InjectedProps>`\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 700;\n  width: ${({ $fullwidth }) => ($fullwidth ? ' 100%' : 'auto')};\n\n  :before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    display: none;\n  }\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  :disabled {\n    opacity: ${({ $loading }) => ($loading ? 1 : 0.5)};\n  }\n\n  ${(props) => sizes[props.$size]}\n  ${(props) => variants[props.$variant]}\n`\n\nexport const ripple = keyframes`\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n`\n\nexport const ButtonRippleStyle = styled.span`\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  pointer-events: none;\n  animation: ${ripple} 0.8s linear;\n  background-color: currentColor;\n  opacity: 0.4;\n`\n\nexport const ButtonContentStyle = styled.span<{ $hidden: boolean }>`\n  position: relative;\n  pointer-events: none;\n  visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};\n`\n\nexport const ButtonLoaderStyle = styled(Loader)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: currentColor;\n  pointer-events: none;\n`\n"],"names":["ButtonStyle","ripple","ButtonRippleStyle","ButtonContentStyle","ButtonLoaderStyle","sizes","xxs","css","theme","fontSizesMap","xxxs","borderRadiusesMap","sm","$square","xs","md","lg","boxShadows","getMainColor","props","colorsMap","primary","secondary","warning","error","success","$color","getContrastColor","getHoverColor","variants","filled","duration","fast","outlined","text","ghost","translucent","styled","button","$fullwidth","$loading","$size","$variant","keyframes","span","$hidden","Loader"],"mappings":"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"}

package/dist/cjs/button/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Button: ()=>_button.default,
+    ButtonIcon: ()=>_buttonIcon.default
+});
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _button = /*#__PURE__*/ _interopRequireDefault(require("./Button"));
+const _buttonIcon = /*#__PURE__*/ _interopRequireDefault(require("./ButtonIcon"));
+_exportStar(require("./types"), exports);
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/button/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/index.ts"],"sourcesContent":["export { default as Button } from './Button'\nexport { default as ButtonIcon } from './ButtonIcon'\nexport * from './types'\n"],"names":["Button","ButtonIcon"],"mappings":"AAAA;;;;;;;;;;;IAAoBA,MAAM,MAANA,OAAM,QAAA;IACNC,UAAU,MAAVA,WAAU,QAAA;;;;6DADI,UAAU;iEACN,cAAc;oBACtC,SAAS"}

package/dist/cjs/button/src/types.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ButtonSize: ()=>ButtonSize,
+    ButtonVariant: ()=>ButtonVariant,
+    ButtonColor: ()=>ButtonColor
+});
+var ButtonSize;
+(function(ButtonSize) {
+    ButtonSize[ButtonSize["xxs"] = 0] = "xxs";
+    ButtonSize[ButtonSize["xs"] = 1] = "xs";
+    ButtonSize[ButtonSize["sm"] = 2] = "sm";
+    ButtonSize[ButtonSize["md"] = 3] = "md";
+    ButtonSize[ButtonSize["lg"] = 4] = "lg";
+})(ButtonSize || (ButtonSize = {}));
+var ButtonVariant;
+(function(ButtonVariant) {
+    ButtonVariant[ButtonVariant["filled"] = 0] = "filled";
+    ButtonVariant[ButtonVariant["outlined"] = 1] = "outlined";
+    ButtonVariant[ButtonVariant["text"] = 2] = "text";
+    ButtonVariant[ButtonVariant["ghost"] = 3] = "ghost";
+    ButtonVariant[ButtonVariant["translucent"] = 4] = "translucent";
+})(ButtonVariant || (ButtonVariant = {}));
+var ButtonColor;
+(function(ButtonColor) {
+    ButtonColor[ButtonColor["primary"] = 0] = "primary";
+    ButtonColor[ButtonColor["secondary"] = 1] = "secondary";
+    ButtonColor[ButtonColor["warning"] = 2] = "warning";
+    ButtonColor[ButtonColor["error"] = 3] = "error";
+    ButtonColor[ButtonColor["success"] = 4] = "success";
+})(ButtonColor || (ButtonColor = {}));
+
+//# sourceMappingURL=types.js.map

package/dist/cjs/button/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum ButtonSize {\n  xxs,\n  xs,\n  sm,\n  md,\n  lg,\n}\nexport type ButtonSizes = keyof typeof ButtonSize\n\nexport enum ButtonVariant {\n  filled,\n  outlined,\n  text,\n  ghost,\n  translucent,\n}\nexport type ButtonVariants = keyof typeof ButtonVariant\n\nexport enum ButtonColor {\n  primary,\n  secondary,\n  warning,\n  error,\n  success,\n}\nexport type ButtonColors = keyof typeof ButtonColor\n\nexport type ButtonProps = LidoComponentProps<\n  'button',\n  {\n    size?: ButtonSizes\n    variant?: ButtonVariants\n    color?: ButtonColors\n    fullwidth?: boolean\n    square?: boolean\n    loading?: boolean\n    active?: boolean\n    as?: never\n  }\n>\n\nexport type ButtonIconProps = {\n  icon: JSX.Element\n} & ButtonProps\n"],"names":["ButtonSize","xxs","xs","sm","md","lg","ButtonVariant","filled","outlined","text","ghost","translucent","ButtonColor","primary","secondary","warning","error","success"],"mappings":"AAAA;;;;;;;;;;;;;;;IAGO,UAMN;UANWA,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBC,KAAG,IAAHA,CAAG,IAAHA,KAAG;IADOD,UAAU,CAAVA,UAAU,CAEpBE,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAFQF,UAAU,CAAVA,UAAU,CAGpBG,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAHQH,UAAU,CAAVA,UAAU,CAIpBI,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAJQJ,UAAU,CAAVA,UAAU,CAKpBK,IAAE,IAAFA,CAAE,IAAFA,IAAE;GALQL,UAAU,KAAVA,UAAU;IASf,aAMN;UANWM,aAAa;IAAbA,aAAa,CAAbA,aAAa,CACvBC,QAAM,IAANA,CAAM,IAANA,QAAM;IADID,aAAa,CAAbA,aAAa,CAEvBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,aAAa,CAAbA,aAAa,CAGvBG,MAAI,IAAJA,CAAI,IAAJA,MAAI;IAHMH,aAAa,CAAbA,aAAa,CAIvBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,aAAa,CAAbA,aAAa,CAKvBK,aAAW,IAAXA,CAAW,IAAXA,aAAW;GALDL,aAAa,KAAbA,aAAa;IASlB,WAMN;UANWM,WAAW;IAAXA,WAAW,CAAXA,WAAW,CACrBC,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGD,WAAW,CAAXA,WAAW,CAErBE,WAAS,IAATA,CAAS,IAATA,WAAS;IAFCF,WAAW,CAAXA,WAAW,CAGrBG,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAHGH,WAAW,CAAXA,WAAW,CAIrBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,WAAW,CAAXA,WAAW,CAKrBK,SAAO,IAAPA,CAAO,IAAPA,SAAO;GALGL,WAAW,KAAXA,WAAW"}

package/dist/cjs/button/src/useRipple.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useRipple", {
+    enumerable: true,
+    get: ()=>useRipple
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _buttonStyles = require("./ButtonStyles");
+const useRipple = (param)=>{
+    let { onClick  } = param;
+    const [ripple, setRipple] = (0, _react.useState)(null);
+    const handleClick = (0, _react.useCallback)((event)=>{
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const diameter = Math.max(button.clientWidth, button.clientHeight);
+        const radius = diameter / 2;
+        const isMouseClick = event.clientX > 0 && event.clientY > 0;
+        const x = isMouseClick ? event.clientX - rect.left : button.clientWidth / 2;
+        const y = isMouseClick ? event.clientY - rect.top : button.clientHeight / 2;
+        const style = {
+            width: diameter,
+            height: diameter,
+            left: x - radius,
+            top: y - radius
+        };
+        setRipple(/*#__PURE__*/ _react.default.createElement(_buttonStyles.ButtonRippleStyle, {
+            style: style,
+            key: event.timeStamp
+        }));
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [
+        onClick
+    ]);
+    return {
+        ripple,
+        handleClick
+    };
+};
+
+//# sourceMappingURL=useRipple.js.map

package/dist/cjs/button/src/useRipple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/useRipple.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { ButtonProps } from './types'\nimport { ButtonRippleStyle } from './ButtonStyles'\n\ntype UseRipple = (props: ButtonProps) => {\n  ripple: React.ReactNode\n  handleClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\nexport const useRipple: UseRipple = ({ onClick }) => {\n  const [ripple, setRipple] = useState<React.ReactNode | null>(null)\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      const button = event.currentTarget\n      const rect = button.getBoundingClientRect()\n      const diameter = Math.max(button.clientWidth, button.clientHeight)\n      const radius = diameter / 2\n      const isMouseClick = event.clientX > 0 && event.clientY > 0\n\n      const x = isMouseClick\n        ? event.clientX - rect.left\n        : button.clientWidth / 2\n\n      const y = isMouseClick\n        ? event.clientY - rect.top\n        : button.clientHeight / 2\n\n      const style = {\n        width: diameter,\n        height: diameter,\n        left: x - radius,\n        top: y - radius,\n      }\n\n      setRipple(<ButtonRippleStyle style={style} key={event.timeStamp} />)\n      onClick?.(event)\n    },\n    [onClick]\n  )\n\n  return {\n    ripple,\n    handleClick,\n  }\n}\n"],"names":["useRipple","onClick","ripple","setRipple","useState","handleClick","useCallback","event","button","currentTarget","rect","getBoundingClientRect","diameter","Math","max","clientWidth","clientHeight","radius","isMouseClick","clientX","clientY","x","left","y","top","style","width","height","ButtonRippleStyle","key","timeStamp"],"mappings":"AAAA;;;;+BASaA,WAAS;;aAATA,SAAS;;;6DATuB,OAAO;8BAElB,gBAAgB;AAO3C,MAAMA,SAAS,GAAc,SAAiB;QAAhB,EAAEC,OAAO,CAAA,EAAE;IAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,IAAAA,MAAQ,SAAA,EAAyB,IAAI,CAAC;IAElE,MAAMC,WAAW,GAAGC,IAAAA,MAAW,YAAA,EAC7B,CAACC,KAAsD,GAAK;QAC1D,MAAMC,MAAM,GAAGD,KAAK,CAACE,aAAa;QAClC,MAAMC,IAAI,GAAGF,MAAM,CAACG,qBAAqB,EAAE;QAC3C,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACN,MAAM,CAACO,WAAW,EAAEP,MAAM,CAACQ,YAAY,CAAC;QAClE,MAAMC,MAAM,GAAGL,QAAQ,GAAG,CAAC;QAC3B,MAAMM,YAAY,GAAGX,KAAK,CAACY,OAAO,GAAG,CAAC,IAAIZ,KAAK,CAACa,OAAO,GAAG,CAAC;QAE3D,MAAMC,CAAC,GAAGH,YAAY,GAClBX,KAAK,CAACY,OAAO,GAAGT,IAAI,CAACY,IAAI,GACzBd,MAAM,CAACO,WAAW,GAAG,CAAC;QAE1B,MAAMQ,CAAC,GAAGL,YAAY,GAClBX,KAAK,CAACa,OAAO,GAAGV,IAAI,CAACc,GAAG,GACxBhB,MAAM,CAACQ,YAAY,GAAG,CAAC;QAE3B,MAAMS,KAAK,GAAG;YACZC,KAAK,EAAEd,QAAQ;YACfe,MAAM,EAAEf,QAAQ;YAChBU,IAAI,EAAED,CAAC,GAAGJ,MAAM;YAChBO,GAAG,EAAED,CAAC,GAAGN,MAAM;SAChB;QAEDd,SAAS,eAAC,6BAACyB,aAAiB,kBAAA;YAACH,KAAK,EAAEA,KAAK;YAAEI,GAAG,EAAEtB,KAAK,CAACuB,SAAS;UAAI,CAAC;QACpE7B,OAAO,aAAPA,OAAO,WAAS,GAAhBA,KAAAA,CAAgB,GAAhBA,OAAO,CAAGM,KAAK,CAAC,CAAA;IAClB,CAAC,EACD;QAACN,OAAO;KAAC,CACV;IAED,OAAO;QACLC,MAAM;QACNG,WAAW;KACZ,CAAA;AACH,CAAC"}