@julseb-lib/react 0.0.91 → 0.0.93

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 (10) hide show
  1. package/dist/index.cjs.js +436 -433
  2. package/dist/index.es.js +1065 -1060
  3. package/dist/index.umd.js +286 -283
  4. package/dist/lib/components/Aside/styles.tsx +28 -28
  5. package/dist/lib/components/Burger/Burger.tsx +33 -31
  6. package/dist/lib/components/Main/styles.tsx +2 -1
  7. package/dist/lib/components/PageLayout/PageLayout.tsx +7 -7
  8. package/dist/lib/components/Wrapper/styles.tsx +21 -19
  9. package/dist/lib/types/components-props.ts +1 -2
  10. package/package.json +1 -1
package/dist/lib/components/Aside/styles.tsx CHANGED
@@ -4,42 +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
- 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}
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}
31
31
 
32
32
  & > * {
33
- flex-shrink: 0;
34
- }
35
-
36
- @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
37
- width: 100%;
38
- max-width: ${({ $size }) => getAsideSize($size || "default")};
39
- height: unset;
40
- min-height: unset;
41
- padding: ${SPACERS.L} 0;
42
- }
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
+ }
43
43
  `
44
44
 
45
45
  setDefaultTheme([StyledAside])
package/dist/lib/components/Burger/Burger.tsx CHANGED
@@ -25,36 +25,38 @@ import type { ILibBurger } from "./types"
25
25
  * <Burger isOpen={menuOpen} onClick={toggleMenu} />
26
26
  */
27
27
  export const Burger: FC<ILibBurger> = ({
28
- "data-testid": testid,
29
- as,
30
- ref,
31
- className,
32
- isOpen,
33
- color = "primary",
34
- width = 32,
35
- height = 24,
36
- noHover,
37
- borderWidth = 2,
38
- "aria-label": ariaLabel = `${isOpen ? "Close" : "Open"} burger`,
39
- ...rest
28
+ "data-testid": testid,
29
+ as,
30
+ ref,
31
+ className,
32
+ isOpen,
33
+ color = "primary",
34
+ width = 32,
35
+ height = 24,
36
+ noHover,
37
+ borderWidth = 2,
38
+ "aria-label": ariaLabel = `${isOpen ? "Close" : "Open"} burger`,
39
+ role = "button",
40
+ ...rest
40
41
  }) => {
41
- return (
42
- <StyledBurger
43
- data-testid={testid}
44
- ref={ref}
45
- as={as ? as : noHover ? "span" : "button"}
46
- className={classNames(className, { Open: isOpen })}
47
- aria-label={ariaLabel}
48
- $noHover={noHover}
49
- $borderWidth={borderWidth}
50
- $color={color}
51
- $height={height}
52
- $width={width}
53
- {...rest}
54
- >
55
- <span />
56
- <span />
57
- <span />
58
- </StyledBurger>
59
- )
42
+ return (
43
+ <StyledBurger
44
+ data-testid={testid}
45
+ ref={ref}
46
+ as={as ? as : noHover ? "span" : "button"}
47
+ className={classNames(className, { Open: isOpen })}
48
+ aria-label={ariaLabel}
49
+ role={role}
50
+ $noHover={noHover}
51
+ $borderWidth={borderWidth}
52
+ $color={color}
53
+ $height={height}
54
+ $width={width}
55
+ {...rest}
56
+ >
57
+ <span />
58
+ <span />
59
+ <span />
60
+ </StyledBurger>
61
+ )
60
62
  }
package/dist/lib/components/Main/styles.tsx CHANGED
@@ -48,9 +48,10 @@ const StyledMain = styled.main<{
48
48
  }
49
49
  `}
50
50
 
51
- @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
51
+ @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
52
52
  height: unset;
53
53
  min-height: unset;
54
+ max-width: unset;
54
55
  padding: ${SPACERS.L} 0;
55
56
  }
56
57
  `
package/dist/lib/components/PageLayout/PageLayout.tsx CHANGED
@@ -10,9 +10,9 @@ import type { ILibPageLayout } from "./types"
10
10
  * @param {Object} props - PageLayout props.
11
11
  * @param {string} [props.data-testid] - Test id for testing purposes.
12
12
  * @param {boolean} [props.isLoading] - Whether the page is in a loading state.
13
- * @param {string} [props.titleLoading] - Title to display in the Helmet while loading.
13
+ * @param {string} [props.titleLoading] - Title to display in the Meta while loading.
14
14
  * @param {ILibPageLoading} [props.pageLoading] - Props for the PageLoading component.
15
- * @param {ILibHelmet} [props.helmet] - Props for the Helmet component.
15
+ * @param {ILibMeta} [props.meta] - Props for the Meta component.
16
16
  * @param {ILibHeader & { nav?: JSX.Element }} [props.header] - Props for the Header component, with optional navigation.
17
17
  * @param {ILibFooter} [props.footer] - Props for the Footer component.
18
18
  * @param {ILibWrapper} [props.wrapper] - Props for the Wrapper component (only if noWrapper is not set to true).
@@ -27,7 +27,7 @@ import type { ILibPageLayout } from "./types"
27
27
  * @example
28
28
  * <PageLayout
29
29
  * isLoading={loading}
30
- * helmet={{ title: "My Page" }}
30
+ * meta={{ title: "My Page" }}
31
31
  * header={{ title: "Header" }}
32
32
  * footer={{ copyright: "© 2025" }}
33
33
  * >
@@ -40,7 +40,7 @@ export const PageLayout: FC<ILibPageLayout> = ({
40
40
  isLoading,
41
41
  pageLoading,
42
42
  titleLoading,
43
- meta: helmet,
43
+ meta,
44
44
  header,
45
45
  footer,
46
46
  noWrapper,
@@ -51,11 +51,11 @@ export const PageLayout: FC<ILibPageLayout> = ({
51
51
  }) => {
52
52
  return (
53
53
  <>
54
- {helmet && (
54
+ {meta && (
55
55
  <Meta
56
- {...helmet}
56
+ {...meta}
57
57
  title={
58
- isLoading && titleLoading ? titleLoading : helmet.title
58
+ isLoading && titleLoading ? titleLoading : meta.title
59
59
  }
60
60
  />
61
61
  )}
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/dist/lib/types/components-props.ts CHANGED
@@ -67,7 +67,7 @@ export * from "../components/BackToTop/types"
67
67
  export * from "../components/Header/types"
68
68
  export * from "../components/IconMenu/types"
69
69
  export * from "../components/Footer/types"
70
- export * from "../components/Helmet/types"
70
+ export * from "../components/Meta/types"
71
71
  export * from "../components/InputPin/types"
72
72
  export * from "../components/InputContainer/types"
73
73
  export * from "../components/Drawer/types"
@@ -77,5 +77,4 @@ export * from "../components/Fieldset/types"
77
77
  export * from "../components/Datepicker/types"
78
78
  export * from "../components/Timepicker/types"
79
79
  export * from "../components/Link/types"
80
- export * from "../components/Meta/types"
81
80
  /* Prepend here - DO NOT REMOVE */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.0.91",
3
+ "version": "0.0.93",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {