@julseb-lib/react 0.0.90 → 0.0.92

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 (8) hide show
  1. package/dist/index.cjs.js +454 -453
  2. package/dist/index.es.js +1092 -1089
  3. package/dist/index.umd.js +306 -305
  4. package/dist/lib/components/Aside/styles.tsx +28 -29
  5. package/dist/lib/components/Avatar/Avatar.tsx +104 -102
  6. package/dist/lib/components/Main/styles.tsx +42 -42
  7. package/dist/lib/components/Wrapper/styles.tsx +21 -19
  8. package/package.json +1 -1
package/dist/lib/components/Aside/styles.tsx CHANGED
@@ -4,43 +4,42 @@ import { setDefaultTheme, LAYOUTS, Mixins, SPACERS, MEDIA } from "../../"
4
4
  import type { LibAsideSize } from "../../types"
5
5
 
6
6
  const getAsideSize = (size: LibAsideSize) => {
7
- if (typeof size === "number") return stringifyPx(size)
7
+ if (typeof size === "number") return stringifyPx(size)
8
8
 
9
- const sizesMap = new Map<LibAsideSize, LAYOUTS>([
10
- ["default", LAYOUTS.ASIDE_DEFAULT],
11
- ["small", LAYOUTS.ASIDE_SMALL],
12
- ])
9
+ const sizesMap = new Map<LibAsideSize, LAYOUTS>([
10
+ ["default", LAYOUTS.ASIDE_DEFAULT],
11
+ ["small", LAYOUTS.ASIDE_SMALL],
12
+ ])
13
13
 
14
- return sizesMap.get(size)
14
+ return sizesMap.get(size)
15
15
  }
16
16
 
17
17
  const StyledAside = styled.aside<{
18
- $size?: LibAsideSize
18
+ $size?: LibAsideSize
19
19
  }>`
20
- position: relative;
21
- width: 100%;
22
- height: 100%;
23
- min-height: 100%;
24
- max-width: ${({ $size }) => getAsideSize($size || "default")};
25
- padding: ${SPACERS.XXL} 0;
26
- ${Mixins.Flexbox({
27
- $flexDirection: "column",
28
- $alignItems: "flex-start",
29
- $gap: "l",
30
- })}
31
- ${Mixins.StretchTags}
20
+ position: relative;
21
+ width: 100%;
22
+ min-height: 100%;
23
+ max-width: ${({ $size }) => getAsideSize($size || "default")};
24
+ padding: ${SPACERS.XXL} 0;
25
+ ${Mixins.Flexbox({
26
+ $flexDirection: "column",
27
+ $alignItems: "flex-start",
28
+ $gap: "l",
29
+ })}
30
+ ${Mixins.StretchTags}
32
31
 
33
32
  & > * {
34
- flex-shrink: 0;
35
- }
36
-
37
- @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
38
- width: 100%;
39
- max-width: ${({ $size }) => getAsideSize($size || "default")};
40
- height: unset;
41
- min-height: unset;
42
- padding: ${SPACERS.L} 0;
43
- }
33
+ flex-shrink: 0;
34
+ }
35
+
36
+ @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
37
+ width: 100%;
38
+ max-width: unset;
39
+ height: unset;
40
+ min-height: unset;
41
+ padding: ${SPACERS.L} 0;
42
+ }
44
43
  `
45
44
 
46
45
  setDefaultTheme([StyledAside])
package/dist/lib/components/Avatar/Avatar.tsx CHANGED
@@ -35,111 +35,113 @@ import type { ILibAvatar } from "./types"
35
35
  * <Avatar icon={<UserIcon />} badge={{ content: 1, backgroundColor: "danger" }} />
36
36
  */
