@dmsi/wedgekit-react 0.0.24 → 0.0.26

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 (9) hide show
  1. package/dist/components/Grid.cjs +70 -14
  2. package/dist/components/Grid.js +70 -14
  3. package/dist/components/Modal.js +3 -3
  4. package/dist/index.css +0 -32
  5. package/package.json +1 -1
  6. package/src/components/Grid.tsx +93 -46
  7. package/dist/components/GridContainer.cjs +0 -125
  8. package/dist/components/GridContainer.js +0 -92
  9. package/src/components/GridContainer.tsx +0 -124
package/dist/components/Grid.cjs CHANGED
@@ -33,36 +33,92 @@ __export(Grid_exports, {
33
33
  Grid: () => Grid
34
34
  });
35
35
  module.exports = __toCommonJS(Grid_exports);
36
+ var import_react = require("react");
36
37
  var import_clsx = __toESM(require("clsx"), 1);
37
38
  var import_jsx_runtime = require("react/jsx-runtime");
38
- function Grid({
39
+ var COLUMNS_WITH_SIDE_MENU_MAP = {
40
+ 1: "grid-cols-1",
41
+ 2: "sm:grid-cols-2",
42
+ 3: "sm:grid-cols-2 md:grid-cols-3",
43
+ 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
44
+ 5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
45
+ 6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
46
+ 7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
47
+ 8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
48
+ 9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
49
+ 10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
50
+ 11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
51
+ 12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
52
+ };
53
+ var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
54
+ 1: "grid-cols-1",
55
+ 2: "sm:grid-cols-2",
56
+ 3: "sm:grid-cols-2 md:grid-cols-3",
57
+ 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
58
+ 5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
59
+ 6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
60
+ 7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
61
+ 8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
62
+ 9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
63
+ 10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
64
+ 11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
65
+ 12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
66
+ };
67
+ var getChildCountBasedClasses = (childCount, hasSideMenu) => {
68
+ if (hasSideMenu) {
69
+ if (childCount <= 1) return "grid-cols-1";
70
+ if (childCount <= 2) return "sm:grid-cols-2";
71
+ if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
72
+ if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
73
+ return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
74
+ }
75
+ if (childCount <= 1) return "grid-cols-1";
76
+ if (childCount <= 2) return "sm:grid-cols-2";
77
+ if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
78
+ if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
79
+ if (childCount <= 6)
80
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
81
+ if (childCount === 7)
82
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
83
+ if (childCount <= 11)
84
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
85
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
86
+ };
87
+ var getGridClasses = (childCount, hasSideMenu, columns) => {
88
+ var _a;
89
+ if (columns) {
90
+ const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
91
+ return (_a = map[columns]) != null ? _a : map[12];
92
+ }
93
+ return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
94
+ };
95
+ var Grid = ({
39
96
  children,
40
- columns = 1,
41
- sizing,
97
+ sizing = "container",
42
98
  padding,
43
- fullWidth = false
44
- }) {
45
- const gridClass = columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-3" : columns === 4 ? "grid-cols-4" : columns === 5 ? "grid-cols-5" : columns === 6 ? "grid-cols-6" : columns === 7 ? "grid-cols-7" : columns === 8 ? "grid-cols-8" : columns === 9 ? "grid-cols-9" : columns === 10 ? "grid-cols-10" : columns === 11 ? "grid-cols-11" : columns === 12 ? "grid-cols-12" : "";
99
+ hasSideMenu = false,
100
+ columns
101
+ }) => {
102
+ const childCount = import_react.Children.count(children);
46
103
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
47
104
  "div",
48
105
  {
49
106
  className: (0, import_clsx.default)(
50
- "grid",
51
- gridClass,
52
107
  padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
53
108
  padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
54
109
  padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
55
110
  padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
56
- sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap",
57
- sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
58
- sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
59
- sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
60
- fullWidth && "w-full"
111
+ sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
112
+ sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
113
+ sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
114
+ sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
115
+ "w-full grid",
116
+ getGridClasses(childCount, hasSideMenu, columns)
61
117
  ),
62
118
  children
63
119
  }
64
120
  );
65
- }
121
+ };
66
122
  // Annotate the CommonJS export names for ESM import in node:
