@julseb-lib/react 0.0.86 → 0.0.88

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 (19) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs.js +52 -53
  3. package/dist/index.es.js +748 -734
  4. package/dist/index.umd.js +210 -211
  5. package/dist/lib/components/Alert/Alert.tsx +74 -72
  6. package/dist/lib/components/Aside/Aside.tsx +18 -18
  7. package/dist/lib/components/Button/Button.tsx +86 -84
  8. package/dist/lib/components/ButtonIcon/ButtonIcon.tsx +2 -0
  9. package/dist/lib/components/Grid/Grid.tsx +9 -9
  10. package/dist/lib/components/Header/Header.tsx +166 -164
  11. package/dist/lib/components/Header/HeaderBurger.tsx +40 -39
  12. package/dist/lib/components/Header/HeaderLogo.tsx +57 -53
  13. package/dist/lib/components/Header/HeaderNav.tsx +68 -59
  14. package/dist/lib/components/Header/subtypes.ts +52 -51
  15. package/dist/lib/components/Main/Main.tsx +19 -19
  16. package/dist/lib/components/TextIcon/TextIcon.tsx +58 -58
  17. package/dist/lib/components/Tooltip/types.ts +15 -14
  18. package/dist/lib/components/Wrapper/styles.tsx +0 -1
  19. package/package.json +2 -2
package/dist/lib/components/Alert/Alert.tsx CHANGED
@@ -8,35 +8,35 @@ import { StyledAlert } from "./styles"
8
8
  import type { ILibAlert } from "./types"
9
9
 
10
10
  const alertStyles: {
11
- [key: string]: {
12
- backgroundColor: LibAllColors
13
- borderColor: LibAllColors
14
- }
11
+ [key: string]: {
12
+ backgroundColor: LibAllColors
13
+ borderColor: LibAllColors
14
+ }
15
15
  } = {
16
- primary: {
17
- backgroundColor: "primary-50",
18
- borderColor: "primary-500",
19
- },
20
- secondary: {
21
- backgroundColor: "secondary-50",
22
- borderColor: "secondary-500",
23
- },
24
- success: {
25
- backgroundColor: "success-50",
26
- borderColor: "success-500",
27
- },
28
- danger: {
29
- backgroundColor: "danger-50",
30
- borderColor: "danger-500",
31
- },
32
- warning: {
33
- backgroundColor: "warning-50",
34
- borderColor: "warning-500",
35
- },
36
- gray: {
37
- backgroundColor: "gray-50",
38
- borderColor: "gray-500",
39
- },
16
+ primary: {
17
+ backgroundColor: "primary-50",
18
+ borderColor: "primary-500",
19
+ },
20
+ secondary: {
21
+ backgroundColor: "secondary-50",
22
+ borderColor: "secondary-500",
23
+ },
24
+ success: {
25
+ backgroundColor: "success-50",
26
+ borderColor: "success-500",
27
+ },
28
+ danger: {
29
+ backgroundColor: "danger-50",
30
+ borderColor: "danger-500",
31
+ },
32
+ warning: {
33
+ backgroundColor: "warning-50",
34
+ borderColor: "warning-500",
35
+ },
36
+ gray: {
37
+ backgroundColor: "gray-50",
38
+ borderColor: "gray-500",
39
+ },
40
40
  }
41
41
 
42
42
  /**
@@ -66,55 +66,57 @@ const alertStyles: {
66
66
  * </Alert>
67
67
  */
