@rango-dev/ui 0.26.1-next.11 → 0.26.1-next.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/index.js +6 -6
  2. package/dist/index.js.map +4 -4
  3. package/dist/widget/ui/src/components/Divider/Divider.styles.d.ts +1 -1
  4. package/dist/widget/ui/src/components/Divider/Divider.styles.d.ts.map +1 -1
  5. package/dist/widget/ui/src/components/Header/Header.constants.d.ts +2 -0
  6. package/dist/widget/ui/src/components/Header/Header.constants.d.ts.map +1 -0
  7. package/dist/widget/ui/src/components/Header/Header.d.ts.map +1 -1
  8. package/dist/widget/ui/src/components/Header/Header.styles.d.ts +1 -0
  9. package/dist/widget/ui/src/components/Header/Header.styles.d.ts.map +1 -1
  10. package/dist/widget/ui/src/components/Header/index.d.ts +1 -0
  11. package/dist/widget/ui/src/components/Header/index.d.ts.map +1 -1
  12. package/dist/widget/ui/src/components/SwapContainer/SwapContainer.d.ts +0 -1
  13. package/dist/widget/ui/src/components/SwapContainer/SwapContainer.d.ts.map +1 -1
  14. package/dist/widget/ui/src/components/Typography/Typography.styles.d.ts +4 -4
  15. package/package.json +1 -1
  16. package/src/components/Divider/Divider.styles.ts +15 -0
  17. package/src/components/Divider/Divider.tsx +2 -2
  18. package/src/components/Header/Header.constants.ts +1 -0
  19. package/src/components/Header/Header.styles.ts +46 -2
  20. package/src/components/Header/Header.tsx +5 -1
  21. package/src/components/Header/index.ts +1 -0
  22. package/src/components/Modal/Modal.tsx +1 -1
  23. package/src/components/SwapContainer/SwapContainer.tsx +2 -14
package/dist/widget/ui/src/components/Divider/Divider.styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const DividerContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
2
- size?: 10 | 12 | 16 | 18 | 20 | 24 | 32 | 30 | 4 | 8 | "4" | "8" | "10" | "12" | "16" | "18" | "20" | "24" | "30" | "32" | undefined;
2
+ size?: 2 | 10 | 12 | 16 | 18 | 20 | 24 | 32 | 30 | 4 | 8 | "2" | "4" | "8" | "10" | "12" | "16" | "18" | "20" | "24" | "30" | "32" | undefined;
3
3
  direction?: "vertical" | "horizontal" | undefined;
4
4
  }, {
5
5
  xs: string;
package/dist/widget/ui/src/components/Divider/Divider.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Divider.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Divider/Divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAkK3B,CAAC"}
1
+ {"version":3,"file":"Divider.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Divider/Divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiL3B,CAAC"}
package/dist/widget/ui/src/components/Header/Header.constants.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const HEADER_CORNDER_RADIUS = 20;
2
+ //# sourceMappingURL=Header.constants.d.ts.map
package/dist/widget/ui/src/components/Header/Header.constants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.constants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,KAAK,CAAC"}
package/dist/widget/ui/src/components/Header/Header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,MAAM,EACN,KAAK,GACN,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAU9B"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,MAAM,EACN,KAAK,GACN,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAc9B"}
package/dist/widget/ui/src/components/Header/Header.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const globalHeaderStyles: () => string;
1
2
  export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
2
3
  xs: string;
3
4
  sm: string;
package/dist/widget/ui/src/components/Header/Header.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAapB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIjB,CAAC"}
1
+ {"version":3,"file":"Header.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,cAM7B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA6CpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIjB,CAAC"}
package/dist/widget/ui/src/components/Header/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { Header } from './Header';
2
+ export { HEADER_CORNDER_RADIUS } from './Header.constants';
2
3
  //# sourceMappingURL=index.d.ts.map
