@rango-dev/ui 0.29.1-next.1 → 0.29.1-next.3

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 (11) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/index.js.map +3 -3
  3. package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map +1 -1
  4. package/dist/widget/ui/src/components/QuoteCost/QuoteCost.styles.d.ts.map +1 -1
  5. package/dist/widget/ui/src/components/Select/select.styles.d.ts.map +1 -1
  6. package/package.json +1 -1
  7. package/readme.md +1 -0
  8. package/src/components/Alert/Alert.styles.ts +3 -1
  9. package/src/components/QuoteCost/QuoteCost.styles.ts +2 -0
  10. package/src/components/Select/Select.tsx +24 -24
  11. package/src/components/Select/select.styles.ts +30 -54
package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAuFpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIzB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqDxB,CAAC"}
1
+ {"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyFpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIzB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqDxB,CAAC"}
package/dist/widget/ui/src/components/QuoteCost/QuoteCost.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuoteCost.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMrB,CAAC;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwBrB,CAAC"}
1
+ {"version":3,"file":"QuoteCost.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMrB,CAAC;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA0BrB,CAAC"}
package/dist/widget/ui/src/components/Select/select.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Select/select.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAIjD,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAExD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAuDxB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcxB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoBrB,CAAC"}
1
+ {"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Select/select.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAIjD,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAExD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyCxB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAOxB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiBrB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.29.1-next.1",
3
+ "version": "0.29.1-next.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
package/readme.md CHANGED
@@ -5,3 +5,4 @@ Rango UI design system components
5
5
  ### Icons
6
6
 
7
7
  Add your svg icon to `svgs/resources/` then run `yarn build:icons`.
8
+
package/src/components/Alert/Alert.styles.ts CHANGED
@@ -4,7 +4,9 @@ export const Container = styled('div', {
4
4
  display: 'flex',
5
5
  flexDirection: 'column',
6
6
  borderRadius: '$xs',
7
-
7
+ '.title_typography': {
8
+ width: '100%',
9
+ },
8
10
  '.title_typography:first-letter': {
9
11
  textTransform: 'uppercase',
10
12
  },
package/src/components/QuoteCost/QuoteCost.styles.ts CHANGED
@@ -31,6 +31,8 @@ const blinker = keyframes({
31
31
  export const itemStyles = css({
32
32
  display: 'flex',
33
33
  alignItems: 'center',
34
+ cursor: 'default',
35
+
34
36
  '&.feeSection': {
35
37
  cursor: 'pointer',
36
38
  '&:hover': {
package/src/components/Select/Select.tsx CHANGED
@@ -3,7 +3,7 @@ import type { PropTypes } from './Select.types';
3
3
  import * as Select from '@radix-ui/react-select';
4
4
  import React, { useEffect, useRef, useState } from 'react';
5
5
 
6
- import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
6
+ import { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons';
7
7
  import { Typography } from '../Typography';
8
8
 
9
9
  import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
@@ -31,47 +31,47 @@ export function SelectComponent(props: PropTypes) {
31
31
 
32
32
  return (
33
33
  <div ref={selectRef}>
34
- <Select.Root value={value.value} open={open}>
34
+ <Select.Root value={value?.value} open={open}>
35
35
  <SelectTrigger
36
36
  onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
37
37
  onClick={handleToggle}
38
38
  open={open}
39
- aria-label={value.label}>
39
+ aria-label={value?.label}>
40
40
  <Select.Value>
41
41
  <Typography variant="body" size="small">
42
- {value.label}
42
+ {value?.label}
43
43
  </Typography>
44
44
  </Select.Value>
45
45
 
46
46
  <Select.Icon className="SelectIcon">
47
- <ChevronDownIcon size={12} />
47
+ <ChevronDownIcon size={12} color="black" />
48
48
  </Select.Icon>
49
49
  </SelectTrigger>
50
50
  <Select.Portal container={container}>
51
- <SelectContent>
51
+ <SelectContent position="popper" sideOffset={5}>
52
52
  <Select.ScrollUpButton className="SelectScrollButton">
53
53
  <ChevronUpIcon />
54
54
  </Select.ScrollUpButton>
55
55
  <Select.Viewport className="SelectViewport">
56
56
  <Select.Group>
57
- {options.map(
58
- (option) =>
59
- option.value !== value?.value && (
60
- <SelectItem
61
- onClick={() => {
62
- handleItemClick && handleItemClick(option);
63
- handleToggle();
64
- }}
65
- key={option.value}
66
- value={option.value}>
67
- <Select.ItemText>
68
- <Typography variant="body" size="small">
69
- {option.label}
70
- </Typography>
71
- </Select.ItemText>
72
- </SelectItem>
73
- )
74
- )}
57
+ {options.map((option) => (
58
+ <SelectItem
59
+ onClick={() => {
60
+ handleItemClick && handleItemClick(option);
61
+ handleToggle();
62
+ }}
63
+ key={option.value}
64
+ value={option.value}>
65
+ <Select.ItemText>
66
+ <Typography variant="body" size="small">
67
+ {option.label}
68
+ </Typography>
69
+ </Select.ItemText>
70
+ {option.value === value?.value && (
71
+ <DoneIcon size={14} color="secondary" />
72
+ )}
73
+ </SelectItem>
74
+ ))}
75
75
  </Select.Group>
76
76
  </Select.Viewport>
77
77
  <Select.ScrollDownButton className="SelectScrollButton">
package/src/components/Select/select.styles.ts CHANGED
@@ -9,92 +9,68 @@ export const SelectTrigger = styled(Select.Trigger, {
9
9
  justifyContent: 'space-between',
10
10
  alignItems: 'center',
11
11
  cursor: 'pointer',
12
- backgroundColor: '$secondary',
13
12
  padding: '$5 $10',
14
13
  border: 0,
14
+ outline: 0,
15
15
  whiteSpace: 'nowrap',
16
-
16
+ borderRadius: '$sm',
17
+ backgroundColor: '$neutral300',
18
+ [`.${darkTheme} &`]: {
19
+ backgroundColor: '$neutral400',
20
+ },
21
+ width: '100%',
22
+ '&:hover': {
23
+ backgroundColor: '$info100',
24
+ [`.${darkTheme} &`]: {
25
+ backgroundColor: '$neutral',
26
+ },
27
+ },
17
28
  '& svg': {
18
29
  transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
19
30
  },
20
-
31
+ '& ._typography': {
32
+ whiteSpace: 'nowrap',
33
+ },
21
34
  variants: {
22
35
  open: {
23
36
  true: {
24
- borderTopLeftRadius: '$sm',
25
- borderTopRightRadius: '$sm',
26
- '& ._typography, & svg': {
27
- color: '$secondary',
28
- },
29
-
30
37
  '& svg': {
31
38
  transform: 'rotate(180deg)',
32
39
  },
33
- backgroundColor: '$neutral100',
34
- [`.${darkTheme} &`]: {
35
- backgroundColor: '$neutral300',
36
- },
37
40
  },
38
41
  false: {
39
- borderRadius: '$md',
40
- '& ._typography, & svg': {
41
- color: '$background',
42
- [`.${darkTheme} &`]: {
43
- color: '$foreground',
44
- },
45
- },
46
42
  '& svg': {
47
43
  transform: 'rotate(0)',
48
44
  },
49
45
  },
50
46
  },
51
47
  },
52
- width: '100%',
53
- '& ._typography': {
54
- whiteSpace: 'nowrap',
55
- overflow: 'hidden',
56
- textOverflow: 'ellipsis',
57
- width: '52px',
58
- '@xs': {
59
- width: 'auto',
60
- },
61
- },
62
48
  });
63
49
 
64
50
  export const SelectContent = styled(Select.Content, {
65
- padding: '$5 $10',
66
- width: '100%',
67
- position: 'absolute',
68
- top: '38px',
69
- maxHeight: '146px',
51
+ width: 'var(--radix-select-trigger-width)',
52
+ maxHeight: 'var(--radix-select-content-available-height)',
70
53
  overflowY: 'auto',
71
- borderBottomLeftRadius: '$sm',
72
- borderBottomRightRadius: '$sm',
54
+ borderRadius: '$sm',
73
55
  boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
74
- backgroundColor: '$neutral100',
75
- [`.${darkTheme} &`]: {
76
- backgroundColor: '$neutral300',
77
- },
56
+ backgroundColor: '$background',
78
57
  });
79
58
 
80
59
  export const SelectItem = styled(Select.Item, {
81
- padding: '$10 0',
82
- borderTop: '1px solid',
83
- borderColor: '$neutral300',
84
- [`.${darkTheme} &`]: {
85
- borderColor: '$neutral400',
86
- },
60
+ padding: '$10',
87
61
  listStyleType: 'none',
62
+ display: 'flex',
63
+ justifyContent: 'space-between',
64
+ alignItems: 'center',
88
65
  cursor: 'pointer',
89
- '&:hover': {
90
- '& ._typography': {
91
- color: '$colors$secondary',
92
- },
93
- },
94
66
  '&:focus': {
95
67
  outline: 'none',
96
- '& ._typography': {
97
- color: '$colors$secondary',
68
+ },
69
+
70
+ '&:hover': {
71
+ backgroundColor: '$info100',
72
+ [`.${darkTheme} &`]: {
73
+ backgroundColor: '$neutral',
98
74
  },
99
75
  },
100
76
  });