@trackunit/react-components 1.9.44 → 1.9.47

package/index.cjs.js

@@ -2345,6 +2345,12 @@ const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "mi
             default: "pt-0",
             compact: "pt-1",
         },
+        hasLink: {
+            true: "pl-1",
+        },
+    },
+    defaultVariants: {
+        hasLink: false,
     },
 });
 const cvaDetailsListItem = cssClassVarianceUtilities.cvaMerge(["last:truncate"]);
@@ -2356,10 +2362,11 @@ const cvaDetailsListItem = cssClassVarianceUtilities.cvaMerge(["last:truncate"])
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
  * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
+ * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
  * @returns {ReactElement} The details list element.
  */
-const DetailsList = ({ details, className, density = "default" }) => {
-    return (jsxRuntime.jsx("div", { className: cvaDetailsList({ className, density }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+const DetailsList = ({ details, className, density = "default", hasLink = false, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaDetailsList({ className, density, hasLink }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
 };
 
 /**
@@ -2536,16 +2543,45 @@ const EmptyValue = ({ className, dataTestId }) => {
     return (jsxRuntime.jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
 };
 
-const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
+const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"], {
+    variants: {
+        color: {
+            primary: [
+                "text-primary-600",
+                "hover:text-primary-800",
+                "decoration-primary-600",
+                "hover:decoration-primary-800",
+                "font-medium",
+            ],
+            neutral: [
+                "text-neutral-800",
+                "hover:text-neutral-900",
+                "decoration-neutral-200",
+                "hover:no-underline",
+                "hover:bg-neutral-200",
+                "rounded",
+                "px-1",
+                "py-0.5",
+                "transition-all",
+                "duration-150",
+                "ease-in-out",
+                "font-semibold",
+            ],
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
 
 /**
- *  The external link component is used to link to an external page outside the Trackunit Manager.
+ *  Link is an interactive element that allows users to navigate between different parts of an application or to external resources. Links are used to indicate clickable text.
  
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {ReactElement} External Link component
  */
-const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
-    return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, color = "primary", }) => {
+    return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className, color }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
 const cvaHighlight = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -2343,6 +2343,12 @@ const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "t
             default: "pt-0",
             compact: "pt-1",
         },
+        hasLink: {
+            true: "pl-1",
+        },
+    },
+    defaultVariants: {
+        hasLink: false,
     },
 });
 const cvaDetailsListItem = cvaMerge(["last:truncate"]);
@@ -2354,10 +2360,11 @@ const cvaDetailsListItem = cvaMerge(["last:truncate"]);
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
  * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
+ * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
  * @returns {ReactElement} The details list element.
  */
-const DetailsList = ({ details, className, density = "default" }) => {
-    return (jsx("div", { className: cvaDetailsList({ className, density }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+const DetailsList = ({ details, className, density = "default", hasLink = false, }) => {
+    return (jsx("div", { className: cvaDetailsList({ className, density, hasLink }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
 };
 
 /**
@@ -2534,16 +2541,45 @@ const EmptyValue = ({ className, dataTestId }) => {
     return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
 };
 
-const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
+const cvaExternalLink = cvaMerge(["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"], {
+    variants: {
+        color: {
+            primary: [
+                "text-primary-600",
+                "hover:text-primary-800",
+                "decoration-primary-600",
+                "hover:decoration-primary-800",
+                "font-medium",
+            ],
+            neutral: [
+                "text-neutral-800",
+                "hover:text-neutral-900",
+                "decoration-neutral-200",
+                "hover:no-underline",
+                "hover:bg-neutral-200",
+                "rounded",
+                "px-1",
+                "py-0.5",
+                "transition-all",
+                "duration-150",
+                "ease-in-out",
+                "font-semibold",
+            ],
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
 
 /**
- *  The external link component is used to link to an external page outside the Trackunit Manager.
+ *  Link is an interactive element that allows users to navigate between different parts of an application or to external resources. Links are used to indicate clickable text.
  
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {ReactElement} External Link component
  */
-const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
-    return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, color = "primary", }) => {
+    return (jsx("a", { className: cvaExternalLink({ className, color }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
 const cvaHighlight = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.44",
+  "version": "1.9.47",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.31",
-    "@trackunit/css-class-variance-utilities": "1.7.30",
-    "@trackunit/shared-utils": "1.9.30",
-    "@trackunit/ui-icons": "1.7.32",
-    "@trackunit/react-test-setup": "1.4.30",
+    "@trackunit/ui-design-tokens": "1.7.33",
+    "@trackunit/css-class-variance-utilities": "1.7.32",
+    "@trackunit/shared-utils": "1.9.32",
+    "@trackunit/ui-icons": "1.7.34",
+    "@trackunit/react-test-setup": "1.4.32",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/components/DetailsList/DetailsList.d.ts

@@ -3,6 +3,7 @@ interface DetailsListProps {
     details: Array<string>;
     className?: string;
     density?: "compact" | "default";
+    hasLink?: boolean;
 }
 /**
  * Renders a one-line list of details separated by a Slash icon.
@@ -11,7 +12,8 @@ interface DetailsListProps {
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
  * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
+ * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
  * @returns {ReactElement} The details list element.
  */
-export declare const DetailsList: ({ details, className, density }: DetailsListProps) => ReactElement;
+export declare const DetailsList: ({ details, className, density, hasLink, }: DetailsListProps) => ReactElement;
 export {};

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

@@ -1,4 +1,5 @@
 export declare const cvaDetailsList: (props?: ({
     density?: "default" | "compact" | null | undefined;
+    hasLink?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaDetailsListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -17,6 +17,10 @@ export interface ExternalLinkProps extends CommonProps {
      * Where to display the linked URL. Defaults to "_blank".
      */
     target?: "_blank" | "_self" | "_parent" | "top";
+    /**
+     * The color variant of the link. Defaults to "primary".
+     */
+    color?: "primary" | "neutral";
     /**
      * Used to specify the relationship between the link and the current document. Defaults to "noreferrer".
      */
@@ -24,9 +28,9 @@ export interface ExternalLinkProps extends CommonProps {
     onClick?: (event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => void;
 }
 /**
- *  The external link component is used to link to an external page outside the Trackunit Manager.
+ *  Link is an interactive element that allows users to navigate between different parts of an application or to external resources. Links are used to indicate clickable text.
  
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {ReactElement} External Link component
  */
-export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, onClick, }: ExternalLinkProps) => ReactElement;
+export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, onClick, color, }: ExternalLinkProps) => ReactElement;

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

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