@luscii-healthtech/web-ui 27.8.4 → 27.9.0

package/dist/components/TimelineCardLayout/TimelineCardLayout.d.ts

@@ -1,27 +1,18 @@
 import React from "react";
 import { Stack } from "../Stack/Stack";
 type Props = {
-    /**
-     * The title of the cell
-     */
-    title: string;
-    /**
-     * Renders an empasized version of the dot and title to emphasize them.
-     * This should be used to indicate special moments in the timeline like the day or week of the moment.
-     *
-     * @default false
-     */
-    emphasized?: boolean;
     /**
      * Sets the lineStyle to be either solid or dashed.
-     * This should be used to indicate an incomplete duration like the first week of a moment.
+     * Can be set to "dashed" to indicate an incomplete duration like the first week of a moment or "solid" for a complete duration.
      *
      * @default "solid"
      */
-    lineStyle?: "solid" | "dashed";
+    lineStyle?: "solid" | "dashed" | null;
+    /**
+     * The style of the dot, no dot will be rendered when this is not set.
+     * Can be set to "empasised" to indicate special moments in the timeline like the day or week of the moment or "regular" for other moments.
+     */
+    dotStyle?: "regular" | "emphasized" | null;
 } & React.ComponentProps<typeof Stack>;
-/**
- * Lays out its content with a timeline indicator, line and a title.
- */
 export declare const TimelineCardLayout: React.FC<Props>;
 export {};

package/dist/index.development.js

@@ -6099,35 +6099,35 @@ const TimelineCard = ({ title, subtitle, icon, statusText, state = "default", di
   );
 };
 
-const TimelineDot = () => React__namespace.default.createElement(
+const TimelineDot = ({ className }) => React__namespace.default.createElement(
   "svg",
-  { width: "24", height: "24", fill: "none" },
+  { width: "24", height: "24", fill: "none", className },
   React__namespace.default.createElement("circle", { width: "16", height: "16", cx: "12", cy: "12", r: "8", className: "ui-fill-blue-300" })
 );
-const TimelineEmphasizedDot = () => React__namespace.default.createElement(
+const TimelineEmphasizedDot = ({ className }) => React__namespace.default.createElement(
   "svg",
-  { width: "24", height: "24", fill: "none" },
+  { width: "24", height: "24", fill: "none", className },
   React__namespace.default.createElement("circle", { cx: "12", cy: "11.5", r: "9.5", className: "ui-fill-white ui-stroke-blue-800 ui-stroke-[4px]" })
 );
 const TimelineCardLayout = (_a) => {
-  var { title, lineStyle = "solid", emphasized = false, children } = _a, stackProps = __rest(_a, ["title", "lineStyle", "emphasized", "children"]);
+  var { dotStyle, lineStyle = "solid", children } = _a, stackProps = __rest(_a, ["dotStyle", "lineStyle", "children"]);
   return React__namespace.default.createElement(
     Stack,
-    Object.assign({ axis: "x", className: classNames__default.default({
-      "ui-timelineCardLayout-line--dashed": lineStyle === "dashed",
-      "ui-timelineCardLayout-line--solid": lineStyle === "solid"
-    }, "ui-bg-[left_11px_top]"), gap: "s", width: "full" }, stackProps),
-    React__namespace.default.createElement(Box, { "aria-hidden": "true" }, emphasized ? React__namespace.default.createElement(TimelineEmphasizedDot, null) : React__namespace.default.createElement(TimelineDot, null)),
+    Object.assign({ axis: "x", gap: "s", width: "full", align: "stretch" }, stackProps),
     React__namespace.default.createElement(
-      Stack,
-      { gap: "s", width: "full" },
+      "div",
+      { "aria-hidden": "true", className: classNames__default.default("ui-relative ui-w-full ui-max-w-[24px] ui-bg-[left_11px_top]") },
       React__namespace.default.createElement(
-        Stack,
-        { axis: "x", gap: "s", align: "center" },
-        React__namespace.default.createElement(Title, { type: "xs", color: emphasized ? "blue-800" : "base" }, title)
-      ),
-      children
-    )
+        "div",
+        { className: classNames__default.default("ui-absolute ui-top-[-8px] ui-h-[calc(100%+16px)] ui-w-full ui-max-w-[24px] ui-bg-[left_11px_top]", {
+          "ui-timelineCardLayout-line--dashed": lineStyle === "dashed",
+          "ui-timelineCardLayout-line--solid": lineStyle === "solid"
+        }) },
+        dotStyle === "emphasized" && React__namespace.default.createElement(TimelineEmphasizedDot, { className: "ui-absolute ui-bottom-0 ui-top-0 ui-my-auto" }),
+        dotStyle === "regular" && React__namespace.default.createElement(TimelineDot, { className: "ui-absolute ui-bottom-0 ui-top-0 ui-my-auto" })
+      )
+    ),
+    React__namespace.default.createElement(Box, { width: "full" }, children)
   );
 };