68
68
  export const Alert: FC<ILibAlert> = ({
69
- "data-testid": testid,
70
- as,
71
- ref,
72
- className,
73
- id,
74
- children,
75
- maxWidth,
76
- textColor = "font",
77
- padding = "s",
78
- borderRadius = "m",
79
- gap = "xs",
80
- alertColor = "primary",
81
- backgroundColor,
82
- border,
83
- ...rest
69
+ "data-testid": testid,
70
+ as,
71
+ ref,
72
+ className,
73
+ id,
74
+ role = "alert",
75
+ children,
76
+ maxWidth,
77
+ textColor = "font",
78
+ padding = "s",
79
+ borderRadius = "m",
80
+ gap = "xs",
81
+ alertColor = "primary",
82
+ backgroundColor,
83
+ border,
84
+ ...rest
84
85
  }) => {
85
- const styles = alertStyles[alertColor]
86
- const randomClass = getRandomString(10, true)
87
- const withClass = className?.split(" ")[0] || randomClass
86
+ const styles = alertStyles[alertColor]
87
+ const randomClass = getRandomString(10, true)
88
+ const withClass = className?.split(" ")[0] || randomClass
88
89
 
89
- appendStyles(`
90
+ appendStyles(`
90
91
  ${id ? `#${id}` : `.${withClass}`} {
91
92
  --alert-max-width: ${stringifyPx(maxWidth || "100%")};
92
93
  }
93
94
  `)
94
95
 
95
- return (
96
- <>
97
- <StyledAlert
98
- data-testid={testid}
99
- ref={ref}
100
- as={as || typeof children === "string" ? Text : "div"}
101
- className={classNames(className, randomClass)}
102
- id={id}
103
- $backgroundColor={
104
- backgroundColor || styles.backgroundColor || "primary-50"
105
- }
106
- $border={{
107
- color: styles.borderColor || "primary",
108
- ...border,
109
- }}
110
- $borderRadius={borderRadius}
111
- $gap={gap}
112
- $padding={padding}
113
- $textColor={textColor}
114
- {...rest}
115
- >
116
- {children}
117
- </StyledAlert>
118
- </>
119
- )
96
+ return (
97
+ <>
98
+ <StyledAlert
99
+ data-testid={testid}
100
+ ref={ref}
101
+ as={as || typeof children === "string" ? Text : "div"}
102
+ className={classNames(className, randomClass)}
103
+ id={id}
104
+ role={role}
105
+ $backgroundColor={
106
+ backgroundColor || styles.backgroundColor || "primary-50"
107
+ }
108
+ $border={{
109
+ color: styles.borderColor || "primary",
110
+ ...border,
111
+ }}
112
+ $borderRadius={borderRadius}
113
+ $gap={gap}
114
+ $padding={padding}
115
+ $textColor={textColor}
116
+ {...rest}
117
+ >
118
+ {children}
119
+ </StyledAlert>
120
+ </>
121
+ )
120
122
  }
package/dist/lib/components/Aside/Aside.tsx CHANGED
@@ -15,27 +15,27 @@ import type { ILibAside } from "./types"
15
15
  * @returns {JSX.Element} The rendered Aside component.
16
16
  *
17
17
  * @example
18
- * <Aside size="small" minHeight="50vh">
18
+ * <Aside size="small">
19
19
  * Sidebar content here
20
20
  * </Aside>
21
21
  */
22
22
  export const Aside: FC<ILibAside> = ({
23
- "data-testid": testid,
24
- as,
25
- ref,
26
- children,
27
- size,
28
- ...rest
23
+ "data-testid": testid,
24
+ as,
25
+ ref,
26
+ children,
27
+ size = "default",
28
+ ...rest
29
29
  }) => {
30
- return (
31
- <StyledAside
32
- data-testid={testid}
33
- ref={ref}
34
- as={as}
35
- $size={size}
36
- {...rest}
37
- >
38
- {children}
39
- </StyledAside>
40
- )
30
+ return (
31
+ <StyledAside
32
+ data-testid={testid}
33
+ ref={ref}
34
+ as={as}
35
+ $size={size}
36
+ {...rest}
37
+ >
38
+ {children}
39
+ </StyledAside>
40
+ )
41
41
  }
package/dist/lib/components/Button/Button.tsx CHANGED
@@ -41,94 +41,96 @@ import type { ILibButton } from "./types"
41
41
  * </Button>
42
42
  */
43
43
  export const Button: FC<ILibButton> = ({
44
- "data-testid": testid,
45
- "aria-label": ariaLabel = "Button",
46
- disabled,
47
- "aria-disabled": ariaDisabled = disabled,
48
- as,
49
- ref,
50
- className,
51
- children,
52
- color = "primary",
53
- shadow,
54
- size = "default",
55
- borderRadius = size === "small" ? "s" : "m",
56
- icons,
57
- iconSizes,
58
- iconBaseUrl,
59
- gap = "xs",
60
- variant = "plain",
61
- noPadding,
62
- isLoading,
63
- loaderVariant,
64
- to,
65
- href,
66
- blank,
67
- ...rest
44
+ "data-testid": testid,
45
+ "aria-label": ariaLabel = "Button",
46
+ disabled,
47
+ "aria-disabled": ariaDisabled = disabled,
48
+ as,
49
+ ref,
50
+ className,
51
+ role = "button",
52
+ children,
53
+ color = "primary",
54
+ shadow,
55
+ size = "default",
56
+ borderRadius = size === "small" ? "s" : "m",
57
+ icons,
58
+ iconSizes,
59
+ iconBaseUrl,
60
+ gap = "xs",
61
+ variant = "plain",
62
+ noPadding,
63
+ isLoading,
64
+ loaderVariant,
65
+ to,
66
+ href,
67
+ blank,
68
+ ...rest
68
69
  }) => {
69
- const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
70
- size: size === "small" ? 14 : 16,
71
- color: "gray",
72
- "data-testid": testid && `${testid}.Loader`,
73
- className: "Loader",
74
- }
70
+ const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
71
+ size: size === "small" ? 14 : 16,
72
+ color: "gray",
73
+ "data-testid": testid && `${testid}.Loader`,
74
+ className: "Loader",
75
+ }
75
76
 
76
- const defaultIconSize = size === "small" ? 14 : 16
77
+ const defaultIconSize = size === "small" ? 14 : 16
77
78
 
78
- return (
79
- <StyledButton
80
- data-testid={testid}
81
- ref={ref}
82
- as={as ? as : to ? Link : href ? "a" : "button"}
83
- to={to === "prev" ? -1 : to}
84
- href={href}
85
- className={className}
86
- aria-label={ariaLabel}
87
- aria-disabled={ariaDisabled}
88
- disabled={isLoading || disabled}
89
- target={blank && "_blank"}
90
- rel={blank && "noreferrer noopener"}
91
- $color={color}
92
- $shadow={shadow}
93
- $borderRadius={borderRadius}
94
- $size={size}
95
- $gap={gap}
96
- $variant={variant}
97
- $noPadding={noPadding}
98
- {...rest}
99
- >
100
- {icons?.left && !isLoading && (
101
- <LibIcon
102
- icon={icons.left}
103
- data-testid={testid && `${testid}.IconLeft`}
104
- className={className && "IconLeft"}
105
- size={iconSizes?.left || defaultIconSize}
106
- baseUrl={iconBaseUrl}
107
- />
108
- )}
79
+ return (
80
+ <StyledButton
81
+ data-testid={testid}
82
+ ref={ref}
83
+ as={as ? as : to ? Link : href ? "a" : "button"}
84
+ to={to === "prev" ? -1 : to}
85
+ role={role}
86
+ href={href}
87
+ className={className}
88
+ aria-label={ariaLabel}
89
+ aria-disabled={ariaDisabled}
90
+ disabled={isLoading || disabled}
91
+ target={blank && "_blank"}
92
+ rel={blank && "noreferrer noopener"}
93
+ $color={color}
94
+ $shadow={shadow}
95
+ $borderRadius={borderRadius}
96
+ $size={size}
97
+ $gap={gap}
98
+ $variant={variant}
99
+ $noPadding={noPadding}
100
+ {...rest}
101
+ >
102
+ {icons?.left && !isLoading && (
103
+ <LibIcon
104
+ icon={icons.left}
105
+ data-testid={testid && `${testid}.IconLeft`}
106
+ className={className && "IconLeft"}
107
+ size={iconSizes?.left || defaultIconSize}
108
+ baseUrl={iconBaseUrl}
109
+ />
110
+ )}
109
111
 
110
- {isLoading &&
111
- (loaderVariant === 4 ? (
112
- <Loader variant={4 as any} {...loaderProps} />
113
- ) : (
114
- <Loader
115
- variant={loaderVariant as any}
116
- borderWidth={2}
117
- {...loaderProps}
118
- />
119
- ))}
112
+ {isLoading &&
113
+ (loaderVariant === 4 ? (
114
+ <Loader variant={4 as any} {...loaderProps} />
115
+ ) : (
116
+ <Loader
117
+ variant={loaderVariant as any}
118
+ borderWidth={2}
119
+ {...loaderProps}
120
+ />
121
+ ))}
120
122
 
121
- {children}
123
+ {children}
122
124
 
123
- {icons?.right && (
124
- <LibIcon
125
- icon={icons.right}
126
- data-testid={testid && `${testid}.IconRight`}
127
- className={className && "IconRight"}
128
- size={iconSizes?.right || defaultIconSize}
129
- baseUrl={iconBaseUrl}
130
- />
131
- )}
132
- </StyledButton>
133
- )
125
+ {icons?.right && (
126
+ <LibIcon
127
+ icon={icons.right}
128
+ data-testid={testid && `${testid}.IconRight`}
129
+ className={className && "IconRight"}
130
+ size={iconSizes?.right || defaultIconSize}
131
+ baseUrl={iconBaseUrl}
132
+ />
133
+ )}
134
+ </StyledButton>
135
+ )
134
136
  }
package/dist/lib/components/ButtonIcon/ButtonIcon.tsx CHANGED
@@ -45,6 +45,7 @@ export const ButtonIcon: FC<ILibButtonIcon> = ({
45
45
  "data-testid": testid,
46
46
  as,
47
47
  ref,
48
+ role = "button",
48
49
  size = 32,
49
50
  icon,
50
51
  iconSize = roundIconSize(size),
@@ -73,6 +74,7 @@ export const ButtonIcon: FC<ILibButtonIcon> = ({
73
74
  const props = {
74
75
  "data-testid": testid,
75
76
  as,
77
+ role,
76
78
  className,
77
79
  showTooltip,
78
80
  to,
package/dist/lib/components/Grid/Grid.tsx CHANGED
@@ -37,15 +37,15 @@ export const Grid: FC<ILibGrid> = ({
37
37
  ref,
38
38
  children,
39
39
  inline,
40
- col,
41
- gap,
42
- columnGap,
43
- rowGap,
44
- justifyItems,
45
- alignItems,
46
- justifyContent,
47
- alignContent,
48
- padding,
40
+ col = 1,
41
+ gap = "0px",
42
+ columnGap = "0px",
43
+ rowGap = "0px",
44
+ justifyItems = "stretch",
45
+ alignItems = "stretch",
46
+ justifyContent = "auto",
47
+ alignContent = "normal",
48
+ padding = "0px",
49
49
  ...rest
50
50
  }) => {
51
51
  return (