37
37
  export const Avatar: FC<ILibAvatar> = ({
38
- "data-testid": testid,
39
- as,
40
- ref,
41
- size = 32,
42
- border,
43
- borderRadius = "circle",
44
- badge,
45
- img,
46
- letter,
47
- icon,
48
- iconSize = roundIconSize(size),
49
- backgroundColor = "danger",
50
- contentColor = backgroundColor === "white"
51
- ? "primary"
52
- : backgroundColor === "black"
53
- ? "white"
54
- : "background",
55
- className,
56
- containerStyle,
57
- ...rest
38
+ "data-testid": testid,
39
+ as,
40
+ ref,
41
+ size = 32,
42
+ border,
43
+ borderRadius = "circle",
44
+ badge,
45
+ img,
46
+ letter,
47
+ icon,
48
+ iconSize = roundIconSize(size),
49
+ backgroundColor = "danger",
50
+ contentColor = backgroundColor === "white"
51
+ ? "primary"
52
+ : backgroundColor === "black"
53
+ ? "white"
54
+ : "background",
55
+ className,
56
+ containerStyle,
57
+ role = "img",
58
+ ...rest
58
59
  }) => {
59
- const isBadgeObject = typeof badge === "object"
60
- const badgeSize = isBadgeObject && badge.size ? badge.size : 8
60
+ const isBadgeObject = typeof badge === "object"
61
+ const badgeSize = isBadgeObject && badge.size ? badge.size : 8
61
62
 
62
- const avatarProps = {
63
- "data-testid": testid,
64
- as,
65
- className,
66
- hasBadge: !!badge,
67
- backgroundColor,
68
- border,
69
- borderRadius,
70
- size,
71
- contentColor,
72
- img,
73
- letter,
74
- icon,
75
- iconSize,
76
- ref,
77
- ...rest,
78
- }
63
+ const avatarProps = {
64
+ "data-testid": testid,
65
+ as,
66
+ className,
67
+ hasBadge: !!badge,
68
+ backgroundColor,
69
+ border,
70
+ borderRadius,
71
+ size,
72
+ contentColor,
73
+ img,
74
+ letter,
75
+ icon,
76
+ iconSize,
77
+ ref,
78
+ role,
79
+ ...rest,
80
+ }
79
81
 
80
- if (badge)
81
- return (
82
- <StyledAvatarContainer
83
- data-testid={testid}
84
- ref={ref}
85
- as={as}
86
- className={className}
87
- style={containerStyle}
88
- $backgroundColor={backgroundColor}
89
- $border={border}
90
- $borderRadius={borderRadius}
91
- $size={size}
92
- $contentColor={contentColor}
93
- >
94
- <AvatarFunction {...avatarProps} />
82
+ if (badge)
83
+ return (
84
+ <StyledAvatarContainer
85
+ data-testid={testid}
86
+ ref={ref}
87
+ as={as}
88
+ className={className}
89
+ style={containerStyle}
90
+ $backgroundColor={backgroundColor}
91
+ $border={border}
92
+ $borderRadius={borderRadius}
93
+ $size={size}
94
+ $contentColor={contentColor}
95
+ >
96
+ <AvatarFunction {...avatarProps} />
95
97
 
96
- <StyledBadge
97
- data-testid={testid && `${testid}.Badge`}
98
- className={classNames(
99
- { Badge: className },
100
- `Position${capitalize(
101
- isBadgeObject && badge.position
102
- ? badge.position
103
- : "top"
104
- )}`
105
- )}
106
- size={badgeSize}
107
- number={
108
- isBadgeObject && badge.content
109
- ? badge.content
110
- : undefined
111
- }
112
- backgroundColor={
113
- isBadgeObject && badge.backgroundColor
114
- ? badge.backgroundColor
115
- : undefined
116
- }
117
- contentColor={
118
- isBadgeObject && badge.contentColor
119
- ? badge.contentColor
120
- : undefined
121
- }
122
- padding={
123
- isBadgeObject && badge.padding
124
- ? badge.padding
125
- : undefined
126
- }
127
- $width={badgeSize}
128
- $paddingLeftRight={
129
- isBadgeObject &&
130
- typeof badge.padding === "object" &&
131
- badge.padding?.leftRight
132
- ? badge.padding?.leftRight
133
- : "0px"
134
- }
135
- $outline={
136
- isBadgeObject && badge.outline
137
- ? badge.outline
138
- : undefined
139
- }
140
- />
141
- </StyledAvatarContainer>
142
- )
98
+ <StyledBadge
99
+ data-testid={testid && `${testid}.Badge`}
100
+ className={classNames(
101
+ { Badge: className },
102
+ `Position${capitalize(
103
+ isBadgeObject && badge.position
104
+ ? badge.position
105
+ : "top"
106
+ )}`
107
+ )}
108
+ size={badgeSize}
109
+ number={
110
+ isBadgeObject && badge.content
111
+ ? badge.content
112
+ : undefined
113
+ }
114
+ backgroundColor={
115
+ isBadgeObject && badge.backgroundColor
116
+ ? badge.backgroundColor
117
+ : undefined
118
+ }
119
+ contentColor={
120
+ isBadgeObject && badge.contentColor
121
+ ? badge.contentColor
122
+ : undefined
123
+ }
124
+ padding={
125
+ isBadgeObject && badge.padding
126
+ ? badge.padding
127
+ : undefined
128
+ }
129
+ $width={badgeSize}
130
+ $paddingLeftRight={
131
+ isBadgeObject &&
132
+ typeof badge.padding === "object" &&
133
+ badge.padding?.leftRight
134
+ ? badge.padding?.leftRight
135
+ : "0px"
136
+ }
137
+ $outline={
138
+ isBadgeObject && badge.outline
139
+ ? badge.outline
140
+ : undefined
141
+ }
142
+ />
143
+ </StyledAvatarContainer>
144
+ )
143
145
 
144
- return <AvatarFunction {...avatarProps} />
146
+ return <AvatarFunction {...avatarProps} />
145
147
  }
