@trackunit/react-widgets 2.2.11 → 2.2.14

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 (5) hide show
  1. package/index.cjs.js +56 -2
  2. package/index.esm.js +56 -2
  3. package/package.json +9 -9
  4. package/src/Widget/WidgetContent.d.ts +1 -1
  5. package/src/Widget/WidgetContent.variants.d.ts +2 -1
package/index.cjs.js CHANGED
@@ -103,25 +103,79 @@ const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "over
103
103
  variants: {
104
104
  layout: {
105
105
  none: "",
106
- centered: "place-items-center",
107
106
  "top-fill": ["grid-rows-min-fr"],
108
107
  "fill-bottom": ["grid-rows-fr-min"],
109
108
  "top-fill-bottom": ["grid-rows-min-fr-min"],
110
109
  },
110
+ centering: {
111
+ none: "",
112
+ centered: "",
113
+ },
111
114
  gap: {
112
115
  responsive: "gap-responsive-space",
113
116
  none: "",
114
117
  },
115
118
  padding: {
116
- responsive: "p-responsive-space",
119
+ responsive: "",
117
120
  none: "",
118
121
  },
119
122
  },
120
123
  defaultVariants: {
121
124
  layout: "none",
125
+ centering: "none",
122
126
  gap: "none",
123
127
  padding: "none",
124
128
  },
129
+ compoundVariants: [
130
+ // Apply centering to whole container when layout is none
131
+ {
132
+ layout: "none",
133
+ centering: "centered",
134
+ class: ["place-items-center"],
135
+ },
136
+ // Center fill areas for top-fill layout
137
+ {
138
+ layout: "top-fill",
139
+ centering: "centered",
140
+ class: ["[&>*:nth-child(2)]:grid", "[&>*:nth-child(2)]:place-items-center"],
141
+ },
142
+ // Center fill areas for fill-bottom layout
143
+ {
144
+ layout: "fill-bottom",
145
+ centering: "centered",
146
+ class: ["[&>*:nth-child(1)]:grid", "[&>*:nth-child(1)]:place-items-center"],
147
+ },
148
+ // Center fill areas for top-fill-bottom layout
149
+ {
150
+ layout: "top-fill-bottom",
151
+ centering: "centered",
152
+ class: ["[&>*:nth-child(2)]:grid", "[&>*:nth-child(2)]:place-items-center"],
153
+ },
154
+ // Apply padding to whole container when layout is none
155
+ {
156
+ layout: "none",
157
+ padding: "responsive",
158
+ class: ["p-4"],
159
+ },
160
+ // Apply padding to fill areas for top-fill layout
161
+ {
162
+ layout: "top-fill",
163
+ padding: "responsive",
164
+ class: ["[&>*:nth-child(2)]:p-4"],
165
+ },
166
+ // Apply padding to fill areas for fill-bottom layout
167
+ {
168
+ layout: "fill-bottom",
169
+ padding: "responsive",
170
+ class: ["[&>*:nth-child(1)]:p-4"],
171
+ },
172
+ // Apply padding to fill areas for top-fill-bottom layout
173
+ {
174
+ layout: "top-fill-bottom",
175
+ padding: "responsive",
176
+ class: ["[&>*:nth-child(2)]:p-4"],
177
+ },
178
+ ],
125
179
  });
126
180
 
