@julseb-lib/react 0.0.88 → 0.0.90

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 (20) hide show
  1. package/dist/index.cjs.js +659 -666
  2. package/dist/index.css +679 -570
  3. package/dist/index.es.js +3243 -2733
  4. package/dist/index.umd.js +1141 -1148
  5. package/dist/lib/Mixins.tsx +970 -970
  6. package/dist/lib/components/Avatar/Avatar.tsx +1 -1
  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/Image/Image.tsx +77 -73
  11. package/dist/lib/components/Image/ImageFunction.tsx +39 -37
  12. package/dist/lib/components/Timepicker/Timepicker.tsx +234 -235
  13. package/dist/lib/components/Youtube/types.ts +5 -4
  14. package/dist/lib/index.css +679 -570
  15. package/dist/lib/index.ts +56 -55
  16. package/dist/lib/types/global.ts +129 -128
  17. package/dist/lib/types/index.ts +0 -1
  18. package/license.md +21 -0
  19. package/package.json +1 -1
  20. /package/dist/lib/{types/design-tokens.ts → design-tokens.ts} +0 -0
package/dist/lib/components/Image/Image.tsx CHANGED
@@ -40,81 +40,85 @@ import type { ILibImage } from "./types"
40
40
  * />
41
41
  */
42
42
  export const Image: FC<ILibImage> = ({
43
- "data-testid": testid,
44
- ref,
45
- className,
46
- src,
47
- alt,
48
- caption,
49
- width = "100%",
50
- height = "auto",
51
- aspectRatio,
52
- borderRadius,
53
- fit,
54
- fallback = (
55
- <Fallback
56
- $aspectRatio={aspectRatio}
57
- $width={width}
58
- $height={height}
59
- $borderRadius={borderRadius}
60
- />
61
- ),
62
- containerStyle,
63
- containerAs,
64
- ...rest
43
+ "data-testid": testid,
44
+ ref,
45
+ role = "img",
46
+ className,
47
+ src,
48
+ alt,
49
+ caption,
50
+ width = "100%",
51
+ height = "auto",
52
+ aspectRatio,
53
+ borderRadius,
54
+ fit,
55
+ fallback = (
56
+ <Fallback
57
+ $aspectRatio={aspectRatio}
58
+ $width={width}
59
+ $height={height}
60
+ $borderRadius={borderRadius}
61
+ />
62
+ ),
63
+ containerStyle,
64
+ containerAs,
65
+ ...rest
65
66
  }) => {
66
- const imageProps = {
67
- "data-testid": testid,
68
- ref,
69
- fallback,
70
- caption,
71
- className,
72
- src,
73
- alt,
74
- aspectRatio,
75
- width,
76
- height,
77
- borderRadius,
78
- fit,
79
- ...rest,
80
- }
67
+ const imageProps = {
68
+ "data-testid": testid,
69
+ ref,
70
+ role,
71
+ fallback,
72
+ caption,
73
+ className,
74
+ src,
75
+ alt,
76
+ aspectRatio,
77
+ width,
78
+ height,
79
+ borderRadius,
80
+ fit,
81
+ ...rest,
82
+ }
81
83
 
82
- if (caption)
83
- return (
84
- <ImgContainer
85
- data-testid={testid}
86
- className={className}
87
- style={containerStyle}
88
- as={containerAs}
89
- $width={width}
90
- $height={height}
91
- $borderRadius={borderRadius}
92
- >
93
- <ImageFunction {...imageProps} />
84
+ if (caption)
85
+ return (
86
+ <ImgContainer
87
+ data-testid={testid}
88
+ className={className}
89
+ style={containerStyle}
90
+ as={containerAs}
91
+ role="figure"
92
+ $width={width}
93
+ $height={height}
94
+ $borderRadius={borderRadius}
95
+ >
96
+ <ImageFunction {...imageProps} />
94
97
 
95
- <Caption
96
- data-testid={testid && `${testid}.Caption`}
97
- className={className && "Caption"}
98
- as={
99
- typeof caption === "object" && caption.as
100
- ? caption.as
101
- : "figcaption"
102
- }
103
- $backgroundColor={
104
- typeof caption === "object" && caption.background
105
- ? caption?.background
106
- : "black-50"
107
- }
108
- $textColor={
109
- typeof caption === "object" && caption.textColor
110
- ? caption.textColor
111
- : "white"
112
- }
113
- >
114
- {typeof caption === "object" ? caption.text : caption}
115
- </Caption>
116
- </ImgContainer>
117
- )
98
+ <Caption
99
+ data-testid={testid && `${testid}.Caption`}
100
+ className={className && "Caption"}
101
+ role="contentinfo"
102
+ as={
103
+ typeof caption === "object" && caption.as
104
+ ? caption.as
105
+ : "figcaption"
106
+ }
107
+ $backgroundColor={
108
+ typeof caption === "object" && caption.background
109
+ ? caption?.background
110
+ : "black-50"
111
+ }
112
+ $textColor={
113
+ typeof caption === "object" && caption.textColor
114
+ ? caption.textColor
115
+ : "white"
116
+ }
117
+ >
118
+ {typeof caption === "object" ? caption.text : caption}
119
+ </Caption>
120
+ </ImgContainer>
121
+ )
118
122
 
119
- return <ImageFunction {...imageProps} />
123
+ return <ImageFunction {...imageProps} />
120
124
  }
