@aivenio/aquarium 6.3.0 → 6.4.0

package/dist/system.mjs

@@ -1815,7 +1815,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,1)",
-    variable: "rgba(123,45,139,1)",
+    variable: "rgba(91,30,103,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",
@@ -13955,30 +13955,84 @@ import React128 from "react";
 import { tv as tv34 } from "tailwind-variants";
 var connectorStyles = tv34({
   slots: {
-    container: "absolute w-full -left-1/2",
-    connector: "w-full"
+    container: "absolute",
+    connector: ""
   },
   variants: {
     completed: {
       true: { connector: "bg-success-graphic" },
-      false: { connector: "bg-intense" }
+      false: { connector: "bg-muted" }
     },
-    dense: {
-      true: {
-        container: "top-[3px] px-[14px]",
-        connector: "h-[3px]"
+    direction: {
+      horizontal: {
+        container: "w-full -left-1/2"
       },
-      false: {
-        container: "top-[14px] px-[20px]",
-        connector: "h-[2px]"
+      vertical: {
+        container: "h-full -top-2/3"
       }
+    },
+    dense: {
+      true: {},
+      false: {}
     }
-  }
+  },
+  compoundSlots: [
+    // Horizontal layout - horizontal connectors between side-by-side steps
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: true,
+      class: "top-[3px] px-[14px]"
+    },
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: false,
+      class: "top-[14px] px-[20px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: true,
+      class: "w-full h-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: false,
+      class: "w-full h-[2px]"
+    },
+    // Vertical layout - vertical connectors between stacked steps
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: true,
+      class: "left-[3px] pt-[4px] pb-[24px]"
+    },
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: false,
+      class: "left-[16px] pt-[12px] pb-[30px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: true,
+      class: "h-full w-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: false,
+      class: "h-full w-[2px]"
+    }
+  ]
 });
 var stepStyles = tv34({
   slots: {
-    step: "flex flex-col items-center relative text-center",
-    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
+    step: "flex relative text-center",
+    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center"
   },
   variants: {
     state: {
@@ -13986,6 +14040,16 @@ var stepStyles = tv34({
       completed: { step: "text-intense" },
       inactive: { step: "text-inactive" }
     },
+    direction: {
+      vertical: {
+        step: "flex-row items-center pb-8",
+        indicator: "mr-l1"
+      },
+      horizontal: {
+        step: "flex-col items-center",
+        indicator: "mx-2 mb-3"
+      }
+    },
     dense: {
       true: { indicator: "h-[8px] w-[8px]" },
       false: { indicator: "h-[32px] w-[32px]" }
@@ -14003,7 +14067,7 @@ var stepStyles = tv34({
       slots: ["indicator"],
       dense: false,
       state: "inactive",
-      class: "border-2 border-default"
+      class: "border-2 border-muted"
     },
     {
       slots: ["indicator"],
@@ -14036,22 +14100,42 @@ var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React128.createElement
 var ConnectorContainer = ({
   className,
   dense = false,
+  direction = "horizontal",
   ...rest
 }) => {
-  const { container: container2 } = connectorStyles({ dense });
+  const { container: container2 } = connectorStyles({ dense, direction });
   return /* @__PURE__ */ React128.createElement("div", { ...rest, className: container2({ className }) });
 };
-var Connector = ({ children, className, completed = false, dense = false, ...rest }) => {
-  const { connector } = connectorStyles({ completed, dense });
+var Connector = ({
+  children,
+  className,
+  completed = false,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { connector } = connectorStyles({ completed, dense, direction });
   return /* @__PURE__ */ React128.createElement("div", { ...rest, className: connector({ className }) });
 };
-var Step = ({ className, state, ...rest }) => {
-  const { step } = stepStyles({ state });
+var Step = ({
+  className,
+  state,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { step } = stepStyles({ state, direction });
   return /* @__PURE__ */ React128.createElement("div", { ...rest, className: step({ className }) });
 };
-var Indicator = ({ children, className, state, dense = false, ...rest }) => {
-  const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ React128.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React128.createElement(InlineIcon, { icon: tick_default }) : dense ? null : children);
+var Indicator = ({
+  children,
+  className,
+  state,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { indicator } = stepStyles({ state, dense, direction });
+  return /* @__PURE__ */ React128.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React128.createElement(InlineIcon, { icon: tick_default, className: dense ? "scale-125" : void 0 }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -14059,14 +14143,37 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
-var Stepper2 = ({ children, activeIndex, dense }) => {
+var Stepper2 = ({
+  children,
+  activeIndex,
+  dense,
+  direction = "horizontal"
+}) => {
   const steps = React129.Children.count(children);
-  return /* @__PURE__ */ React129.createElement(Stepper, { role: "list", className: "Aquarium-Stepper" }, /* @__PURE__ */ React129.createElement(Template, { columns: steps }, React129.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ React129.createElement(Stepper, { role: "list", className: "Aquarium-Stepper" }, /* @__PURE__ */ React129.createElement(Template, { columns: direction === "horizontal" ? steps : 1 }, React129.Children.map(children, (child, index) => {
     if (!isComponentType(child, Step2)) {
       throw new Error("<Stepper> can only have <Stepper.Step> components as children");
     } else {
       const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
-      return /* @__PURE__ */ React129.createElement(Stepper.Step, { state, "aria-current": state === "active" ? "step" : false, role: "listitem" }, index > 0 && index <= steps && /* @__PURE__ */ React129.createElement(Stepper.ConnectorContainer, { dense }, /* @__PURE__ */ React129.createElement(Stepper.ConnectorContainer.Connector, { completed: state === "completed" || state === "active" })), /* @__PURE__ */ React129.createElement(Stepper.Step.Indicator, { state, dense }, index + 1), child.props.children);
+      return /* @__PURE__ */ React129.createElement(
+        Stepper.Step,
+        {
+          state,
+          "aria-current": state === "active" ? "step" : false,
+          direction,
+          role: "listitem"
+        },
+        index > 0 && index <= steps && /* @__PURE__ */ React129.createElement(Stepper.ConnectorContainer, { dense, direction }, /* @__PURE__ */ React129.createElement(
+          Stepper.ConnectorContainer.Connector,
+          {
+            completed: state === "completed" || state === "active",
+            dense,
+            direction
+          }
+        )),
+        /* @__PURE__ */ React129.createElement(Stepper.Step.Indicator, { state, dense, direction }, index + 1),
+        child.props.children
+      );
     }
   })));
 };

package/dist/tokens.json

@@ -189,7 +189,7 @@
   "code": {
     "background": "rgba(250,250,250,1)",
     "text": "rgba(45,46,48,1)",
-    "variable": "rgba(123,45,139,1)",
+    "variable": "rgba(91,30,103,1)",
     "keyword": "rgba(202, 33, 101, 1)",
     "string": "rgba(0, 127, 115, 1)",
     "function": "rgba(9, 128, 193, 1)",