@trackunit/react-components 0.1.117 → 0.1.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.117",
+  "version": "0.1.124",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,19 +8,20 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
-    "@trackunit/css-class-variance-utilities": "0.0.5",
-    "@trackunit/css-core": "0.0.86",
-    "@trackunit/tailwind-styled-components": "0.0.57",
-    "@trackunit/ui-design-tokens": "0.0.70",
-    "@trackunit/ui-icons": "0.0.67",
+    "@trackunit/css-class-variance-utilities": "0.0.6",
+    "@trackunit/css-core": "0.0.88",
+    "@trackunit/tailwind-styled-components": "0.0.58",
+    "@trackunit/ui-design-tokens": "0.0.72",
+    "@trackunit/ui-icons": "0.0.69",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-day-picker": "8.7.1",
     "react-helmet-async": "1.3.0",
-    "react-router-dom": "6.4.5",
+    "react-router-dom": "6.11.2",
     "react-use": "17.4.0",
-    "react-useportal": "1.0.17"
+    "react-useportal": "1.0.17",
+    "zod": "3.14.1"
   },
   "module": "./index.js",
   "main": "./index.cjs",

package/src/common/CommonProps.d.ts

@@ -1,12 +1,12 @@
-export interface CommonProps {
-    /**
-     * A custom class name to be attached to root element
-     */
-    className?: string;
-    /**
-     * A id that can be used in tests to get the component
-     */
-    dataTestId?: string;
-}
-export type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";
-export type Size = "small" | "medium" | "large";
+export interface CommonProps {
+    /**
+     * A custom class name to be attached to root element
+     */
+    className?: string;
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+}
+export type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";
+export type Size = "small" | "medium" | "large";

package/src/common/StorybookProps.d.ts

@@ -1,6 +1,6 @@
-export declare const docs: {
-    source: {
-        type: string;
-        excludeDecorators: boolean;
-    };
-};
+export declare const docs: {
+    source: {
+        type: string;
+        excludeDecorators: boolean;
+    };
+};

package/src/common/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./CommonProps";
-export * from "./StorybookProps";
-export * from "./useContainerProps";
+export * from "./CommonProps";
+export * from "./StorybookProps";
+export * from "./useContainerProps";

package/src/common/useContainerProps.d.ts

@@ -1,16 +1,16 @@
-export interface UseContainerProps {
-    className?: string;
-    dataTestId?: string;
-}
-/**
- * Utility for common props on containers.
- *
- * @param {UseContainerProps} ContainerProps - Props for the utility
- * @param {string} ContainerProps.className - Optional custom className
- * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
- * @returns {UseContainerProps} - Object with undefined values removed
- */
-export declare const useContainerProps: ({ className, dataTestId }: UseContainerProps) => {
-    className: string | undefined;
-    "data-testid": string | undefined;
-};
+export interface UseContainerProps {
+    className?: string;
+    dataTestId?: string;
+}
+/**
+ * Utility for common props on containers.
+ *
+ * @param {UseContainerProps} ContainerProps - Props for the utility
+ * @param {string} ContainerProps.className - Optional custom className
+ * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
+ * @returns {UseContainerProps} - Object with undefined values removed
+ */
+export declare const useContainerProps: ({ className, dataTestId }: UseContainerProps) => {
+    className: string | undefined;
+    "data-testid": string | undefined;
+};

package/src/components/Alert/Alert.d.ts

@@ -1,53 +1,53 @@
-import { IntentColors } from "@trackunit/ui-design-tokens";
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export type AlertActionType = "primary" | "secondary";
-export type AlertAction = {
-    label: string;
-    onClick: () => void;
-    loading?: boolean;
-};
-export interface AlertProps extends CommonProps {
-    /**
-     * Child nodes.
-     */
-    children?: React.ReactNode;
-    /**
-     * Color of the alert component.
-     *
-     */
-    color?: IntentColors;
-    /**
-     * Title of the alert component.
-     */
-    title?: string;
-    /**
-     * Action to be performed on clicking the primary button.
-     */
-    primaryAction?: AlertAction;
-    /**
-     * Action to be performed on clicking the secondary button.
-     */
-    secondaryAction?: AlertAction;
-    /**
-     * OnClose Event.
-     */
-    onClose?: () => void;
-    /**
-     * Whether the contents should be displayed inline or not.
-     */
-    inline?: boolean;
-    /**
-     * A prop to enable autoscroll to alert element
-     *
-     * could be used for displaying errors on long scrollable forms
-     */
-    autoScroll?: boolean;
-}
-/**
- * The Alert component should be used to inform the user of important information.
- *
- * @param {AlertProps} props - The props for the Alert component
- * @returns {JSX.Element} Alert component
- */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;
+import { IntentColors } from "@trackunit/ui-design-tokens";
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export type AlertActionType = "primary" | "secondary";
+export type AlertAction = {
+    label: string;
+    onClick: () => void;
+    loading?: boolean;
+};
+export interface AlertProps extends CommonProps {
+    /**
+     * Child nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * Color of the alert component.
+     *
+     */
+    color?: IntentColors;
+    /**
+     * Title of the alert component.
+     */
+    title?: string;
+    /**
+     * Action to be performed on clicking the primary button.
+     */
+    primaryAction?: AlertAction;
+    /**
+     * Action to be performed on clicking the secondary button.
+     */
+    secondaryAction?: AlertAction;
+    /**
+     * OnClose Event.
+     */
+    onClose?: () => void;
+    /**
+     * Whether the contents should be displayed inline or not.
+     */
+    inline?: boolean;
+    /**
+     * A prop to enable autoscroll to alert element
+     *
+     * could be used for displaying errors on long scrollable forms
+     */
+    autoScroll?: boolean;
+}
+/**
+ * The Alert component should be used to inform the user of important information.
+ *
+ * @param {AlertProps} props - The props for the Alert component
+ * @returns {JSX.Element} Alert component
+ */
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;

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

@@ -1,18 +1,18 @@
-export declare const cvaAlert: (props?: ({
-    color?: "danger" | "warning" | "success" | "info" | null | undefined;
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertDetails: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaAlertContentBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaAlertRightAligned: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertContent: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertCloseButtonContainer: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertIconContainer: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlert: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | null | undefined;
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertDetails: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaAlertContentBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaAlertRightAligned: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertContent: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertCloseButtonContainer: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertIconContainer: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1 @@
-export * from "./Alert";
+export * from "./Alert";

package/src/components/Badge/Badge.d.ts

@@ -1,38 +1,38 @@
-/// <reference types="react" />
-import { ThemeColors } from "@trackunit/ui-design-tokens";
-import { CommonProps } from "../../common/CommonProps";
-type BadgeColors = Extract<ThemeColors, "primary" | "danger">;
-interface BaseBadgeProps extends CommonProps {
-    /**
-     * The color of the badge.
-     */
-    color?: BadgeColors;
-    /**
-     * Custom classNames can be added to make adjustments where needed.
-     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
-     * This will make the badge truncate the text if it is too long.
-     */
-    className?: string;
-    /**
-     * The count to be displayed on the badge.
-     */
-    count?: number;
-    /**
-     * The max value to be displayed in the badge.
-     * Any value above this will be appended with a +.
-     */
-    max?: number;
-    /**
-     * If enabled the badge is shown even if the count is 0.
-     */
-    hideZero?: boolean;
-}
-export type BadgeProps = BaseBadgeProps;
-/**
- * The Badge component is used to display a notification badge with an optional number value.
- *
- * @param {BadgeProps} props - The props for the Badge component
- * @returns {JSX.Element} Badge component
- */
-export declare const Badge: ({ color, className, count, max, hideZero, dataTestId, ...rest }: BadgeProps) => JSX.Element | null;
-export {};
+/// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { CommonProps } from "../../common/CommonProps";
+type BadgeColors = Extract<ThemeColors, "primary" | "danger">;
+interface BaseBadgeProps extends CommonProps {
+    /**
+     * The color of the badge.
+     */
+    color?: BadgeColors;
+    /**
+     * Custom classNames can be added to make adjustments where needed.
+     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
+     * This will make the badge truncate the text if it is too long.
+     */
+    className?: string;
+    /**
+     * The count to be displayed on the badge.
+     */
+    count?: number;
+    /**
+     * The max value to be displayed in the badge.
+     * Any value above this will be appended with a +.
+     */
+    max?: number;
+    /**
+     * If enabled the badge is shown even if the count is 0.
+     */
+    hideZero?: boolean;
+}
+export type BadgeProps = BaseBadgeProps;
+/**
+ * The Badge component is used to display a notification badge with an optional number value.
+ *
+ * @param {BadgeProps} props - The props for the Badge component
+ * @returns {JSX.Element} Badge component
+ */
+export declare const Badge: ({ color, className, count, max, hideZero, dataTestId, ...rest }: BadgeProps) => JSX.Element | null;
+export {};

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

@@ -1,3 +1,3 @@
-export declare const cvaBadge: (props?: ({
-    color?: "primary" | "danger" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaBadge: (props?: ({
+    color?: "primary" | "danger" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1 @@
-export * from "./Badge";
+export * from "./Badge";

package/src/components/Card/Card.d.ts

@@ -1,39 +1,39 @@
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export declare const ROLE_CARD = "region";
-export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDivElement> {
-    /**
-     * Whether the card should have full height or not.
-     */
-    fullHeight?: boolean;
-    /**
-     * The css grid area to place the card.
-     *
-     * @deprecated Use tailwind based grid layouts instead.
-     */
-    gridArea?: string;
-    /**
-     * Children to show in the card
-     */
-    children?: React.ReactNode;
-    /**
-     * A Click handler function
-     */
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * A MouseEnter handler function
-     */
-    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * A MouseLEave handler function
-     */
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-}
-/**
- * The Card component is a container for UI elements, and is the main component of the modal.
- * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
- *
- * @param {CardProps} props - The props for the Card component
- * @returns {JSX.Element} Card component
- */
-export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, gridArea, ...rest }: CardProps) => JSX.Element;
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare const ROLE_CARD = "region";
+export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the card should have full height or not.
+     */
+    fullHeight?: boolean;
+    /**
+     * The css grid area to place the card.
+     *
+     * @deprecated Use tailwind based grid layouts instead.
+     */
+    gridArea?: string;
+    /**
+     * Children to show in the card
+     */
+    children?: React.ReactNode;
+    /**
+     * A Click handler function
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A MouseEnter handler function
+     */
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A MouseLEave handler function
+     */
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+/**
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
+ *
+ * @param {CardProps} props - The props for the Card component
+ * @returns {JSX.Element} Card component
+ */
+export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, gridArea, ...rest }: CardProps) => JSX.Element;

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

@@ -1,13 +1,13 @@
-export declare const cvaCard: (props?: ({
-    clickable?: boolean | null | undefined;
-    fullHeight?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCardFooterDensityContainer: (props?: ({
-    border?: "default" | "borderless" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCardHeaderDensityContainer: (props?: ({
-    border?: "default" | "borderless" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCard: (props?: ({
+    clickable?: boolean | null | undefined;
+    fullHeight?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCardFooterDensityContainer: (props?: ({
+    border?: "default" | "borderless" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCardHeaderDensityContainer: (props?: ({
+    border?: "default" | "borderless" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Card/CardBody.d.ts

@@ -1,25 +1,25 @@
-import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
-export interface CardBodyProps extends CommonProps {
-    /**
-     * Sets gap, padding and margin.
-     */
-    density?: Density;
-    /**
-     * Set gap to be 0px (not preferable)
-     */
-    disableGap?: boolean;
-    /**
-     * Child elements to render in the body
-     */
-    children: React.ReactNode | null;
-}
-/**
- * The CardBody component should be used to inform the user of important information.
- *
- * @summary For applying padding and gap to a Card.
- * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
- * @param {CardBodyProps} props - The props for the CardBody component
- * @returns {JSX.Element} CardBody component
- */
-export declare const CardBody: ({ density, children, dataTestId, className, disableGap }: CardBodyProps) => JSX.Element;
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+export interface CardBodyProps extends CommonProps {
+    /**
+     * Sets gap, padding and margin.
+     */
+    density?: Density;
+    /**
+     * Set gap to be 0px (not preferable)
+     */
+    disableGap?: boolean;
+    /**
+     * Child elements to render in the body
+     */
+    children: React.ReactNode | null;
+}
+/**
+ * The CardBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Card.
+ * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
+ * @param {CardBodyProps} props - The props for the CardBody component
+ * @returns {JSX.Element} CardBody component
+ */
+export declare const CardBody: ({ density, children, dataTestId, className, disableGap }: CardBodyProps) => JSX.Element;

package/src/components/Card/CardFooter.d.ts

@@ -1,25 +1,25 @@
-import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
-export interface CardFooterProps extends CommonProps {
-    /**
-     * Sets gap, padding and margin.
-     */
-    density?: Density;
-    /**
-     * Element to render in the footer
-     */
-    children?: React.ReactNode | null;
-    /**
-     * Wether or not a seperator line should be rendered
-     */
-    hideSeparator?: boolean;
-}
-/**
- * A simple footer intended to use with Cards and Modals.
- * Currently only intended to contain Buttons.
- * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
- *
- * @param {CardFooterProps} props - The props for the CardFooter component
- * @returns {JSX.Element} CardFooter component
- */
-export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator }: CardFooterProps) => JSX.Element;
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+export interface CardFooterProps extends CommonProps {
+    /**
+     * Sets gap, padding and margin.
+     */
+    density?: Density;
+    /**
+     * Element to render in the footer
+     */
+    children?: React.ReactNode | null;
+    /**
+     * Wether or not a seperator line should be rendered
+     */
+    hideSeparator?: boolean;
+}
+/**
+ * A simple footer intended to use with Cards and Modals.
+ * Currently only intended to contain Buttons.
+ * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
+ *
+ * @param {CardFooterProps} props - The props for the CardFooter component
+ * @returns {JSX.Element} CardFooter component
+ */
+export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator }: CardFooterProps) => JSX.Element;