@luscii-healthtech/web-ui 42.13.2 → 43.0.0

package/dist/index.development.js

@@ -1259,6 +1259,7 @@ const Stack = (props) => {
     "ui:justify-between": justify === "between",
     "ui:justify-around": justify === "around",
     "ui:justify-evenly": justify === "evenly",
+    "ui:justify-stretch": justify === "stretch",
     "ui:items-center": align === "center",
     "ui:items-start": align === "start",
     "ui:items-end": align === "end",
@@ -4099,19 +4100,32 @@ Page.propTypes = {
   navLayoutProps: PropTypes__default.default.object
 };
 
-const Step = ({ title, stepNumber, active, localization }) => {
-  const barColor = active ? "ui:bg-primary" : "ui:bg-slate-200";
-  return jsxRuntime.jsxs("div", { className: "ui:w-full", children: [jsxRuntime.jsx("div", { className: `ui:mb-2 ui:h-1 ui:w-full ui:rounded ${barColor}` }), jsxRuntime.jsx(Text, { text: `${localization.step} ${stepNumber}`, type: "strong", color: active ? "blue-800" : "slate-500" }), jsxRuntime.jsx(Text, { text: title, type: "strong" })] });
+const Step = ({ title, subtitle, state = "completed" }) => {
+  let barColor = "ui:bg-slate-200";
+  let titleColor = "slate-500";
+  switch (state) {
+    case "completed":
+    case "current":
+      barColor = "ui:bg-primary";
+      titleColor = "blue-800";
+      break;
+  }
+  return jsxRuntime.jsxs(Box, { width: "full", children: [jsxRuntime.jsx(Box, { mb: "xxs", width: "full", className: classNames__default.default("ui:h-1 ui:rounded", barColor) }), jsxRuntime.jsx(Text, { variant: "strong", color: titleColor, children: title }), subtitle && jsxRuntime.jsx(Text, { variant: "strong", color: "base", children: subtitle })] });
 };
 
-const Steps = ({ orderedStepTitles, currentStep, className, localization }) => {
-  const renderedSteps = orderedStepTitles.map((stepTitle, index) => jsxRuntime.jsx(
-    Step,
-    { title: stepTitle, stepNumber: index + 1, active: index + 1 <= currentStep, localization },
-    `step-${index}-${stepTitle.split(" ")[0]}`
-  ));
-  return jsxRuntime.jsx("div", { className: `ui:flex ui:flex-row ui:justify-items-stretch ui:space-x-6 ${className}`, children: renderedSteps });
+const Steps = (props) => {
+  const { children, className } = props;
+  return jsxRuntime.jsx(Stack, { axis: "x", justify: "stretch", gap: "l", className, children: React__namespace.default.Children.map(children, (child) => {
+    if (!React__namespace.default.isValidElement(child)) {
+      return null;
+    }
+    if (child.type === Step) {
+      return jsxRuntime.jsx(Step, Object.assign({}, child.props));
+    }
+    return child;
+  }) });
 };
+Steps.Step = Step;
 
 const isBreadcrumbDividerProps = (subject) => {
   if (!subject || typeof subject !== "object") {
@@ -4260,7 +4274,16 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
      * since the spacing needed will be occupied by the `belowHeader` component itself.
      */
     { "ui:mt-xl": !belowHeader }
-  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: accessory ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
+  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", children: steps.titles.map((stepTitle, index) => {
+    const stepNumber = index + 1;
+    let state = "upcoming";
+    if (stepNumber < steps.currentStep) {
+      state = "completed";
+    } else if (stepNumber === steps.currentStep) {
+      state = "current";
+    }
+    return jsxRuntime.jsx(Steps.Step, { title: `${steps.localization.step} ${stepNumber}`, subtitle: stepTitle, state }, stepTitle);
+  }) }), children, jsxRuntime.jsx(Line, { left: accessory ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
 };
 const PageHeaderBlock = ({ header, title }) => {
   if (!title && !header) {
@@ -6358,8 +6381,11 @@ const Aside = (props) => {
 SplitViewLayout.Aside = Aside;
 
 const Header = (props) => {
-  const { children, className, leftActionSlot, rightActionSlot } = props, restProps = __rest(props, ["children", "className", "leftActionSlot", "rightActionSlot"]);
-  const classes = classNames__default.default(className, "ui:max-w-[100vw] ui:content-center");
+  const { children, className, leftActionSlot, rightActionSlot, slotsAlignment = "center" } = props, restProps = __rest(props, ["children", "className", "leftActionSlot", "rightActionSlot", "slotsAlignment"]);
+  const classes = classNames__default.default(className, "ui:max-w-[100vw]", {
+    "ui:items-center": slotsAlignment === "center",
+    "ui:items-start": slotsAlignment === "start"
+  });
   return jsxRuntime.jsxs(Stack, Object.assign({ as: "header", p: "xl", axis: "x", className: classes, gap: "xxl", align: "center", justify: "center", backgroundColor: "background" }, restProps, { children: [(leftActionSlot || rightActionSlot) && jsxRuntime.jsx(Box, { className: "ui:w-[--spacing(9)] ui:h-[--spacing(9)]", children: leftActionSlot }), jsxRuntime.jsx(Stack, { axis: "x", justify: "center", width: "full", className: "ui:lg:max-w-[--spacing(310)]", children: jsxRuntime.jsx(Box, { width: "full", children }) }), (leftActionSlot || rightActionSlot) && jsxRuntime.jsx(Box, { className: "ui:w-[--spacing(9)] ui:h-[--spacing(9)]", children: rightActionSlot })] }));
 };
 Header.displayName = "PageWithCenteredContentLayout.Header";