package/dist/lib/components/Image/ImageFunction.tsx CHANGED
@@ -4,42 +4,44 @@ import type { ILibImage } from "./types"
4
4
  const StyledImage = lazy(() => import("./styles"))
5
5
 
6
6
  export const ImageFunction: FC<ILibImage> = ({
7
- "data-testid": testid,
8
- ref,
9
- fallback,
10
- caption,
11
- className,
12
- src,
13
- alt,
14
- aspectRatio,
15
- width = "100%",
16
- height = "auto",
17
- borderRadius,
18
- fit,
19
- loading = "lazy",
20
- imgFallback,
21
- ...rest
7
+ "data-testid": testid,
8
+ ref,
9
+ role = "img",
10
+ fallback,
11
+ caption,
12
+ className,
13
+ src,
14
+ alt,
15
+ aspectRatio,
16
+ width = "100%",
17
+ height = "auto",
18
+ borderRadius,
19
+ fit,
20
+ loading = "lazy",
21
+ imgFallback,
22
+ ...rest
22
23
  }) => {
23
- return (
24
- <Suspense fallback={fallback}>
25
- <StyledImage
26
- data-testid={!caption ? testid : testid && `${testid}.Image`}
27
- className={!caption ? className : className && "Image"}
28
- ref={ref}
29
- src={src}
30
- alt={alt}
31
- loading={loading}
32
- data-fallback={imgFallback?.text}
33
- $aspectRatio={aspectRatio}
34
- $width={width}
35
- $height={height}
36
- $borderRadius={borderRadius}
37
- $fit={fit}
38
- $fallbackBackground={imgFallback?.background ?? "primary"}
39
- $fallbackTextColor={imgFallback?.textColor ?? "background"}
40
- $fallbackFontSize={imgFallback?.fontSize ?? "body"}
41
- {...rest}
42
- />
43
- </Suspense>
44
- )
24
+ return (
25
+ <Suspense fallback={fallback}>
26
+ <StyledImage
27
+ data-testid={!caption ? testid : testid && `${testid}.Image`}
28
+ className={!caption ? className : className && "Image"}
29
+ role={role}
30
+ ref={ref}
31
+ src={src}
32
+ alt={alt}
33
+ loading={loading}
34
+ data-fallback={imgFallback?.text}
35
+ $aspectRatio={aspectRatio}
36
+ $width={width}
37
+ $height={height}
38
+ $borderRadius={borderRadius}
39
+ $fit={fit}
40
+ $fallbackBackground={imgFallback?.background ?? "primary"}
41
+ $fallbackTextColor={imgFallback?.textColor ?? "background"}
42
+ $fallbackFontSize={imgFallback?.fontSize ?? "body"}
43
+ {...rest}
44
+ />
45
+ </Suspense>
46
+ )
45
47
  }