package/dist/lib/components/Main/styles.tsx CHANGED
@@ -4,56 +4,56 @@ import { setDefaultTheme, Mixins, MEDIA, SPACERS, LAYOUTS } from "../../"
4
4
  import type { LibMainSize } from "../../types"
5
5
 
6
6
  const getMainSize = (size: LibMainSize) => {
7
- if (typeof size === "number") return stringifyPx(size)
7
+ if (typeof size === "number") return stringifyPx(size)
8
8
 
9
- const sizesMap = new Map<LibMainSize, LAYOUTS>([
10
- ["default", LAYOUTS.MAIN_DEFAULT],
11
- ["large", LAYOUTS.MAIN_LARGE],
12
- ["form", LAYOUTS.MAIN_FORM],
13
- ["full", LAYOUTS.MAIN_FULL],
14
- ])
9
+ const sizesMap = new Map<LibMainSize, LAYOUTS>([
10
+ ["default", LAYOUTS.MAIN_DEFAULT],
11
+ ["large", LAYOUTS.MAIN_LARGE],
12
+ ["form", LAYOUTS.MAIN_FORM],
13
+ ["full", LAYOUTS.MAIN_FULL],
14
+ ])
15
15
 
16
- return sizesMap.get(size)
16
+ return sizesMap.get(size)
17
17
  }
18
18
 
