@trackunit/react-components 0.1.271 → 0.1.273

package/index.cjs.js

@@ -1908,6 +1908,39 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
+    variants: {
+        layout: {
+            content: ["grid-rows-1"],
+            "header-content": "grid-rows-min-fr",
+            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        layout: "none",
+    },
+});
+const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+const Page = ({ layout, className, children, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+};
+
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @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 cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -3117,6 +3150,8 @@ exports.ModalBackdrop = ModalBackdrop;
 exports.MoreMenu = MoreMenu;
 exports.Notice = Notice;
 exports.PackageNameStoryComponent = PackageNameStoryComponent;
+exports.Page = Page;
+exports.PageContent = PageContent;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Popover = Popover;

package/index.esm.js

@@ -1877,6 +1877,39 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaPage = cvaMerge(["grid", "h-full"], {
+    variants: {
+        layout: {
+            content: ["grid-rows-1"],
+            "header-content": "grid-rows-min-fr",
+            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        layout: "none",
+    },
+});
+const cvaPageContent = cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+const Page = ({ layout, className, children, dataTestId }) => {
+    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+};
+
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @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 cvaNotice = cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -3061,4 +3094,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

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

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

@@ -0,0 +1,20 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { cvaPage } from "./Page.variants";
+/**
+ * The layout of the page.
+ */
+export type Layout = VariantProps<typeof cvaPage>["layout"];
+/**
+ * The props for the page component.
+ */
+export interface PageProps extends CommonProps {
+    layout: Layout;
+    children?: React.ReactNode;
+    dataTestId?: string;
+}
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+export declare const Page: ({ layout, className, children, dataTestId }: PageProps) => JSX.Element;

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

@@ -0,0 +1,4 @@
+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;

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+/**
+ * The props for the page content component.
+ */
+interface PageContentProps extends CommonProps {
+    children?: React.ReactNode;
+}
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @param {PageContentProps} props - The component props.
+ * @returns {React.ReactNode} - The rendered component.
+ */
+export declare const PageContent: ({ className, children, dataTestId }: PageContentProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./Page";
+export * from "./PageContent";

package/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./Menu";
 export * from "./Modal";
+export * from "./Page";
 export * from "./Notice";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";