@bitrise/bitkit 13.191.0 → 13.193.0
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.
- package/package.json +1 -1
- package/src/Components/Dropdown/DropdownOption.tsx +9 -9
- package/src/Components/Icons/16x16/BrowserStackColor.tsx +69 -0
- package/src/Components/Icons/16x16/index.ts +1 -0
- package/src/Components/Icons/24x24/BrowserStackColor.tsx +69 -0
- package/src/Components/Icons/24x24/index.ts +1 -0
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ import { cx } from '@chakra-ui/utils';
|
|
|
4
4
|
import Text, { TextProps } from '../Text/Text';
|
|
5
5
|
import Divider from '../Divider/Divider';
|
|
6
6
|
import Box from '../Box/Box';
|
|
7
|
+
import Icon from '../Icon/Icon';
|
|
7
8
|
import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
|
|
8
9
|
|
|
9
10
|
export type DropdownOptionProps<T> = {
|
|
@@ -14,6 +15,7 @@ export type DropdownOptionProps<T> = {
|
|
|
14
15
|
onClick?: MouseEventHandler<HTMLElement>;
|
|
15
16
|
isDisabled?: boolean;
|
|
16
17
|
};
|
|
18
|
+
|
|
17
19
|
const DropdownOption = <T = string,>({
|
|
18
20
|
avatar,
|
|
19
21
|
children,
|
|
@@ -25,6 +27,7 @@ const DropdownOption = <T = string,>({
|
|
|
25
27
|
const { item } = useDropdownStyles();
|
|
26
28
|
const ctx = useDropdownContext<T | null>();
|
|
27
29
|
const { index } = rest as { index?: number };
|
|
30
|
+
const isSelected = value === ctx.formValue;
|
|
28
31
|
|
|
29
32
|
return (
|
|
30
33
|
<chakra.div
|
|
@@ -39,7 +42,7 @@ const DropdownOption = <T = string,>({
|
|
|
39
42
|
{...rest}
|
|
40
43
|
__css={item}
|
|
41
44
|
className={cx(
|
|
42
|
-
|
|
45
|
+
isSelected && 'bitkit-select__option-active',
|
|
43
46
|
index === ctx.activeIndex && 'bitkit-select__option-hover',
|
|
44
47
|
)}
|
|
45
48
|
{...ctx.getItemProps(
|
|
@@ -56,14 +59,11 @@ const DropdownOption = <T = string,>({
|
|
|
56
59
|
},
|
|
57
60
|
)}
|
|
58
61
|
>
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
) : (
|
|
65
|
-
children
|
|
66
|
-
)}
|
|
62
|
+
<Box display="flex" alignItems="center" gap="8">
|
|
63
|
+
{avatar && <Avatar size={ctx.size === 'lg' ? '32' : '24'} {...avatar} />}
|
|
64
|
+
<Box flex="1">{children}</Box>
|
|
65
|
+
{isSelected && <Icon name="Check" color="icon/interactive" />}
|
|
66
|
+
</Box>
|
|
67
67
|
</chakra.div>
|
|
68
68
|
);
|
|
69
69
|
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { useId } from 'react';
|
|
2
|
+
import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
|
|
3
|
+
|
|
4
|
+
const BrowserStackColor = forwardRef<IconProps, 'svg'>((props, ref) => {
|
|
5
|
+
const id = useId();
|
|
6
|
+
return (
|
|
7
|
+
<Icon ref={ref} viewBox="0 0 16 16" {...props}>
|
|
8
|
+
<path
|
|
9
|
+
d="M8.01626 15C11.8733 15 15 11.8733 15 8.01626C15 4.15924 11.8733 1.03252 8.01626 1.03252C4.15924 1.03252 1.03252 4.15924 1.03252 8.01626C1.03252 11.8733 4.15924 15 8.01626 15Z"
|
|
10
|
+
fill="#F4B960"
|
|
11
|
+
/>
|
|
12
|
+
<path
|
|
13
|
+
d="M7.30806 13.6161C10.7919 13.6161 13.6161 10.7919 13.6161 7.30806C13.6161 3.82422 10.7919 1 7.30806 1C3.82422 1 1 3.82422 1 7.30806C1 10.7919 3.82422 13.6161 7.30806 13.6161Z"
|
|
14
|
+
fill="#E66F32"
|
|
15
|
+
/>
|
|
16
|
+
<path
|
|
17
|
+
d="M8.17689 11.9747C11.1985 11.9747 13.648 9.52523 13.648 6.50362C13.648 3.48201 11.1985 1.03252 8.17689 1.03252C5.15528 1.03252 2.70578 3.48201 2.70578 6.50362C2.70578 9.52523 5.15528 11.9747 8.17689 11.9747Z"
|
|
18
|
+
fill="#E43C41"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
d="M8.59504 11.9422C11.3678 11.9422 13.6155 9.69449 13.6155 6.92178C13.6155 4.14906 11.3678 1.90134 8.59504 1.90134C5.82233 1.90134 3.5746 4.14906 3.5746 6.92178C3.5746 9.69449 5.82233 11.9422 8.59504 11.9422Z"
|
|
22
|
+
fill="#BDD041"
|
|
23
|
+
/>
|
|
24
|
+
<path
|
|
25
|
+
d="M8.24127 11.9747C10.8186 11.9747 12.9079 9.8854 12.9079 7.30807C12.9079 4.73074 10.8186 2.6414 8.24127 2.6414C5.66394 2.6414 3.5746 4.73074 3.5746 7.30807C3.5746 9.8854 5.66394 11.9747 8.24127 11.9747Z"
|
|
26
|
+
fill="#6DB54C"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
d="M7.50121 10.4296C9.65186 10.4296 11.3953 8.68614 11.3953 6.53549C11.3953 4.38484 9.65186 2.6414 7.50121 2.6414C5.35056 2.6414 3.60712 4.38484 3.60712 6.53549C3.60712 8.68614 5.35056 10.4296 7.50121 10.4296Z"
|
|
30
|
+
fill="#AEDAE6"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
d="M8.1125 9.17447C9.92554 9.17447 11.3953 7.70471 11.3953 5.89168C11.3953 4.07864 9.92554 2.60888 8.1125 2.60888C6.29947 2.60888 4.82971 4.07864 4.82971 5.89168C4.82971 7.70471 6.29947 9.17447 8.1125 9.17447Z"
|
|
34
|
+
fill="#56B8DE"
|
|
35
|
+
/>
|
|
36
|
+
<path
|
|
37
|
+
d="M8.53066 9.20699C10.1128 9.20699 11.3953 7.92444 11.3953 6.34235C11.3953 4.76025 10.1128 3.4777 8.53066 3.4777C6.94856 3.4777 5.66602 4.76025 5.66602 6.34235C5.66602 7.92444 6.94856 9.20699 8.53066 9.20699Z"
|
|
38
|
+
fill="#00B1D5"
|
|
39
|
+
/>
|
|
40
|
+
<path
|
|
41
|
+
d="M8.1125 9.17447C9.4633 9.17447 10.5583 8.07943 10.5583 6.72863C10.5583 5.37783 9.4633 4.28279 8.1125 4.28279C6.76171 4.28279 5.66667 5.37783 5.66667 6.72863C5.66667 8.07943 6.76171 9.17447 8.1125 9.17447Z"
|
|
42
|
+
fill={`url(#gradient_${id})`}
|
|
43
|
+
/>
|
|
44
|
+
<path
|
|
45
|
+
d="M8.1125 9.17447C9.4633 9.17447 10.5583 8.07943 10.5583 6.72863C10.5583 5.37783 9.4633 4.28279 8.1125 4.28279C6.76171 4.28279 5.66667 5.37783 5.66667 6.72863C5.66667 8.07943 6.76171 9.17447 8.1125 9.17447Z"
|
|
46
|
+
fill="#221F1F"
|
|
47
|
+
/>
|
|
48
|
+
<path
|
|
49
|
+
d="M9.53232 6.04208C9.707 5.65279 9.65149 5.24876 9.40835 5.13966C9.16521 5.03057 8.82651 5.25771 8.65183 5.64699C8.47715 6.03628 8.53266 6.4403 8.7758 6.5494C9.01894 6.6585 9.35765 6.43136 9.53232 6.04208Z"
|
|
50
|
+
fill="white"
|
|
51
|
+
/>
|
|
52
|
+
<defs>
|
|
53
|
+
<radialGradient
|
|
54
|
+
id={`gradient_${id}`}
|
|
55
|
+
cx="0"
|
|
56
|
+
cy="0"
|
|
57
|
+
r="1"
|
|
58
|
+
gradientUnits="userSpaceOnUse"
|
|
59
|
+
gradientTransform="translate(8.01112 8.09246) scale(7.05647)"
|
|
60
|
+
>
|
|
61
|
+
<stop stopColor="#797979" />
|
|
62
|
+
<stop offset="1" stopColor="#4C4C4C" />
|
|
63
|
+
</radialGradient>
|
|
64
|
+
</defs>
|
|
65
|
+
</Icon>
|
|
66
|
+
);
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
export default BrowserStackColor;
|
|
@@ -254,3 +254,4 @@ export { default as Xcode } from './Xcode';
|
|
|
254
254
|
export { default as XTwitter } from './XTwitter';
|
|
255
255
|
export { default as Slack } from './Slack';
|
|
256
256
|
export { default as SlackColor } from './SlackColor';
|
|
257
|
+
export { default as BrowserStackColor } from './BrowserStackColor';
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { useId } from 'react';
|
|
2
|
+
import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
|
|
3
|
+
|
|
4
|
+
const BrowserStackColor = forwardRef<IconProps, 'svg'>((props, ref) => {
|
|
5
|
+
const id = useId();
|
|
6
|
+
return (
|
|
7
|
+
<Icon ref={ref} viewBox="0 0 24 24" {...props}>
|
|
8
|
+
<path
|
|
9
|
+
d="M12.0232 22C17.5332 22 22 17.5332 22 12.0232C22 6.5132 17.5332 2.04645 12.0232 2.04645C6.51321 2.04645 2.04645 6.5132 2.04645 12.0232C2.04645 17.5332 6.51321 22 12.0232 22Z"
|
|
10
|
+
fill="#F4B960"
|
|
11
|
+
/>
|
|
12
|
+
<path
|
|
13
|
+
d="M11.0115 20.023C15.9884 20.023 20.023 15.9884 20.023 11.0115C20.023 6.0346 15.9884 2 11.0115 2C6.0346 2 2 6.0346 2 11.0115C2 15.9884 6.0346 20.023 11.0115 20.023Z"
|
|
14
|
+
fill="#E66F32"
|
|
15
|
+
/>
|
|
16
|
+
<path
|
|
17
|
+
d="M12.2527 17.6782C16.5693 17.6782 20.0686 14.1789 20.0686 9.86232C20.0686 5.54573 16.5693 2.04645 12.2527 2.04645C7.93611 2.04645 4.43683 5.54573 4.43683 9.86232C4.43683 14.1789 7.93611 17.6782 12.2527 17.6782Z"
|
|
18
|
+
fill="#E43C41"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
d="M12.8501 17.6317C16.8111 17.6317 20.0221 14.4207 20.0221 10.4597C20.0221 6.49866 16.8111 3.28763 12.8501 3.28763C8.88904 3.28763 5.678 6.49866 5.678 10.4597C5.678 14.4207 8.88904 17.6317 12.8501 17.6317Z"
|
|
22
|
+
fill="#BDD041"
|
|
23
|
+
/>
|
|
24
|
+
<path
|
|
25
|
+
d="M12.3447 17.6782C16.0266 17.6782 19.0113 14.6934 19.0113 11.0115C19.0113 7.32962 16.0266 4.34485 12.3447 4.34485C8.66277 4.34485 5.678 7.32962 5.678 11.0115C5.678 14.6934 8.66277 17.6782 12.3447 17.6782Z"
|
|
26
|
+
fill="#6DB54C"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
d="M11.2874 15.4708C14.3598 15.4708 16.8504 12.9802 16.8504 9.90784C16.8504 6.83549 14.3598 4.34485 11.2874 4.34485C8.21509 4.34485 5.72445 6.83549 5.72445 9.90784C5.72445 12.9802 8.21509 15.4708 11.2874 15.4708Z"
|
|
30
|
+
fill="#AEDAE6"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
d="M12.1607 13.6778C14.7508 13.6778 16.8504 11.5782 16.8504 8.98811C16.8504 6.39806 14.7508 4.2984 12.1607 4.2984C9.57067 4.2984 7.47101 6.39806 7.47101 8.98811C7.47101 11.5782 9.57067 13.6778 12.1607 13.6778Z"
|
|
34
|
+
fill="#56B8DE"
|
|
35
|
+
/>
|
|
36
|
+
<path
|
|
37
|
+
d="M12.7581 13.7243C15.0182 13.7243 16.8504 11.8921 16.8504 9.63192C16.8504 7.37178 15.0182 5.53958 12.7581 5.53958C10.4979 5.53958 8.66574 7.37178 8.66574 9.63192C8.66574 11.8921 10.4979 13.7243 12.7581 13.7243Z"
|
|
38
|
+
fill="#00B1D5"
|
|
39
|
+
/>
|
|
40
|
+
<path
|
|
41
|
+
d="M12.1607 13.6778C14.0904 13.6778 15.6548 12.1135 15.6548 10.1838C15.6548 8.25405 14.0904 6.68971 12.1607 6.68971C10.231 6.68971 8.66667 8.25405 8.66667 10.1838C8.66667 12.1135 10.231 13.6778 12.1607 13.6778Z"
|
|
42
|
+
fill={`url(#gradient_${id})`}
|
|
43
|
+
/>
|
|
44
|
+
<path
|
|
45
|
+
d="M12.1607 13.6778C14.0904 13.6778 15.6548 12.1135 15.6548 10.1838C15.6548 8.25405 14.0904 6.68971 12.1607 6.68971C10.231 6.68971 8.66667 8.25405 8.66667 10.1838C8.66667 12.1135 10.231 13.6778 12.1607 13.6778Z"
|
|
46
|
+
fill="#221F1F"
|
|
47
|
+
/>
|
|
48
|
+
<path
|
|
49
|
+
d="M14.189 9.20297C14.4386 8.64684 14.3593 8.06966 14.0119 7.91381C13.6646 7.75795 13.1807 8.08244 12.9312 8.63856C12.6816 9.19469 12.7609 9.77186 13.1083 9.92772C13.4556 10.0836 13.9395 9.75909 14.189 9.20297Z"
|
|
50
|
+
fill="white"
|
|
51
|
+
/>
|
|
52
|
+
<defs>
|
|
53
|
+
<radialGradient
|
|
54
|
+
id={`gradient_${id}`}
|
|
55
|
+
cx="0"
|
|
56
|
+
cy="0"
|
|
57
|
+
r="1"
|
|
58
|
+
gradientUnits="userSpaceOnUse"
|
|
59
|
+
gradientTransform="translate(12.0159 12.1321) scale(10.0807)"
|
|
60
|
+
>
|
|
61
|
+
<stop stopColor="#797979" />
|
|
62
|
+
<stop offset="1" stopColor="#4C4C4C" />
|
|
63
|
+
</radialGradient>
|
|
64
|
+
</defs>
|
|
65
|
+
</Icon>
|
|
66
|
+
);
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
export default BrowserStackColor;
|
|
@@ -254,3 +254,4 @@ export { default as Xcode } from './Xcode';
|
|
|
254
254
|
export { default as XTwitter } from './XTwitter';
|
|
255
255
|
export { default as Slack } from './Slack';
|
|
256
256
|
export { default as SlackColor } from './SlackColor';
|
|
257
|
+
export { default as BrowserStackColor } from './BrowserStackColor';
|