package/dist/widget/ui/src/components/Header/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}
package/dist/widget/ui/src/components/SwapContainer/SwapContainer.d.ts CHANGED
@@ -3,7 +3,6 @@ import type { PropsWithChildren } from 'react';
3
3
  import React from 'react';
4
4
  export interface PropTypes {
5
5
  style?: CSSProperties;
6
- fixedHeight?: boolean;
7
6
  }
8
7
  export declare function SwapContainer(props: PropsWithChildren<PropTypes>): React.JSX.Element;
9
8
  //# sourceMappingURL=SwapContainer.d.ts.map
package/dist/widget/ui/src/components/SwapContainer/SwapContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SwapContainer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapContainer/SwapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAOhE"}
1
+ {"version":3,"file":"SwapContainer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapContainer/SwapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAOhE"}
package/dist/widget/ui/src/components/Typography/Typography.styles.d.ts CHANGED
@@ -3,10 +3,10 @@ export declare const TypographyContainer: import("@stitches/react/types/styled-c
3
3
  size?: "small" | "medium" | "large" | "xmedium" | "xsmall" | undefined;
4
4
  align?: "center" | "left" | "right" | undefined;
5
5
  noWrap?: boolean | "true" | undefined;
6
- ml?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
7
- mt?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
8
- mr?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
9
- mb?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
6
+ ml?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
7
+ mt?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
8
+ mr?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
9
+ mb?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
10
10
  }, {
11
11
  xs: string;
12
12
  sm: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.26.1-next.11",
3
+ "version": "0.26.1-next.12",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
package/src/components/Divider/Divider.styles.ts CHANGED
@@ -4,6 +4,7 @@ export const DividerContainer = styled('div', {
4
4
  flexShrink: 0,
5
5
  variants: {
6
6
  size: {
7
+ 2: {},
7
8
  4: {},
8
9
  8: {},
9
10
  10: {},
@@ -21,6 +22,20 @@ export const DividerContainer = styled('div', {
21
22
  },
22
23
  },
23
24
  compoundVariants: [
25
+ {
26
+ size: 2,
27
+ direction: 'horizontal',
28
+ css: {
29
+ width: 2,
30
+ },
31
+ },
32
+ {
33
+ size: 2,
34
+ direction: 'vertical',
35
+ css: {
36
+ height: 2,
37
+ },
38
+ },
24
39
  {
25
40
  size: 4,
26
41
  direction: 'horizontal',
package/src/components/Divider/Divider.tsx CHANGED
@@ -4,10 +4,10 @@ import React from 'react';
4
4
 
5
5
  import { DividerContainer } from './Divider.styles';
6
6
 
7
- const Default_Size = 12;
7
+ const DEFAULT_SIZE = 12;
8
8
 
9
9
  export function Divider({
10
- size = Default_Size,
10
+ size = DEFAULT_SIZE,
11
11
  direction = 'vertical',
12
12
  }: PropTypes) {
13
13
  return <DividerContainer size={size} direction={direction} />;
package/src/components/Header/Header.constants.ts ADDED
@@ -0,0 +1 @@
1
+ export const HEADER_CORNDER_RADIUS = 20;
package/src/components/Header/Header.styles.ts CHANGED
@@ -1,5 +1,17 @@
1
+ import { globalCss } from '@stitches/react';
2
+
1
3
  import { darkTheme, styled } from '../../theme';
2
4
 
5
+ import { HEADER_CORNDER_RADIUS } from './Header.constants';
6
+
7
+ export const globalHeaderStyles = globalCss({
8
+ '.rng-scrolled': {
9
+ '.rng-curve-left::before, rng-curve-right::before': {
10
+ borderRadius: '0 !important',
11
+ },
12
+ },
13
+ });
14
+
3
15
  export const Container = styled('div', {
4
16
  display: 'flex',
5
17
  justifyContent: 'space-between',
@@ -11,8 +23,40 @@ export const Container = styled('div', {
11
23
  },
12
24
  backgroundColor: '$$color',
13
25
  position: 'relative',
14
- borderTopRightRadius: '$primary',
15
- borderTopLeftRadius: '$primary',
26
+
27
+ '.rng-curve-left,.rng-curve-right': {
28
+ width: HEADER_CORNDER_RADIUS * 2,
29
+ height: HEADER_CORNDER_RADIUS * 2,
30
+ position: 'absolute',
31
+ bottom: 0,
32
+ overflow: 'hidden',
33
+ transform: 'translateY(100%)',
34
+
35
+ '&:before': {
36
+ width: HEADER_CORNDER_RADIUS * 2,
37
+ height: HEADER_CORNDER_RADIUS * 2,
38
+ display: 'block',
39
+ content: '',
40
+ position: 'absolute',
41
+ bottom: 0,
42
+ borderRadius: '50%',
43
+ transition: 'border-radius 0.5s',
44
+ },
45
+ },
46
+ '.rng-curve-left': {
47
+ left: 0,
48
+ '&:before': {
49
+ left: 0,
50
+ boxShadow: `-${HEADER_CORNDER_RADIUS}px -${HEADER_CORNDER_RADIUS}px 0 0 $$color`,
51
+ },
52
+ },
53
+ '.rng-curve-right': {
54
+ right: 0,
55
+ '&:before': {
56
+ right: 0,
57
+ boxShadow: `${HEADER_CORNDER_RADIUS}px -${HEADER_CORNDER_RADIUS}px 0 0 $$color`,
58
+ },
59
+ },
16
60
  });
17
61
 
18
62
  export const Suffix = styled('div', {
package/src/components/Header/Header.tsx CHANGED
@@ -5,13 +5,15 @@ import React from 'react';
5
5
 
6
6
  import { Typography } from '../Typography';
7
7
 
8
- import { Container, Suffix } from './Header.styles';
8
+ import { Container, globalHeaderStyles, Suffix } from './Header.styles';
9
9
 
10
10
  export function Header({
11
11
  prefix,
12
12
  suffix,
13
13
  title,
14
14
  }: PropsWithChildren<PropTypes>) {
15
+ globalHeaderStyles();
16
+
15
17
  return (
16
18
  <Container>
17
19
  {prefix}
@@ -19,6 +21,8 @@ export function Header({
19
21
  {title}
20
22
  </Typography>
21
23
  <Suffix>{suffix}</Suffix>
24
+ <div className="rng-curve-left"></div>
25
+ <div className="rng-curve-right"></div>
22
26
  </Container>
23
27
  );
24
28
  }
package/src/components/Header/index.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { Header } from './Header';
2
+ export { HEADER_CORNDER_RADIUS } from './Header.constants';
package/src/components/Modal/Modal.tsx CHANGED
@@ -62,7 +62,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
62
62
  setActive(false);
63
63
  timeoutRef.current = setTimeout(() => {
64
64
  setIsMount(false);
65
- container.style.overflow = 'unset';
65
+ container.style.removeProperty('overflow');
66
66
  }, CLOSED_DELAY);
67
67
  }
68
68
  }
package/src/components/SwapContainer/SwapContainer.tsx CHANGED
@@ -22,28 +22,16 @@ const MainContainer = styled('div', {
22
22
  boxSizing: 'border-box',
23
23
  listStyleType: 'none',
24
24
  },
25
- variants: {
26
- fixedHeight: {
27
- true: {
28
- height: '633px',
29
- maxHeight: '633px',
30
- },
31
- false: {
32
- height: 'auto',
33
- },
34
- },
35
- },
36
25
  });
37
26
 
38
27
  export interface PropTypes {
39
28
  style?: CSSProperties;
40
- fixedHeight?: boolean;
41
29
  }
42
30
 
43
31
  export function SwapContainer(props: PropsWithChildren<PropTypes>) {
44
- const { children, style, fixedHeight = true } = props;
32
+ const { children, style } = props;
45
33
  return (
46
- <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
34
+ <MainContainer style={style} id="swap-box">
47
35
  {children}
48
36
  </MainContainer>
49
37
  );