67
123
  0 && (module.exports = {
68
124
  Grid
package/dist/components/Grid.js CHANGED
@@ -1,36 +1,92 @@
1
1
  import "../chunk-ORMEWXMH.js";
2
2
 
3
3
  // src/components/Grid.tsx
4
+ import { Children } from "react";
4
5
  import clsx from "clsx";
5
6
  import { jsx } from "react/jsx-runtime";
6
- function Grid({
7
+ var COLUMNS_WITH_SIDE_MENU_MAP = {
8
+ 1: "grid-cols-1",
9
+ 2: "sm:grid-cols-2",
10
+ 3: "sm:grid-cols-2 md:grid-cols-3",
11
+ 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
12
+ 5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
13
+ 6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
14
+ 7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
15
+ 8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
16
+ 9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
17
+ 10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
18
+ 11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
19
+ 12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
20
+ };
21
+ var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
22
+ 1: "grid-cols-1",
23
+ 2: "sm:grid-cols-2",
24
+ 3: "sm:grid-cols-2 md:grid-cols-3",
25
+ 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
26
+ 5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
27
+ 6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
28
+ 7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
29
+ 8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
30
+ 9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
31
+ 10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
32
+ 11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
33
+ 12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
34
+ };
35
+ var getChildCountBasedClasses = (childCount, hasSideMenu) => {
36
+ if (hasSideMenu) {
37
+ if (childCount <= 1) return "grid-cols-1";
38
+ if (childCount <= 2) return "sm:grid-cols-2";
39
+ if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
40
+ if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
41
+ return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
42
+ }
43
+ if (childCount <= 1) return "grid-cols-1";
44
+ if (childCount <= 2) return "sm:grid-cols-2";
45
+ if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
46
+ if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
47
+ if (childCount <= 6)
48
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
49
+ if (childCount === 7)
50
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
51
+ if (childCount <= 11)
52
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
53
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
54
+ };
55
+ var getGridClasses = (childCount, hasSideMenu, columns) => {
56
+ var _a;
57
+ if (columns) {
58
+ const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
59
+ return (_a = map[columns]) != null ? _a : map[12];
60
+ }
61
+ return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
62
+ };
63
+ var Grid = ({
7
64
  children,
8
- columns = 1,
9
- sizing,
65
+ sizing = "container",
10
66
  padding,
11
- fullWidth = false
12
- }) {
13
- const gridClass = columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-3" : columns === 4 ? "grid-cols-4" : columns === 5 ? "grid-cols-5" : columns === 6 ? "grid-cols-6" : columns === 7 ? "grid-cols-7" : columns === 8 ? "grid-cols-8" : columns === 9 ? "grid-cols-9" : columns === 10 ? "grid-cols-10" : columns === 11 ? "grid-cols-11" : columns === 12 ? "grid-cols-12" : "";
67
+ hasSideMenu = false,
68
+ columns
69
+ }) => {
70
+ const childCount = Children.count(children);
14
71
  return /* @__PURE__ */ jsx(
15
72
  "div",
16
73
  {
17
74
  className: clsx(
18
- "grid",
19
- gridClass,
20
75
  padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
21
76
  padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
22
77
  padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
23
78
  padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
24
- sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap",
25
- sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
26
- sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
27
- sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
28
- fullWidth && "w-full"
79
+ sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
80
+ sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
81
+ sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
82
+ sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
83
+ "w-full grid",
84
+ getGridClasses(childCount, hasSideMenu, columns)
29
85
  ),
30
86
  children
31
87
  }
32
88
  );
33
- }
89
+ };
34
90
  export {
35
91
  Grid
36
92
  };
package/dist/components/Modal.js CHANGED
@@ -2,9 +2,6 @@
2
2
  import {
3
3
  useMounted
4
4
  } from "../chunk-4RJKB7LC.js";
5
- import {
6
- ModalButtons
7
- } from "../chunk-DBYSGYST.js";
8
5
  import {
9
6
  ModalContent
10
7
  } from "../chunk-WIDBAFBU.js";
@@ -14,6 +11,9 @@ import {
14
11
  import {
15
12
  ModalScrim
16
13
  } from "../chunk-TU55CHXU.js";
14
+ import {
15
+ ModalButtons
16
+ } from "../chunk-DBYSGYST.js";
17
17
  import "../chunk-TJ44JJCB.js";
18
18
  import {
19
19
  useMatchesMobile
package/dist/index.css CHANGED
@@ -904,36 +904,9 @@
904
904
  .grid-cols-2 {
905
905
  grid-template-columns: repeat(2, minmax(0, 1fr));
906
906
  }
907
- .grid-cols-3 {
908
- grid-template-columns: repeat(3, minmax(0, 1fr));
909
- }
910
- .grid-cols-4 {
911
- grid-template-columns: repeat(4, minmax(0, 1fr));
912
- }
913
- .grid-cols-5 {
914
- grid-template-columns: repeat(5, minmax(0, 1fr));
915
- }
916
- .grid-cols-6 {
917
- grid-template-columns: repeat(6, minmax(0, 1fr));
918
- }
919
907
  .grid-cols-7 {
920
908
  grid-template-columns: repeat(7, minmax(0, 1fr));
921
909
  }
922
- .grid-cols-8 {
923
- grid-template-columns: repeat(8, minmax(0, 1fr));
924
- }
925
- .grid-cols-9 {
926
- grid-template-columns: repeat(9, minmax(0, 1fr));
927
- }
928
- .grid-cols-10 {
929
- grid-template-columns: repeat(10, minmax(0, 1fr));
930
- }
931
- .grid-cols-11 {
932
- grid-template-columns: repeat(11, minmax(0, 1fr));
933
- }
934
- .grid-cols-12 {
935
- grid-template-columns: repeat(12, minmax(0, 1fr));
936
- }
937
910
  .grid-cols-\[auto_1fr\] {
938
911
  grid-template-columns: auto 1fr;
939
912
  }
@@ -3538,11 +3511,6 @@
3538
3511
  gap: var(--spacing-desktop-compact-component-gap);
3539
3512
  }
3540
3513
  }
3541
- .compact\:gap-desktop-compact-container-gap {
3542
- &:where([data-compact]) {
3543
- gap: var(--spacing-desktop-compact-container-gap);
3544
- }
3545
- }
3546
3514
  .compact\:gap-desktop-compact-container-padding {
3547
3515
  &:where([data-compact]) {
3548
3516
  gap: var(--spacing-desktop-compact-container-padding);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dmsi/wedgekit-react",
3
3
  "private": false,
4
- "version": "0.0.24",
4
+ "version": "0.0.26",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "tsup",
package/src/components/Grid.tsx CHANGED
@@ -1,51 +1,97 @@
1
+ import { ComponentProps, Children } from "react";
2
+ import { Sizing } from "../types";
1
3
  import clsx from "clsx";
2
4
 
3
5
  type GridProps = {
4
- children?: React.ReactNode;
5
- columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
6
- sizing?: "container" | "layout" | "layout-group" | "component";
6
+ children: React.ReactNode;
7
+ sizing?: Sizing;
7
8
  padding?: boolean;
8
- fullWidth?: boolean;
9
+ hasSideMenu?: boolean;
10
+ columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
11
+ } & Omit<ComponentProps<"div">, "className">;
12
+
13
+ // Grid class configuration maps for better maintainability
14
+ const COLUMNS_WITH_SIDE_MENU_MAP: Record<number, string> = {
15
+ 1: "grid-cols-1",
16
+ 2: "sm:grid-cols-2",
17
+ 3: "sm:grid-cols-2 md:grid-cols-3",
18
+ 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
19
+ 5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
20
+ 6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
21
+ 7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
22
+ 8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
23
+ 9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
24
+ 10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
25
+ 11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
26
+ 12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
27
+ };
28
+
29
+ const COLUMNS_WITHOUT_SIDE_MENU_MAP: Record<number, string> = {
30
+ 1: "grid-cols-1",
31
+ 2: "sm:grid-cols-2",
32
+ 3: "sm:grid-cols-2 md:grid-cols-3",
33
+ 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
34
+ 5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
35
+ 6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
36
+ 7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
37
+ 8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
38
+ 9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
39
+ 10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
40
+ 11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
41
+ 12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12",
42
+ };
43
+
44
+ const getChildCountBasedClasses = (
45
+ childCount: number,
46
+ hasSideMenu: boolean,
47
+ ): string => {
48
+ if (hasSideMenu) {
49
+ if (childCount <= 1) return "grid-cols-1";
50
+ if (childCount <= 2) return "sm:grid-cols-2";
51
+ if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
52
+ if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
53
+ return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
54
+ }
55
+
56
+ if (childCount <= 1) return "grid-cols-1";
57
+ if (childCount <= 2) return "sm:grid-cols-2";
58
+ if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
59
+ if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
60
+ if (childCount <= 6)
61
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
62
+ if (childCount === 7)
63
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
64
+ if (childCount <= 11)
65
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
66
+ return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
67
+ };
68
+
69
+ const getGridClasses = (
70
+ childCount: number,
71
+ hasSideMenu?: boolean,
72
+ columns?: number,
73
+ ) => {
74
+ if (columns) {
75
+ const map = hasSideMenu
76
+ ? COLUMNS_WITH_SIDE_MENU_MAP
77
+ : COLUMNS_WITHOUT_SIDE_MENU_MAP;
78
+ return map[columns] ?? map[12];
79
+ }
80
+
81
+ return getChildCountBasedClasses(childCount, hasSideMenu ?? false);
9
82
  };
10
- export function Grid({
83
+
84
+ export const Grid = ({
11
85
  children,
12
- columns = 1,
13
- sizing,
86
+ sizing = "container",
14
87
  padding,
15
- fullWidth = false,
16
- }: GridProps) {
17
- const gridClass =
18
- columns === 1
19
- ? "grid-cols-1"
20
- : columns === 2
21
- ? "grid-cols-2"
22
- : columns === 3
23
- ? "grid-cols-3"
24
- : columns === 4
25
- ? "grid-cols-4"
26
- : columns === 5
27
- ? "grid-cols-5"
28
- : columns === 6
29
- ? "grid-cols-6"
30
- : columns === 7
31
- ? "grid-cols-7"
32
- : columns === 8
33
- ? "grid-cols-8"
34
- : columns === 9
35
- ? "grid-cols-9"
36
- : columns === 10
37
- ? "grid-cols-10"
38
- : columns === 11
39
- ? "grid-cols-11"
40
- : columns === 12
41
- ? "grid-cols-12"
42
- : "";
43
-
88
+ hasSideMenu = false,
89
+ columns,
90
+ }: GridProps) => {
91
+ const childCount = Children.count(children);
44
92
  return (
45
93
  <div
46
94
  className={clsx(
47
- "grid",
48
- gridClass,
49
95
  padding &&
50
96
  sizing === "container" &&
51
97
  "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
@@ -58,18 +104,19 @@ export function Grid({
58
104
  padding &&
59
105
  sizing === "component" &&
60
106
  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
61
- sizing === "container" &&
62
- "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap",
63
- sizing === "layout" &&
64
- "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
65
107
  sizing === "layout-group" &&
66
- "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
108
+ "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
109
+ sizing === "layout" &&
110
+ "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
111
+ sizing === "container" &&
112
+ "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
67
113
  sizing === "component" &&
68
- "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
69
- fullWidth && "w-full",
114
+ "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
115
+ "w-full grid",
116
+ getGridClasses(childCount, hasSideMenu, columns),
70
117
  )}
71
118
  >
72
119
  {children}
73
120
  </div>
74
121
  );
75
- }
122
+ };
package/dist/components/GridContainer.cjs DELETED
@@ -1,125 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/GridContainer.tsx
31
- var GridContainer_exports = {};
32
- __export(GridContainer_exports, {
33
- GridContainer: () => GridContainer
34
- });
35
- module.exports = __toCommonJS(GridContainer_exports);
36
- var import_react = require("react");
37
- var import_clsx = __toESM(require("clsx"), 1);
38
- var import_jsx_runtime = require("react/jsx-runtime");
39
- var COLUMNS_WITH_SIDE_MENU_MAP = {
40
- 1: "grid-cols-1",
41
- 2: "sm:grid-cols-2",
42
- 3: "sm:grid-cols-2 md:grid-cols-3",
43
- 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
44
- 5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
45
- 6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
46
- 7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
47
- 8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
48
- 9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
49
- 10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
50
- 11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
51
- 12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
52
- };
53
- var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
54
- 1: "grid-cols-1",
55
- 2: "sm:grid-cols-2",
56
- 3: "sm:grid-cols-2 md:grid-cols-3",
57
- 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
58
- 5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
59
- 6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
60
- 7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
61
- 8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
62
- 9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
63
- 10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
64
- 11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
65
- 12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
66
- };
67
- var getChildCountBasedClasses = (childCount, hasSideMenu) => {
68
- if (hasSideMenu) {
69
- if (childCount <= 1) return "grid-cols-1";
70
- if (childCount <= 2) return "sm:grid-cols-2";
71
- if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
72
- if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
73
- return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
74
- }
75
- if (childCount <= 1) return "grid-cols-1";
76
- if (childCount <= 2) return "sm:grid-cols-2";
77
- if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
78
- if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
79
- if (childCount <= 6)
80
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
81
- if (childCount === 7)
82
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
83
- if (childCount <= 11)
84
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
85
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
86
- };
87
- var getGridClasses = (childCount, hasSideMenu, columns) => {
88
- var _a;
89
- if (columns) {
90
- const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
91
- return (_a = map[columns]) != null ? _a : map[12];
92
- }
93
- return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
94
- };
95
- var GridContainer = ({
96
- children,
97
- sizing = "container",
98
- padding,
99
- hasSideMenu = false,
100
- columns
101
- }) => {
102
- const childCount = import_react.Children.count(children);
103
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
104
- "div",
105
- {
106
- className: (0, import_clsx.default)(
107
- padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
108
- padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
109
- padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
110
- padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
111
- sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
112
- sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
113
- sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
114
- sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
115
- "w-full grid",
116
- getGridClasses(childCount, hasSideMenu, columns)
117
- ),
118
- children
119
- }
120
- );
121
- };
122
- // Annotate the CommonJS export names for ESM import in node:
123
- 0 && (module.exports = {
124
- GridContainer
125
- });
package/dist/components/GridContainer.js DELETED
@@ -1,92 +0,0 @@
1
- import "../chunk-ORMEWXMH.js";
2
-
3
- // src/components/GridContainer.tsx
4
- import { Children } from "react";
5
- import clsx from "clsx";
6
- import { jsx } from "react/jsx-runtime";
7
- var COLUMNS_WITH_SIDE_MENU_MAP = {
8
- 1: "grid-cols-1",
9
- 2: "sm:grid-cols-2",
10
- 3: "sm:grid-cols-2 md:grid-cols-3",
11
- 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
12
- 5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
13
- 6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
14
- 7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
15
- 8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
16
- 9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
17
- 10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
18
- 11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
19
- 12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
20
- };
21
- var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
22
- 1: "grid-cols-1",
23
- 2: "sm:grid-cols-2",
24
- 3: "sm:grid-cols-2 md:grid-cols-3",
25
- 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
26
- 5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
27
- 6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
28
- 7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
29
- 8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
30
- 9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
31
- 10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
32
- 11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
33
- 12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
34
- };
35
- var getChildCountBasedClasses = (childCount, hasSideMenu) => {
36
- if (hasSideMenu) {
37
- if (childCount <= 1) return "grid-cols-1";
38
- if (childCount <= 2) return "sm:grid-cols-2";
39
- if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
40
- if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
41
- return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
42
- }
43
- if (childCount <= 1) return "grid-cols-1";
44
- if (childCount <= 2) return "sm:grid-cols-2";
45
- if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
46
- if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
47
- if (childCount <= 6)
48
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
49
- if (childCount === 7)
50
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
51
- if (childCount <= 11)
52
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
53
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
54
- };
55
- var getGridClasses = (childCount, hasSideMenu, columns) => {
56
- var _a;
57
- if (columns) {
58
- const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
59
- return (_a = map[columns]) != null ? _a : map[12];
60
- }
61
- return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
62
- };
63
- var GridContainer = ({
64
- children,
65
- sizing = "container",
66
- padding,
67
- hasSideMenu = false,
68
- columns
69
- }) => {
70
- const childCount = Children.count(children);
71
- return /* @__PURE__ */ jsx(
72
- "div",
73
- {
74
- className: clsx(
75
- padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
76
- padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
77
- padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
78
- padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
79
- sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
80
- sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
81
- sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
82
- sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
83
- "w-full grid",
84
- getGridClasses(childCount, hasSideMenu, columns)
85
- ),
86
- children
87
- }
88
- );
89
- };
90
- export {
91
- GridContainer
92
- };
package/src/components/GridContainer.tsx DELETED
@@ -1,124 +0,0 @@
1
- import { ComponentProps, Children } from "react";
2
- import { Sizing } from "../types";
3
- import clsx from "clsx";
4
-
5
- type GridContainerProps = {
6
- children: React.ReactNode;
7
- sizing?: Sizing;
8
- padding?: boolean;
9
- hasSideMenu?: boolean;
10
- columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
11
- } & Omit<ComponentProps<"div">, "className">;
12
-
13
- // Grid class configuration maps for better maintainability
14
- const COLUMNS_WITH_SIDE_MENU_MAP: Record<number, string> = {
15
- 1: "grid-cols-1",
16
- 2: "sm:grid-cols-2",
17
- 3: "sm:grid-cols-2 md:grid-cols-3",
18
- 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
19
- 5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
20
- 6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
21
- 7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
22
- 8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
23
- 9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
24
- 10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
25
- 11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
26
- 12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
27
- };
28
-
29
- const COLUMNS_WITHOUT_SIDE_MENU_MAP: Record<number, string> = {
30
- 1: "grid-cols-1",
31
- 2: "sm:grid-cols-2",
32
- 3: "sm:grid-cols-2 md:grid-cols-3",
33
- 4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
34
- 5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
35
- 6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
36
- 7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
37
- 8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
38
- 9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
39
- 10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
40
- 11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
41
- 12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12",
42
- };
43
-
44
- const getChildCountBasedClasses = (
45
- childCount: number,
46
- hasSideMenu: boolean,
47
- ): string => {
48
- if (hasSideMenu) {
49
- if (childCount <= 1) return "grid-cols-1";
50
- if (childCount <= 2) return "sm:grid-cols-2";
51
- if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
52
- if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
53
- return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
54
- }
55
-
56
- if (childCount <= 1) return "grid-cols-1";
57
- if (childCount <= 2) return "sm:grid-cols-2";
58
- if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
59
- if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
60
- if (childCount <= 6)
61
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
62
- if (childCount === 7)
63
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
64
- if (childCount <= 11)
65
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
66
- return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
67
- };
68
-
69
- const getGridClasses = (
70
- childCount: number,
71
- hasSideMenu?: boolean,
72
- columns?: number,
73
- ) => {
74
- // If explicit columns are set, use the appropriate map
75
- if (columns) {
76
- const map = hasSideMenu
77
- ? COLUMNS_WITH_SIDE_MENU_MAP
78
- : COLUMNS_WITHOUT_SIDE_MENU_MAP;
79
- return map[columns] ?? map[12]; // Fallback to 12 columns if invalid column count
80
- }
81
-
82
- // Otherwise, use child count based logic
83
- return getChildCountBasedClasses(childCount, hasSideMenu ?? false);
84
- };
85
-
86
- export const GridContainer = ({
87
- children,
88
- sizing = "container",
89
- padding,
90
- hasSideMenu = false,
91
- columns,
92
- }: GridContainerProps) => {
93
- const childCount = Children.count(children);
94
- return (
95
- <div
96
- className={clsx(
97
- padding &&
98
- sizing === "container" &&
99
- "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
100
- padding &&
101
- sizing === "layout" &&
102
- "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
103
- padding &&
104
- sizing === "layout-group" &&
105
- "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
106
- padding &&
107
- sizing === "component" &&
108
- "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
109
- sizing === "layout-group" &&
110
- "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
111
- sizing === "layout" &&
112
- "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
113
- sizing === "container" &&
114
- "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
115
- sizing === "component" &&
116
- "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
117
- "w-full grid",
118
- getGridClasses(childCount, hasSideMenu, columns),
119
- )}
120
- >
121
- {children}
122
- </div>
123
- );
124
- };