@lets-events/react 10.0.1 → 10.1.1

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 (47) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +19 -18
  3. package/CHANGELOG.md +12 -0
  4. package/dist/index.d.mts +426 -1
  5. package/dist/index.d.ts +426 -1
  6. package/dist/index.js +340 -20
  7. package/dist/index.mjs +331 -19
  8. package/package.json +3 -1
  9. package/src/components/Alert.tsx +303 -303
  10. package/src/components/Avatar.tsx +55 -55
  11. package/src/components/Badge.tsx +128 -128
  12. package/src/components/Box.tsx +3 -3
  13. package/src/components/Button/index.tsx +12 -12
  14. package/src/components/Button/styledComponents.ts +250 -250
  15. package/src/components/ButtonGroup.tsx +484 -484
  16. package/src/components/Calendar/index.tsx +136 -136
  17. package/src/components/Calendar/styledComponents.ts +208 -208
  18. package/src/components/Card.tsx +69 -69
  19. package/src/components/CheckboxGroup.tsx +214 -214
  20. package/src/components/Container.tsx +39 -39
  21. package/src/components/Dropdown.tsx +167 -167
  22. package/src/components/Filter.tsx +164 -164
  23. package/src/components/Flex.tsx +118 -118
  24. package/src/components/Grid.tsx +137 -137
  25. package/src/components/Icon.tsx +47 -47
  26. package/src/components/Modal.tsx +90 -90
  27. package/src/components/RadioGroup.tsx +210 -210
  28. package/src/components/Section.tsx +33 -33
  29. package/src/components/Step.tsx +164 -164
  30. package/src/components/Switch.tsx +108 -108
  31. package/src/components/Text.tsx +30 -30
  32. package/src/components/TextField.tsx +299 -299
  33. package/src/components/TextareaField.tsx +101 -101
  34. package/src/components/TimePicker.tsx +280 -239
  35. package/src/components/Toast/components/ToastItem.tsx +41 -0
  36. package/src/components/Toast/components/ToastProvider.tsx +63 -0
  37. package/src/components/Toast/hooks/useToast.ts +12 -0
  38. package/src/components/Toast/index.tsx +5 -0
  39. package/src/components/Toast/styles/index.ts +135 -0
  40. package/src/components/Toast/types/index.ts +46 -0
  41. package/src/components/Tooltip/index.tsx +67 -0
  42. package/src/components/Tooltip/styles.ts +78 -0
  43. package/src/hooks/useOnClickOutside.tsx +20 -20
  44. package/src/index.tsx +33 -31
  45. package/src/styles/index.ts +38 -38
  46. package/src/types/typographyValues.ts +178 -178
  47. package/tsconfig.json +3 -3
package/src/components/Flex.tsx CHANGED
@@ -1,119 +1,119 @@
1
- import { ComponentProps, ElementType } from 'react';
2
- import { styled } from '../styles'
3
- import { Flex as FlexRadix } from "@radix-ui/themes";
4
- export const FlexStyled = styled(FlexRadix, {
5
- variants: {
6
- display: {
7
- 'flex': { display: 'flex' },
8
- 'inline-flex': { display: 'inline-flex' }
9
- },
10
- align: {
11
- start: { alignItems: 'flex-start' },
12
- center: { alignItems: 'center' },
13
- end: { alignItems: 'flex-end' },
14
- stretch: { alignItems: 'stretch' },
15
- baseline: { alignItems: 'baseline' },
16
- },
17
- justify: {
18
- start: { justifyContent: 'flex-start' },
19
- center: { justifyContent: 'center' },
20
- end: { justifyContent: 'flex-end' },
21
- between: { justifyContent: 'space-between' },
22
- around: { justifyContent: 'space-around' },
23
- evenly: { justifyContent: 'space-evenly' },
24
- },
25
- direction: {
26
- row: { flexDirection: 'row' },
27
- column: { flexDirection: 'column' },
28
- 'row-reverse': { flexDirection: 'row-reverse' },
29
- 'column-reverse': { flexDirection: 'column-reverse' },
30
- },
31
- gap: {
32
- 0: { gap: '0px' },
33
- 2: { gap: '$2' },
34
- 4: { gap: '$4' },
35
- 6: { gap: '$6' },
36
- 8: { gap: '$8' },
37
- 10: { gap: '$10' },
38
- 12: { gap: '$12' },
39
- 14: { gap: '$14' },
40
- 16: { gap: '$16' },
41
- 20: { gap: '$20' },
42
- 22: { gap: '$22' },
43
- 24: { gap: '$24' },
44
- 32: { gap: '$32' },
45
- 36: { gap: '$36' },
46
- 40: { gap: '$40' },
47
- 48: { gap: '$48' },
48
- 56: { gap: '$56' },
49
- 64: { gap: '$64' },
50
- 72: { gap: '$72' },
51
- 80: { gap: '$80' },
52
- full: { gap: '$full' },
53
- },
54
- gapY: {
55
- 2: { gap: '$2' },
56
- 4: { gap: '$4' },
57
- 6: { gap: '$6' },
58
- 8: { gap: '$8' },
59
- 10: { gap: '$10' },
60
- 12: { gap: '$12' },
61
- 14: { gap: '$14' },
62
- 16: { gap: '$16' },
63
- 20: { gap: '$20' },
64
- 22: { gap: '$22' },
65
- 24: { gap: '$24' },
66
- 32: { gap: '$32' },
67
- 36: { gap: '$36' },
68
- 40: { gap: '$40' },
69
- 48: { gap: '$48' },
70
- 56: { gap: '$56' },
71
- 64: { gap: '$64' },
72
- 72: { gap: '$72' },
73
- 80: { gap: '$80' },
74
- full: { gap: '$full' },
75
- },
76
- gapX: {
77
- 2: { gap: '$2' },
78
- 4: { gap: '$4' },
79
- 6: { gap: '$6' },
80
- 8: { gap: '$8' },
81
- 10: { gap: '$10' },
82
- 12: { gap: '$12' },
83
- 14: { gap: '$14' },
84
- 16: { gap: '$16' },
85
- 20: { gap: '$20' },
86
- 22: { gap: '$22' },
87
- 24: { gap: '$24' },
88
- 32: { gap: '$32' },
89
- 36: { gap: '$36' },
90
- 40: { gap: '$40' },
91
- 48: { gap: '$48' },
92
- 56: { gap: '$56' },
93
- 64: { gap: '$64' },
94
- 72: { gap: '$72' },
95
- 80: { gap: '$80' },
96
- full: { gap: '$full' },
97
- }
98
- },
99
- defaultVariants: {
100
- display: 'flex',
101
- direction: 'row',
102
- gap: 10,
103
- }
104
-
105
- })
106
-
107
- export type FlexProps = ComponentProps<typeof FlexStyled> & {
108
- as?: ElementType,
109
- children: React.ReactNode
110
- }
111
-
112
-
113
- export function Flex({ children, ...props }: FlexProps) {
114
- return (
115
- <FlexStyled {...props}>
116
- {children}
117
- </FlexStyled>
118
- )
1
+ import { ComponentProps, ElementType } from 'react';
2
+ import { styled } from '../styles'
3
+ import { Flex as FlexRadix } from "@radix-ui/themes";
4
+ export const FlexStyled = styled(FlexRadix, {
5
+ variants: {
6
+ display: {
7
+ 'flex': { display: 'flex' },
8
+ 'inline-flex': { display: 'inline-flex' }
9
+ },
10
+ align: {
11
+ start: { alignItems: 'flex-start' },
12
+ center: { alignItems: 'center' },
13
+ end: { alignItems: 'flex-end' },
14
+ stretch: { alignItems: 'stretch' },
15
+ baseline: { alignItems: 'baseline' },
16
+ },
17
+ justify: {
18
+ start: { justifyContent: 'flex-start' },
19
+ center: { justifyContent: 'center' },
20
+ end: { justifyContent: 'flex-end' },
21
+ between: { justifyContent: 'space-between' },
22
+ around: { justifyContent: 'space-around' },
23
+ evenly: { justifyContent: 'space-evenly' },
24
+ },
25
+ direction: {
26
+ row: { flexDirection: 'row' },
27
+ column: { flexDirection: 'column' },
28
+ 'row-reverse': { flexDirection: 'row-reverse' },
29
+ 'column-reverse': { flexDirection: 'column-reverse' },
30
+ },
31
+ gap: {
32
+ 0: { gap: '0px' },
33
+ 2: { gap: '$2' },
34
+ 4: { gap: '$4' },
35
+ 6: { gap: '$6' },
36
+ 8: { gap: '$8' },
37
+ 10: { gap: '$10' },
38
+ 12: { gap: '$12' },
39
+ 14: { gap: '$14' },
40
+ 16: { gap: '$16' },
41
+ 20: { gap: '$20' },
42
+ 22: { gap: '$22' },
43
+ 24: { gap: '$24' },
44
+ 32: { gap: '$32' },
45
+ 36: { gap: '$36' },
46
+ 40: { gap: '$40' },
47
+ 48: { gap: '$48' },
48
+ 56: { gap: '$56' },
49
+ 64: { gap: '$64' },
50
+ 72: { gap: '$72' },
51
+ 80: { gap: '$80' },
52
+ full: { gap: '$full' },
53
+ },
54
+ gapY: {
55
+ 2: { gap: '$2' },
56
+ 4: { gap: '$4' },
57
+ 6: { gap: '$6' },
58
+ 8: { gap: '$8' },
59
+ 10: { gap: '$10' },
60
+ 12: { gap: '$12' },
61
+ 14: { gap: '$14' },
62
+ 16: { gap: '$16' },
63
+ 20: { gap: '$20' },
64
+ 22: { gap: '$22' },
65
+ 24: { gap: '$24' },
66
+ 32: { gap: '$32' },
67
+ 36: { gap: '$36' },
68
+ 40: { gap: '$40' },
69
+ 48: { gap: '$48' },
70
+ 56: { gap: '$56' },
71
+ 64: { gap: '$64' },
72
+ 72: { gap: '$72' },
73
+ 80: { gap: '$80' },
74
+ full: { gap: '$full' },
75
+ },
76
+ gapX: {
77
+ 2: { gap: '$2' },
78
+ 4: { gap: '$4' },
79
+ 6: { gap: '$6' },
80
+ 8: { gap: '$8' },
81
+ 10: { gap: '$10' },
82
+ 12: { gap: '$12' },
83
+ 14: { gap: '$14' },
84
+ 16: { gap: '$16' },
85
+ 20: { gap: '$20' },
86
+ 22: { gap: '$22' },
87
+ 24: { gap: '$24' },
88
+ 32: { gap: '$32' },
89
+ 36: { gap: '$36' },
90
+ 40: { gap: '$40' },
91
+ 48: { gap: '$48' },
92
+ 56: { gap: '$56' },
93
+ 64: { gap: '$64' },
94
+ 72: { gap: '$72' },
95
+ 80: { gap: '$80' },
96
+ full: { gap: '$full' },
97
+ }
98
+ },
99
+ defaultVariants: {
100
+ display: 'flex',
101
+ direction: 'row',
102
+ gap: 10,
103
+ }
104
+
105
+ })
106
+
107
+ export type FlexProps = ComponentProps<typeof FlexStyled> & {
108
+ as?: ElementType,
109
+ children: React.ReactNode
110
+ }
111
+
112
+
113
+ export function Flex({ children, ...props }: FlexProps) {
114
+ return (
115
+ <FlexStyled {...props}>
116
+ {children}
117
+ </FlexStyled>
118
+ )
119
119
  }
package/src/components/Grid.tsx CHANGED
@@ -1,138 +1,138 @@
1
- import { ComponentProps, ElementType } from 'react';
2
- import { styled } from '../styles'
3
- import { Grid as GridRadix } from "@radix-ui/themes";
4
- export const GridStyled = styled(GridRadix, {
5
- display: 'grid',
6
- variants: {
7
- display: {
8
- 'grid': { display: 'grid' },
9
- 'inline-grid': { display: 'inline-grid' },
10
- },
11
- align: {
12
- start: { alignItems: 'start' },
13
- center: { alignItems: 'center' },
14
- end: { alignItems: 'end' },
15
- stretch: { alignItems: 'stretch' },
16
- },
17
- justify: {
18
- start: { justifyContent: 'start' },
19
- center: { justifyContent: 'center' },
20
- end: { justifyContent: 'end' },
21
- between: { justifyContent: 'space-between' },
22
- },
23
- flow: {
24
- row: { gridAutoFlow: 'row' },
25
- column: { gridAutoFlow: 'column' },
26
- 'row-dense': { gridAutoFlow: 'row dense' },
27
- 'column-dense': { gridAutoFlow: 'column dense' },
28
- },
29
- columns: {
30
- 1: { gridTemplateColumns: 'repeat(1, 1fr)' },
31
- 2: { gridTemplateColumns: 'repeat(2, 1fr)' },
32
- 3: { gridTemplateColumns: 'repeat(3, 1fr)' },
33
- 4: { gridTemplateColumns: 'repeat(4, 1fr)' },
34
- 6: { gridTemplateColumns: 'repeat(6, 1fr)' },
35
- 12: { gridTemplateColumns: 'repeat(12, 1fr)' },
36
- },
37
- rows: {
38
- 1: { gridTemplateRows: 'repeat(1, 1fr)' },
39
- 2: { gridTemplateRows: 'repeat(2, 1fr)' },
40
- 3: { gridTemplateRows: 'repeat(3, 1fr)' },
41
- 4: { gridTemplateRows: 'repeat(4, 1fr)' },
42
- 5: { gridTemplateRows: 'repeat(5, 1fr)' },
43
- 6: { gridTemplateRows: 'repeat(6, 1fr)' },
44
- 7: { gridTemplateRows: 'repeat(7, 1fr)' },
45
- 8: { gridTemplateRows: 'repeat(8, 1fr)' },
46
- 9: { gridTemplateRows: 'repeat(9, 1fr)' },
47
- 10: { gridTemplateRows: 'repeat(10, 1fr)' },
48
- 11: { gridTemplateRows: 'repeat(11, 1fr)' },
49
- 12: { gridTemplateRows: 'repeat(12, 1fr)' },
50
- auto: { gridTemplateRows: 'auto' },
51
- },
52
- gap: {
53
- 2: { gap: '$2' },
54
- 4: { gap: '$4' },
55
- 6: { gap: '$6' },
56
- 8: { gap: '$8' },
57
- 10: { gap: '$10' },
58
- 12: { gap: '$12' },
59
- 14: { gap: '$14' },
60
- 16: { gap: '$16' },
61
- 20: { gap: '$20' },
62
- 22: { gap: '$22' },
63
- 24: { gap: '$24' },
64
- 32: { gap: '$32' },
65
- 36: { gap: '$36' },
66
- 40: { gap: '$40' },
67
- 48: { gap: '$48' },
68
- 56: { gap: '$56' },
69
- 64: { gap: '$64' },
70
- 72: { gap: '$72' },
71
- 80: { gap: '$80' },
72
- full: { gap: '$full' },
73
- },
74
- gapX: {
75
- 2: { gap: '$2' },
76
- 4: { gap: '$4' },
77
- 6: { gap: '$6' },
78
- 8: { gap: '$8' },
79
- 10: { gap: '$10' },
80
- 12: { gap: '$12' },
81
- 14: { gap: '$14' },
82
- 16: { gap: '$16' },
83
- 20: { gap: '$20' },
84
- 22: { gap: '$22' },
85
- 24: { gap: '$24' },
86
- 32: { gap: '$32' },
87
- 36: { gap: '$36' },
88
- 40: { gap: '$40' },
89
- 48: { gap: '$48' },
90
- 56: { gap: '$56' },
91
- 64: { gap: '$64' },
92
- 72: { gap: '$72' },
93
- 80: { gap: '$80' },
94
- full: { gap: '$full' },
95
- },
96
- gapY: {
97
- 2: { gap: '$2' },
98
- 4: { gap: '$4' },
99
- 6: { gap: '$6' },
100
- 8: { gap: '$8' },
101
- 10: { gap: '$10' },
102
- 12: { gap: '$12' },
103
- 14: { gap: '$14' },
104
- 16: { gap: '$16' },
105
- 20: { gap: '$20' },
106
- 22: { gap: '$22' },
107
- 24: { gap: '$24' },
108
- 32: { gap: '$32' },
109
- 36: { gap: '$36' },
110
- 40: { gap: '$40' },
111
- 48: { gap: '$48' },
112
- 56: { gap: '$56' },
113
- 64: { gap: '$64' },
114
- 72: { gap: '$72' },
115
- 80: { gap: '$80' },
116
- full: { gap: '$full' },
117
- },
118
- },
119
- defaultVariants: {
120
- gap: 10,
121
- }
122
-
123
- })
124
-
125
- export type GridProps = ComponentProps<typeof GridStyled> & {
126
- as?: ElementType
127
- children: React.ReactNode,
128
- areas?: string
129
- }
130
-
131
-
132
- export function Grid({ children, ...props }: GridProps) {
133
- return (
134
- <GridStyled {...props}>
135
- {children}
136
- </GridStyled>
137
- )
1
+ import { ComponentProps, ElementType } from 'react';
2
+ import { styled } from '../styles'
3
+ import { Grid as GridRadix } from "@radix-ui/themes";
4
+ export const GridStyled = styled(GridRadix, {
5
+ display: 'grid',
6
+ variants: {
7
+ display: {
8
+ 'grid': { display: 'grid' },
9
+ 'inline-grid': { display: 'inline-grid' },
10
+ },
11
+ align: {
12
+ start: { alignItems: 'start' },
13
+ center: { alignItems: 'center' },
14
+ end: { alignItems: 'end' },
15
+ stretch: { alignItems: 'stretch' },
16
+ },
17
+ justify: {
18
+ start: { justifyContent: 'start' },
19
+ center: { justifyContent: 'center' },
20
+ end: { justifyContent: 'end' },
21
+ between: { justifyContent: 'space-between' },
22
+ },
23
+ flow: {
24
+ row: { gridAutoFlow: 'row' },
25
+ column: { gridAutoFlow: 'column' },
26
+ 'row-dense': { gridAutoFlow: 'row dense' },
27
+ 'column-dense': { gridAutoFlow: 'column dense' },
28
+ },
29
+ columns: {
30
+ 1: { gridTemplateColumns: 'repeat(1, 1fr)' },
31
+ 2: { gridTemplateColumns: 'repeat(2, 1fr)' },
32
+ 3: { gridTemplateColumns: 'repeat(3, 1fr)' },
33
+ 4: { gridTemplateColumns: 'repeat(4, 1fr)' },
34
+ 6: { gridTemplateColumns: 'repeat(6, 1fr)' },
35
+ 12: { gridTemplateColumns: 'repeat(12, 1fr)' },
36
+ },
37
+ rows: {
38
+ 1: { gridTemplateRows: 'repeat(1, 1fr)' },
39
+ 2: { gridTemplateRows: 'repeat(2, 1fr)' },
40
+ 3: { gridTemplateRows: 'repeat(3, 1fr)' },
41
+ 4: { gridTemplateRows: 'repeat(4, 1fr)' },
42
+ 5: { gridTemplateRows: 'repeat(5, 1fr)' },
43
+ 6: { gridTemplateRows: 'repeat(6, 1fr)' },
44
+ 7: { gridTemplateRows: 'repeat(7, 1fr)' },
45
+ 8: { gridTemplateRows: 'repeat(8, 1fr)' },
46
+ 9: { gridTemplateRows: 'repeat(9, 1fr)' },
47
+ 10: { gridTemplateRows: 'repeat(10, 1fr)' },
48
+ 11: { gridTemplateRows: 'repeat(11, 1fr)' },
49
+ 12: { gridTemplateRows: 'repeat(12, 1fr)' },
50
+ auto: { gridTemplateRows: 'auto' },
51
+ },
52
+ gap: {
53
+ 2: { gap: '$2' },
54
+ 4: { gap: '$4' },
55
+ 6: { gap: '$6' },
56
+ 8: { gap: '$8' },
57
+ 10: { gap: '$10' },
58
+ 12: { gap: '$12' },
59
+ 14: { gap: '$14' },
60
+ 16: { gap: '$16' },
61
+ 20: { gap: '$20' },
62
+ 22: { gap: '$22' },
63
+ 24: { gap: '$24' },
64
+ 32: { gap: '$32' },
65
+ 36: { gap: '$36' },
66
+ 40: { gap: '$40' },
67
+ 48: { gap: '$48' },
68
+ 56: { gap: '$56' },
69
+ 64: { gap: '$64' },
70
+ 72: { gap: '$72' },
71
+ 80: { gap: '$80' },
72
+ full: { gap: '$full' },
73
+ },
74
+ gapX: {
75
+ 2: { gap: '$2' },
76
+ 4: { gap: '$4' },
77
+ 6: { gap: '$6' },
78
+ 8: { gap: '$8' },
79
+ 10: { gap: '$10' },
80
+ 12: { gap: '$12' },
81
+ 14: { gap: '$14' },
82
+ 16: { gap: '$16' },
83
+ 20: { gap: '$20' },
84
+ 22: { gap: '$22' },
85
+ 24: { gap: '$24' },
86
+ 32: { gap: '$32' },
87
+ 36: { gap: '$36' },
88
+ 40: { gap: '$40' },
89
+ 48: { gap: '$48' },
90
+ 56: { gap: '$56' },
91
+ 64: { gap: '$64' },
92
+ 72: { gap: '$72' },
93
+ 80: { gap: '$80' },
94
+ full: { gap: '$full' },
95
+ },
96
+ gapY: {
97
+ 2: { gap: '$2' },
98
+ 4: { gap: '$4' },
99
+ 6: { gap: '$6' },
100
+ 8: { gap: '$8' },
101
+ 10: { gap: '$10' },
102
+ 12: { gap: '$12' },
103
+ 14: { gap: '$14' },
104
+ 16: { gap: '$16' },
105
+ 20: { gap: '$20' },
106
+ 22: { gap: '$22' },
107
+ 24: { gap: '$24' },
108
+ 32: { gap: '$32' },
109
+ 36: { gap: '$36' },
110
+ 40: { gap: '$40' },
111
+ 48: { gap: '$48' },
112
+ 56: { gap: '$56' },
113
+ 64: { gap: '$64' },
114
+ 72: { gap: '$72' },
115
+ 80: { gap: '$80' },
116
+ full: { gap: '$full' },
117
+ },
118
+ },
119
+ defaultVariants: {
120
+ gap: 10,
121
+ }
122
+
123
+ })
124
+
125
+ export type GridProps = ComponentProps<typeof GridStyled> & {
126
+ as?: ElementType
127
+ children: React.ReactNode,
128
+ areas?: string
129
+ }
130
+
131
+
132
+ export function Grid({ children, ...props }: GridProps) {
133
+ return (
134
+ <GridStyled {...props}>
135
+ {children}
136
+ </GridStyled>
137
+ )
138
138
  }
package/src/components/Icon.tsx CHANGED
@@ -1,48 +1,48 @@
1
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2
- import { library } from "@fortawesome/fontawesome-svg-core";
3
- import { fas } from "@fortawesome/free-solid-svg-icons";
4
- import { far } from "@fortawesome/free-regular-svg-icons";
5
- import { fab } from "@fortawesome/free-brands-svg-icons";
6
- import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
7
- import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
8
- import PropTypes from "prop-types";
9
-
10
- library.add(fas, far, fab);
11
-
12
- interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
13
- name: IconName;
14
- size?: 'xs' | 'sm' | 'md' | 'xl';
15
- prefix?: IconPrefix;
16
- }
17
-
18
- export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
19
- const sizeMap = {
20
-
21
- 'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
22
- 'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
23
- 'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
24
- 'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
25
- undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
26
- } as const;
27
-
28
- return (
29
- <FontAwesomeIcon
30
- icon={[prefix, name]}
31
- style={sizeMap[size]}
32
- color={color}
33
- className={className}
34
- {...props}
35
- width={sizeMap[size]?.width}
36
- height={sizeMap[size]?.height}
37
- />
38
- );
39
- };
40
- Icon.propTypes = {
41
- name: PropTypes.string.isRequired,
42
- prefix: PropTypes.string,
43
- size: PropTypes.string,
44
- color: PropTypes.string,
45
- className: PropTypes.string,
46
- };
47
-
1
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2
+ import { library } from "@fortawesome/fontawesome-svg-core";
3
+ import { fas } from "@fortawesome/free-solid-svg-icons";
4
+ import { far } from "@fortawesome/free-regular-svg-icons";
5
+ import { fab } from "@fortawesome/free-brands-svg-icons";
6
+ import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
7
+ import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
8
+ import PropTypes from "prop-types";
9
+
10
+ library.add(fas, far, fab);
11
+
12
+ interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
13
+ name: IconName;
14
+ size?: 'xs' | 'sm' | 'md' | 'xl';
15
+ prefix?: IconPrefix;
16
+ }
17
+
18
+ export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
19
+ const sizeMap = {
20
+
21
+ 'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
22
+ 'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
23
+ 'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
24
+ 'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
25
+ undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
26
+ } as const;
27
+
28
+ return (
29
+ <FontAwesomeIcon
30
+ icon={[prefix, name]}
31
+ style={sizeMap[size]}
32
+ color={color}
33
+ className={className}
34
+ {...props}
35
+ width={sizeMap[size]?.width}
36
+ height={sizeMap[size]?.height}
37
+ />
38
+ );
39
+ };
40
+ Icon.propTypes = {
41
+ name: PropTypes.string.isRequired,
42
+ prefix: PropTypes.string,
43
+ size: PropTypes.string,
44
+ color: PropTypes.string,
45
+ className: PropTypes.string,
46
+ };
47
+
48
48
  export default Icon;