@julseb-lib/react 0.0.89 → 0.0.91

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 (12) hide show
  1. package/dist/index.cjs.js +286 -295
  2. package/dist/index.css +679 -570
  3. package/dist/index.es.js +1303 -1323
  4. package/dist/index.umd.js +926 -935
  5. package/dist/lib/components/Aside/styles.tsx +0 -1
  6. package/dist/lib/components/Avatar/Avatar.tsx +104 -102
  7. package/dist/lib/components/Avatar/AvatarFunction.tsx +99 -106
  8. package/dist/lib/components/Avatar/styles.tsx +62 -89
  9. package/dist/lib/components/Badge/Badge.tsx +54 -52
  10. package/dist/lib/components/Main/styles.tsx +41 -42
  11. package/dist/lib/index.css +679 -570
  12. package/package.json +1 -1
package/dist/lib/components/Badge/Badge.tsx CHANGED
@@ -33,65 +33,67 @@ import type { ILibBadge } from "./types"
33
33
  * <Badge icon={<CustomIcon />} size={24} />
34
34
  */
35
35
  export const Badge: FC<ILibBadge> = ({
36
- "data-testid": testid,
37
- className,
38
- ref,
39
- id,
40
- as,
41
- size = 16,
42
- icon,
43
- iconSize = roundIconSize(size),
44
- iconBaseUrl,
45
- number,
46
- backgroundColor = "primary",
47
- contentColor = backgroundColor === "white"
48
- ? "primary"
49
- : backgroundColor === "black"
50
- ? "white"
51
- : "background",
52
- borderRadius = "round",
53
- padding = {
54
- leftRight: "xs",
55
- },
56
- ...rest
36
+ "data-testid": testid,
37
+ className,
38
+ ref,
39
+ id,
40
+ as,
41
+ size = 16,
42
+ icon,
43
+ iconSize = roundIconSize(size),
44
+ iconBaseUrl,
45
+ number,
46
+ backgroundColor = "primary",
47
+ contentColor = backgroundColor === "white"
48
+ ? "primary"
49
+ : backgroundColor === "black"
50
+ ? "white"
51
+ : backgroundColor === "background"
52
+ ? "font"
53
+ : "background",
54
+ borderRadius = "round",
55
+ padding = {
56
+ leftRight: "xs",
57
+ },
58
+ ...rest
57
59
  }) => {
58
- const randomClass = getRandomString(10, true)
59
- const withClass = className?.split(" ")[0] || randomClass
60
+ const randomClass = getRandomString(10, true)
61
+ const withClass = className?.split(" ")[0] || randomClass
60
62
 
61
- appendStyles(`
63
+ appendStyles(`
62
64
  ${id ? `#${id}` : `.${withClass}`} {
63
65
  --badge-size: ${size}px;
64
66
  --badge-font-size: ${roundIconSize(size)}px;
65
67
  }
66
68
  `)
67
69
 
68
- return (
69
- <StyledBadge
70
- data-testid={testid}
71
- ref={ref}
72
- as={as}
73
- className={classNames(className, randomClass)}
74
- id={id}
75
- $backgroundColor={backgroundColor}
76
- $contentColor={contentColor}
77
- $borderRadius={borderRadius}
78
- $padding={padding}
79
- $hasChildren={!!(icon || number)}
80
- $childrenLength={number?.toString().length}
81
- {...rest}
82
- >
83
- {icon && (
84
- <LibIcon
85
- data-testid={testid && `${testid}.Icon`}
86
- className={className && "Icon"}
87
- icon={icon}
88
- color={contentColor}
89
- size={iconSize}
90
- baseUrl={iconBaseUrl}
91
- />
92
- )}
70
+ return (
71
+ <StyledBadge
72
+ data-testid={testid}
73
+ ref={ref}
74
+ as={as}
75
+ className={classNames(className, randomClass)}
76
+ id={id}
77
+ $backgroundColor={backgroundColor}
78
+ $contentColor={contentColor}
79
+ $borderRadius={borderRadius}
80
+ $padding={padding}
81
+ $hasChildren={!!(icon || number)}
82
+ $childrenLength={number?.toString().length}
83
+ {...rest}
84
+ >
85
+ {icon && (
86
+ <LibIcon
87
+ data-testid={testid && `${testid}.Icon`}
88
+ className={className && "Icon"}
89
+ icon={icon}
90
+ color={contentColor}
91
+ size={iconSize}
92
+ baseUrl={iconBaseUrl}
93
+ />
94
+ )}
93
95
 
94
- {number}
95
- </StyledBadge>
96
- )
96
+ {number}
97
+ </StyledBadge>
98
+ )
97
99
  }
package/dist/lib/components/Main/styles.tsx CHANGED
@@ -4,56 +4,55 @@ 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_LARGE} {
52
+ height: unset;
53
+ min-height: unset;
54
+ padding: ${SPACERS.L} 0;
55
+ }
57
56
  `
58
57
 
59
58
  setDefaultTheme([StyledMain])