@aivenio/aquarium 6.2.0 → 6.4.0

package/dist/atoms.mjs

@@ -809,6 +809,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,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)",
@@ -3457,7 +3458,7 @@ var toolbarContainerClasses = tv14({
   base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
-      true: "sticky top-[47px] bg-layer z-10",
+      true: "sticky top-[43px] bg-layer z-10",
       false: ""
     }
   }
@@ -6625,38 +6626,46 @@ var InputGroup = ({ cols = "1", children, ...rest }) => {
 // src/atoms/Modal/Modal.tsx
 import React38 from "react";
 import { tv as tv18 } from "tailwind-variants";
-var bodyMaskClasses = tv18({
-  variants: {
-    position: {
-      before: [
-        'before:content-[""]',
-        "before:pointer-events-none",
-        "before:sticky",
-        "before:top-0",
-        "before:left-0",
-        "before:h-5",
-        "before:flex-shrink-0",
-        "before:bg-gradient-to-b",
-        "before:from-overlay",
-        "before:to-transparent",
-        "before:z-10"
-      ],
-      after: [
-        'after:content-[""]',
-        "after:pointer-events-none",
-        "after:sticky",
-        "after:bottom-3",
-        "after:left-0",
-        "after:h-5",
-        "after:flex-shrink-0",
-        "after:bg-gradient-to-t",
-        "after:from-overlay",
-        "after:to-transparent",
-        "after:z-10"
-      ]
+
+// src/utils/useScrollFade.ts
+import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState2 } from "react";
+var useScrollFade = () => {
+  const topSentinelRef = useRef2(null);
+  const bottomSentinelRef = useRef2(null);
+  const observerRef = useRef2(null);
+  const [showTopFade, setShowTopFade] = useState2(false);
+  const [showBottomFade, setShowBottomFade] = useState2(false);
+  const containerRef = useCallback((container2) => {
+    observerRef.current?.disconnect();
+    if (!container2) {
+      return;
     }
-  }
-});
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === topSentinelRef.current) {
+            setShowTopFade(!entry.isIntersecting);
+          } else if (entry.target === bottomSentinelRef.current) {
+            setShowBottomFade(!entry.isIntersecting);
+          }
+        });
+      },
+      { root: container2, threshold: 0 }
+    );
+    if (topSentinelRef.current) {
+      observerRef.current.observe(topSentinelRef.current);
+    }
+    if (bottomSentinelRef.current) {
+      observerRef.current.observe(bottomSentinelRef.current);
+    }
+  }, []);
+  useEffect4(() => {
+    return () => observerRef.current?.disconnect();
+  }, []);
+  return { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade };
+};
+
+// src/atoms/Modal/Modal.tsx
 var modalStyles = tv18({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
@@ -6668,11 +6677,7 @@ var modalStyles = tv18({
     title: "",
     subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
-    body: [
-      "grow overflow-y-auto text-default flex flex-col outline-none",
-      bodyMaskClasses({ position: "before" }),
-      bodyMaskClasses({ position: "after" })
-    ],
+    body: "grow overflow-y-auto text-default flex flex-col outline-none",
     bodyContent: "px-7 grow",
     footer: "px-7 pt-4 pb-6",
     actions: "flex gap-3 justify-end"
@@ -6716,10 +6721,48 @@ var modalStyles = tv18({
       false: {
         headerImage: "bg-medium"
       }
+    },
+    showTopFade: {
+      true: {
+        body: [
+          'before:content-[""]',
+          "before:pointer-events-none",
+          "before:sticky",
+          "before:top-0",
+          "before:left-0",
+          "before:h-5",
+          "before:-mb-5",
+          "before:flex-shrink-0",
+          "before:bg-gradient-to-b",
+          "before:from-overlay",
+          "before:to-transparent",
+          "before:z-10"
+        ]
+      }
+    },
+    showBottomFade: {
+      true: {
+        body: [
+          'after:content-[""]',
+          "after:pointer-events-none",
+          "after:sticky",
+          "after:bottom-0",
+          "after:left-0",
+          "after:h-[60px]",
+          "after:-mt-[60px]",
+          "after:flex-shrink-0",
+          "after:bg-gradient-to-t",
+          "after:from-overlay",
+          "after:to-transparent",
+          "after:z-10"
+        ]
+      }
     }
   },
   defaultVariants: {
-    isResponsive: true
+    isResponsive: true,
+    showTopFade: false,
+    showBottomFade: false
   },
   compoundVariants: [
     {
@@ -6829,10 +6872,31 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ React38.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
+var ModalBody = ({
+  children,
+  className,
+  noFooter = false,
+  maxHeight,
+  style,
+  size,
+  ...rest
+}) => {
   const { body, bodyContent } = modalStyles({ size });
-  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ React38.createElement("div", { className: bodyContent({ noFooter }) }, children));
+  const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
+  return /* @__PURE__ */ React38.createElement(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      className: body({ className, showTopFade, showBottomFade }),
+      style: { maxHeight, ...style }
+    },
+    /* @__PURE__ */ React38.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
+    /* @__PURE__ */ React38.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ React38.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
+  );
 };
+Modal.Body = ModalBody;
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
   return /* @__PURE__ */ React38.createElement("div", { ...rest, className: footer({ className }) }, children);
@@ -7301,30 +7365,84 @@ import React46 from "react";
 import { tv as tv25 } from "tailwind-variants";
 var connectorStyles = tv25({
   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 = tv25({
   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: {
@@ -7332,6 +7450,16 @@ var stepStyles = tv25({
       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]" }
@@ -7349,7 +7477,7 @@ var stepStyles = tv25({
       slots: ["indicator"],
       dense: false,
       state: "inactive",
-      class: "border-2 border-default"
+      class: "border-2 border-muted"
     },
     {
       slots: ["indicator"],
@@ -7382,22 +7510,42 @@ var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React46.createElement(
 var ConnectorContainer = ({
   className,
   dense = false,
+  direction = "horizontal",
   ...rest
 }) => {
-  const { container: container2 } = connectorStyles({ dense });
+  const { container: container2 } = connectorStyles({ dense, direction });
   return /* @__PURE__ */ React46.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__ */ React46.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__ */ React46.createElement("div", { ...rest, className: step({ className }) });
 };
-var Indicator = ({ children, className, state, dense = false, ...rest }) => {
-  const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ React46.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React46.createElement(InlineIcon2, { icon: tick_default }) : dense ? null : children);
+var Indicator = ({
+  children,
+  className,
+  state,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { indicator } = stepStyles({ state, dense, direction });
+  return /* @__PURE__ */ React46.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React46.createElement(InlineIcon2, { icon: tick_default, className: dense ? "scale-125" : void 0 }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;

package/dist/charts.cjs

@@ -382,6 +382,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,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)",

package/dist/charts.mjs

@@ -242,6 +242,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,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)",

package/dist/src/atoms/DataList/DataList.js

@@ -96,7 +96,7 @@ const toolbarContainerClasses = tv({
     base: 'col-span-full flex items-stretch py-4 px-l2 border-b border-muted',
     variants: {
         sticky: {
-            true: 'sticky top-[47px] bg-layer z-10',
+            true: 'sticky top-[43px] bg-layer z-10',
             false: '',
         },
     },

package/dist/src/atoms/Modal/Modal.d.ts

@@ -77,6 +77,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     overlay: string;
     backdrop: string;
@@ -87,7 +97,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string;
     subtitle: string;
     closeButtonContainer: string;
-    body: string[];
+    body: string;
     bodyContent: string;
     footer: string;
     actions: string;
@@ -131,6 +141,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     kind: {
         dialog: {
@@ -171,6 +191,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }>, {
     kind: {
         dialog: {
@@ -211,6 +241,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     overlay: string;
     backdrop: string;
@@ -221,7 +261,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string;
     subtitle: string;
     closeButtonContainer: string;
-    body: string[];
+    body: string;
     bodyContent: string;
     footer: string;
     actions: string;
@@ -265,6 +305,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     overlay: string;
     backdrop: string;
@@ -275,7 +325,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string;
     subtitle: string;
     closeButtonContainer: string;
-    body: string[];
+    body: string;
     bodyContent: string;
     footer: string;
     actions: string;
@@ -319,6 +369,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     kind: {
         dialog: {
@@ -359,6 +419,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }>, unknown, unknown, undefined>>;
 export declare const Modal: ComposedModalProps & React.FC<DivProps & ModalProps>;
 export {};