@trackunit/react-components 0.4.3 → 0.4.5

package/index.cjs.js

@@ -4224,7 +4224,18 @@ const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
         layout: "none",
     },
 });
-const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "page-content", "grid", "gap-responsive-space"], {
+    variants: {
+        layout: {
+            content: "",
+            "v-min-fr": ["grid-rows-min-fr"],
+            "h-min-fr": ["grid-cols-min-fr", "sm:grid-cols-1", "sm:grid-rows-min-fr"],
+        },
+    },
+    defaultVariants: {
+        layout: "content",
+    },
+});
 
 /**
  * Renders the page component. Adds padding and layout to the page.
@@ -4240,8 +4251,8 @@ const Page = ({ layout, className, children, dataTestId }) => {
  * @param {PageContentProps} props - The component props.
  * @returns {React.ReactNode} - The rendered component.
  */
-const PageContent = ({ className, children, dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
+const PageContent = ({ className, children, dataTestId, layout }) => {
+    return (jsxRuntime.jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
 const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "tu-page-header"], {

package/index.esm.js

@@ -4204,7 +4204,18 @@ const cvaPage = cvaMerge(["grid", "h-full"], {
         layout: "none",
     },
 });
-const cvaPageContent = cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+const cvaPageContent = cvaMerge(["overflow-auto", "page-content", "grid", "gap-responsive-space"], {
+    variants: {
+        layout: {
+            content: "",
+            "v-min-fr": ["grid-rows-min-fr"],
+            "h-min-fr": ["grid-cols-min-fr", "sm:grid-cols-1", "sm:grid-rows-min-fr"],
+        },
+    },
+    defaultVariants: {
+        layout: "content",
+    },
+});
 
 /**
  * Renders the page component. Adds padding and layout to the page.
@@ -4220,8 +4231,8 @@ const Page = ({ layout, className, children, dataTestId }) => {
  * @param {PageContentProps} props - The component props.
  * @returns {React.ReactNode} - The rendered component.
  */
-const PageContent = ({ className, children, dataTestId }) => {
-    return (jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
+const PageContent = ({ className, children, dataTestId, layout }) => {
+    return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
 const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Page/Page.variants.d.ts

@@ -1,4 +1,6 @@
 export declare const cvaPage: (props?: ({
     layout?: "content" | "header-content" | "sidebar-content" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaPageContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageContent: (props?: ({
+    layout?: "content" | "v-min-fr" | "h-min-fr" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Page/PageContent.d.ts

@@ -4,6 +4,7 @@ import { CommonProps } from "../../common";
  * The props for the page content component.
  */
 interface PageContentProps extends CommonProps {
+    layout: "content" | "h-min-fr" | "v-min-fr";
     children?: React.ReactNode;
 }
 /**
@@ -13,5 +14,5 @@ interface PageContentProps extends CommonProps {
  * @param {PageContentProps} props - The component props.
  * @returns {React.ReactNode} - The rendered component.
  */
-export declare const PageContent: ({ className, children, dataTestId }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageContent: ({ className, children, dataTestId, layout }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};