19
19
  const StyledMain = styled.main<{
20
- $size?: LibMainSize
21
- $contentSize?: Extract<LibMainSize, "default" | "large" | "form">
22
- $minHeight: string | number
20
+ $size?: LibMainSize
21
+ $contentSize?: Extract<LibMainSize, "default" | "large" | "form">
22
+ $minHeight: string | number
23
23
  }>`
24
- position: relative;
25
- width: 100%;
26
- height: 100%;
27
- min-height: 100%;
28
- max-width: ${({ $size }) => getMainSize($size || "default")};
29
- padding: ${SPACERS.XXL} 0;
30
- ${Mixins.Flexbox({
31
- $flexDirection: "column",
32
- $alignItems: "flex-start",
33
- $gap: "l",
34
- })}
35
- ${Mixins.StretchTags}
24
+ position: relative;
25
+ width: 100%;
26
+ min-height: 100%;
27
+ max-width: ${({ $size }) => getMainSize($size || "default")};
28
+ padding: ${SPACERS.XXL} 0;
29
+ ${Mixins.Flexbox({
30
+ $flexDirection: "column",
31
+ $alignItems: "flex-start",
32
+ $gap: "l",
33
+ })}
34
+ ${Mixins.StretchTags}
36
35
 
37
36
  & > * {
38
- flex-shrink: 0;
39
- }
40
-
41
- ${({ $size, $contentSize }) =>
42
- $size === "full" &&
43
- css`
44
- display: grid;
45
- grid-template-columns: 1fr ${getMainSize($contentSize || "default")} 1fr;
46
-
47
- & > * {
48
- grid-column: 2;
49
- }
50
- `}
51
-
52
- @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
53
- height: unset;
54
- min-height: unset;
55
- padding: ${SPACERS.L} 0;
56
- }
37
+ flex-shrink: 0;
38
+ }
39
+
40
+ ${({ $size, $contentSize }) =>
41
+ $size === "full" &&
42
+ css`
43
+ display: grid;
44
+ grid-template-columns: 1fr ${getMainSize($contentSize || "default")} 1fr;
45
+
46
+ & > * {
47
+ grid-column: 2;
48
+ }
49
+ `}
50
+
51
+ @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
52
+ height: unset;
53
+ min-height: unset;
54
+ max-width: unset;
55
+ padding: ${SPACERS.L} 0;
56
+ }
57
57
  `
58
58
 
59
59
  setDefaultTheme([StyledMain])
package/dist/lib/components/Wrapper/styles.tsx CHANGED
@@ -1,29 +1,31 @@
1
1
  import styled from "styled-components"
2
2
  import { stringifyPx } from "@julseb-lib/utils"
3
- import { MEDIA, Mixins, setDefaultTheme } from "../../"
3
+ import { MEDIA, Mixins, setDefaultTheme, SPACERS } from "../../"
4
4
  import type { LibAllColors, LibSpacers } from "../../types"
5
5
 
6
6
  const StyledWrapper = styled.section<{
7
- $gap: LibSpacers
8
- $backgroundColor: LibAllColors
9
- $minHeight: string | number
7
+ $gap: LibSpacers
8
+ $backgroundColor: LibAllColors
9
+ $minHeight: string | number
10
10
  }>`
11
- position: relative;
12
- background-color: ${({ $backgroundColor, theme }) =>
13
- Mixins.AllColors($backgroundColor, theme)};
14
- min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
15
- ${({ $gap }) =>
16
- Mixins.Flexbox({
17
- $gap,
18
- $justifyContent: "center",
19
- })}
11
+ position: relative;
12
+ background-color: ${({ $backgroundColor, theme }) =>
13
+ Mixins.AllColors($backgroundColor, theme)};
14
+ min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
15
+ padding: 0 ${SPACERS.XXL};
16
+ ${({ $gap }) =>
17
+ Mixins.Flexbox({
18
+ $gap,
19
+ $justifyContent: "center",
20
+ })}
20
21
 
21
- @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
22
- flex-direction: column;
23
- align-items: center;
24
- justify-content: flex-start;
25
- min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
26
- }
22
+ @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
23
+ flex-direction: column;
24
+ align-items: center;
25
+ justify-content: flex-start;
26
+ min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
27
+ padding: ${SPACERS.L} ${SPACERS.M};
28
+ }
27
29
  `
28
30
 
29
31
  setDefaultTheme([StyledWrapper])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.0.90",
3
+ "version": "0.0.92",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {