@luscii-healthtech/web-ui 28.4.1 → 28.5.0

package/dist/components/TimelineCard/TimelineCard.d.ts

@@ -1,10 +1,10 @@
-import { type FC } from "react";
+import { type FC, type ReactNode } from "react";
 import { IconKey } from "../Icons/types/IconProps.type";
 type Props = {
     title: string;
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
-     * The icon which could either be a link to an image or an icon key
+     * @deprecated use leadingIcon instead.
      */
     icon?: {
         url: string;
@@ -13,6 +13,14 @@ type Props = {
         iconKey: IconKey;
         url?: never;
     };
+    /**
+     * The icon to render on the leading side of the card
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * The icon to render on the trailing side of the card
+     */
+    trailingIcon?: ReactNode;
     /**
      * Copy to display the status of the card
      */

package/dist/index.development.js

@@ -6127,7 +6127,7 @@ const StatusIndicator = (props) => {
   );
 };
 
-const TimelineCard = ({ title, subtitle, icon, statusText, state = "default", disabled = false, onClick }) => {
+const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, statusText, state = "default", disabled = false, onClick }) => {
   return React__namespace.default.createElement(
     Stack,
     { axis: "x", width: "full", align: "center" },
@@ -6143,21 +6143,27 @@ const TimelineCard = ({ title, subtitle, icon, statusText, state = "default", di
         }) },
         React__namespace.default.createElement(
           Stack,
-          { width: "full", gap: "xs", p: "m" },
-          statusText && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, statusText),
+          { width: "full", p: "m", axis: "x", justify: "between", align: "center" },
           React__namespace.default.createElement(
             Stack,
-            { gap: "m", axis: "x", align: "center" },
-            (icon === null || icon === void 0 ? void 0 : icon.url) && React__namespace.default.createElement("img", { className: "ui-flex-shrink-0", width: 24, height: 24, src: icon.url }),
-            (icon === null || icon === void 0 ? void 0 : icon.iconKey) && React__namespace.default.createElement(Icon, { className: "ui-flex-shrink-0", name: icon.iconKey }),
+            { gap: "xs" },
+            statusText && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, statusText),
             React__namespace.default.createElement(
               Stack,
-              null,
-              (state === "bold" || state === "highlighted") && React__namespace.default.createElement(Title, { type: "xs" }, title),
-              state === "default" && React__namespace.default.createElement(Text, { variant: "base", color: "slate-500" }, title),
-              subtitle && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, subtitle)
+              { gap: "m", axis: "x", align: "center" },
+              (icon === null || icon === void 0 ? void 0 : icon.url) && React__namespace.default.createElement("img", { className: "ui-flex-shrink-0", width: 24, height: 24, src: icon.url }),
+              (icon === null || icon === void 0 ? void 0 : icon.iconKey) && React__namespace.default.createElement(Icon, { className: "ui-flex-shrink-0", name: icon.iconKey }),
+              leadingIcon,
+              React__namespace.default.createElement(
+                Stack,
+                null,
+                (state === "bold" || state === "highlighted") && React__namespace.default.createElement(Title, { type: "xs" }, title),
+                state === "default" && React__namespace.default.createElement(Text, { variant: "base", color: "slate-500" }, title),
+                typeof subtitle === "string" ? React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, subtitle) : subtitle
+              )
             )
-          )
+          ),
+          trailingIcon
         )
       )
     ),