127
181
  /**
package/index.esm.js CHANGED
@@ -101,25 +101,79 @@ const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w
101
101
  variants: {
102
102
  layout: {
103
103
  none: "",
104
- centered: "place-items-center",
105
104
  "top-fill": ["grid-rows-min-fr"],
106
105
  "fill-bottom": ["grid-rows-fr-min"],
107
106
  "top-fill-bottom": ["grid-rows-min-fr-min"],
108
107
  },
108
+ centering: {
109
+ none: "",
110
+ centered: "",
111
+ },
109
112
  gap: {
110
113
  responsive: "gap-responsive-space",
111
114
  none: "",
112
115
  },
113
116
  padding: {
114
- responsive: "p-responsive-space",
117
+ responsive: "",
115
118
  none: "",
116
119
  },
117
120
  },
118
121
  defaultVariants: {
119
122
  layout: "none",
123
+ centering: "none",
120
124
  gap: "none",
121
125
  padding: "none",
122
126
  },
127
+ compoundVariants: [
128
+ // Apply centering to whole container when layout is none
129
+ {
130
+ layout: "none",
131
+ centering: "centered",
132
+ class: ["place-items-center"],
133
+ },
134
+ // Center fill areas for top-fill layout
135
+ {
136
+ layout: "top-fill",
137
+ centering: "centered",
138
+ class: ["[&>*:nth-child(2)]:grid", "[&>*:nth-child(2)]:place-items-center"],
139
+ },
140
+ // Center fill areas for fill-bottom layout
141
+ {
142
+ layout: "fill-bottom",
143
+ centering: "centered",
144
+ class: ["[&>*:nth-child(1)]:grid", "[&>*:nth-child(1)]:place-items-center"],
145
+ },
146
+ // Center fill areas for top-fill-bottom layout
147
+ {
148
+ layout: "top-fill-bottom",
149
+ centering: "centered",
150
+ class: ["[&>*:nth-child(2)]:grid", "[&>*:nth-child(2)]:place-items-center"],
151
+ },
152
+ // Apply padding to whole container when layout is none
153
+ {
154
+ layout: "none",
155
+ padding: "responsive",
156
+ class: ["p-4"],
157
+ },
158
+ // Apply padding to fill areas for top-fill layout
159
+ {
160
+ layout: "top-fill",
161
+ padding: "responsive",
162
+ class: ["[&>*:nth-child(2)]:p-4"],
163
+ },
164
+ // Apply padding to fill areas for fill-bottom layout
165
+ {
166
+ layout: "fill-bottom",
167
+ padding: "responsive",
168
+ class: ["[&>*:nth-child(1)]:p-4"],
169
+ },
170
+ // Apply padding to fill areas for top-fill-bottom layout
171
+ {
172
+ layout: "top-fill-bottom",
173
+ padding: "responsive",
174
+ class: ["[&>*:nth-child(2)]:p-4"],
175
+ },
176
+ ],
123
177
  });
124
178
 
125
179
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-widgets",
3
- "version": "2.2.11",
3
+ "version": "2.2.14",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -8,14 +8,14 @@
8
8
  },
9
9
  "dependencies": {
10
10
  "react": "19.0.0",
11
- "@trackunit/react-components": "1.9.10",
12
- "@trackunit/iris-app-runtime-core": "1.8.8",
13
- "@trackunit/css-class-variance-utilities": "1.7.7",
14
- "@trackunit/ui-design-tokens": "1.7.7",
15
- "@trackunit/ui-icons": "1.7.9",
16
- "@trackunit/shared-utils": "1.9.7",
17
- "@trackunit/i18n-library-translation": "1.7.9",
18
- "@trackunit/react-test-setup": "1.4.7"
11
+ "@trackunit/react-components": "1.9.13",
12
+ "@trackunit/iris-app-runtime-core": "1.8.10",
13
+ "@trackunit/css-class-variance-utilities": "1.7.8",
14
+ "@trackunit/ui-design-tokens": "1.7.8",
15
+ "@trackunit/ui-icons": "1.7.10",
16
+ "@trackunit/shared-utils": "1.9.8",
17
+ "@trackunit/i18n-library-translation": "1.7.11",
18
+ "@trackunit/react-test-setup": "1.4.8"
19
19
  },
20
20
  "module": "./index.esm.js",
21
21
  "main": "./index.cjs.js",
package/src/Widget/WidgetContent.d.ts CHANGED
@@ -3,7 +3,7 @@ import { CommonProps } from "@trackunit/react-components";
3
3
  import { MappedOmit } from "@trackunit/shared-utils";
4
4
  import { ReactElement, ReactNode } from "react";
5
5
  import { cvaWidgetContent } from "./WidgetContent.variants";
6
- export interface WidgetContentProps extends CommonProps, MappedOmit<NonNullable<VariantProps<typeof cvaWidgetContent>>, "className"> {
6
+ export interface WidgetContentProps extends CommonProps, Required<MappedOmit<NonNullable<VariantProps<typeof cvaWidgetContent>>, "className">> {
7
7
  /**
8
8
  * Child elements to render in the body
9
9
  */
package/src/Widget/WidgetContent.variants.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export declare const cvaWidgetContent: (props?: ({
2
- layout?: "none" | "centered" | "top-fill" | "fill-bottom" | "top-fill-bottom" | null | undefined;
2
+ layout?: "none" | "top-fill" | "fill-bottom" | "top-fill-bottom" | null | undefined;
3
+ centering?: "none" | "centered" | null | undefined;
3
4
  gap?: "none" | "responsive" | null | undefined;
4
5
  padding?: "none" | "responsive" | null | undefined;
5
6
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;