@mlw-packages/react-components 1.10.9 → 1.10.10

package/dist/index.d.mts

@@ -65,9 +65,10 @@ declare const useTheme: () => ThemeProviderState;
 type ModeToggleBaseProps = {
     themes?: Theme[];
     className?: string;
+    directToggle?: boolean;
     variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost";
 };
-declare function ModeToggleBase({ themes, className, variant, }: ModeToggleBaseProps): react_jsx_runtime.JSX.Element;
+declare function ModeToggleBase({ themes, className, directToggle, variant, }: ModeToggleBaseProps): react_jsx_runtime.JSX.Element;
 
 declare const AvatarBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImageBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;

package/dist/index.d.ts

@@ -65,9 +65,10 @@ declare const useTheme: () => ThemeProviderState;
 type ModeToggleBaseProps = {
     themes?: Theme[];
     className?: string;
+    directToggle?: boolean;
     variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost";
 };
-declare function ModeToggleBase({ themes, className, variant, }: ModeToggleBaseProps): react_jsx_runtime.JSX.Element;
+declare function ModeToggleBase({ themes, className, directToggle, variant, }: ModeToggleBaseProps): react_jsx_runtime.JSX.Element;
 
 declare const AvatarBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImageBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;

package/dist/index.js

@@ -3481,6 +3481,7 @@ var ThemeIcon = ({ theme }) => {
 function ModeToggleBase({
   themes = ["light", "dark", "system"],
   className,
+  directToggle = false,
   variant = "ghost"
 }) {
   const [mounted, setMounted] = React32.useState(false);
@@ -3531,6 +3532,40 @@ function ModeToggleBase({
       setTheme(newTheme);
     }
   };
+  const handleDirectToggle = () => {
+    const currentIndex = themes.indexOf(currentTheme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    toggleTheme(themes[nextIndex]);
+  };
+  if (directToggle) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ButtonBase,
+      {
+        ref: buttonRef,
+        variant,
+        size: "icon",
+        className: cn("relative overflow-hidden group", className),
+        onClick: handleDirectToggle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.SunIcon,
+              {
+                className: `h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100 group-hover:rotate-12"}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.MoonIcon,
+              {
+                className: `absolute h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-0 scale-100 opacity-100 group-hover:-rotate-12" : "rotate-90 scale-0 opacity-0"}`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(DropDownMenuBase, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       ButtonBase,
@@ -16649,23 +16684,35 @@ var Name = ({
     ] })
   ] }) });
 };
-var SystemNode = React32__namespace.default.forwardRef(({ label }, ref) => {
-  const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
-  const needsTooltip = label.length > 9;
-  const circle = /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default",
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
-    }
-  );
-  if (!needsTooltip) return circle;
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: circle }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
-  ] }) });
-});
+var SystemNode = React32__namespace.default.forwardRef(
+  ({ label }, ref) => {
+    const innerRef = React32.useRef(null);
+    const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
+    const needsTooltip = label.length > 9;
+    const setRefs = React32.useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const circle = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setRefs,
+        className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
+      }
+    );
+    if (!needsTooltip) return circle;
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: circle }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
+    ] }) });
+  }
+);
 SystemNode.displayName = "SystemNode";
 var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   const gradientId = React32.useId();
@@ -16726,7 +16773,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      className: "pointer-events-none absolute left-0 top-0 right-0",
+      className: "pointer-events-none absolute",
       width: svgSize.w,
       height: svgSize.h,
       fill: "none",
@@ -16746,7 +16793,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
           {
             d: pathD,
             stroke: `url(#${gradientId})`,
-            strokeWidth: 2,
+            strokeWidth: 4,
             strokeLinecap: "round",
             initial: { strokeOpacity: 0 },
             animate: { strokeOpacity: 1 },
@@ -16766,7 +16813,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
               y2: ["0%", "0%"]
             },
             transition: {
-              duration: 4,
+              duration: 2,
               ease: [0.16, 1, 0.3, 1],
               repeat: Infinity,
               repeatDelay: 0
@@ -16793,8 +16840,20 @@ var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
       ref: containerRef,
       className: "relative flex items-center justify-between py-1",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SystemNode, { ref: leftRef, label: isInput ? externalSystem : currentSystem }),
-        /* @__PURE__ */ jsxRuntime.jsx(SystemNode, { ref: rightRef, label: isInput ? currentSystem : externalSystem }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SystemNode,
+          {
+            ref: leftRef,
+            label: isInput ? externalSystem : currentSystem
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SystemNode,
+          {
+            ref: rightRef,
+            label: isInput ? currentSystem : externalSystem
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Beam,
           {
@@ -16813,7 +16872,6 @@ var BodyComponent = ({ data, isLoading, connections, isInput, externalSystem })
     /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-6 w-3/4" }),
     /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(Name, { name: data.name, description: data.description }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
   isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
@@ -16840,7 +16898,6 @@ var BodyComponent = ({ data, isLoading, connections, isInput, externalSystem })
         externalSystem
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase -mb-2", children: isInput ? "Informa\xE7\xF5es de Entrada" : "Informa\xE7\xF5es de Sa\xEDda" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: connections.map((conn) => /* @__PURE__ */ jsxRuntime.jsx(
       IntegrationCard,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './index.css';
 import * as React32 from 'react';
-import React32__default, { forwardRef, useState, useEffect, createContext, useMemo, useRef, useCallback, useId, useContext, useLayoutEffect } from 'react';
+import React32__default, { forwardRef, useState, useEffect, createContext, useRef, useCallback, useMemo, useId, useContext, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -3438,6 +3438,7 @@ var ThemeIcon = ({ theme }) => {
 function ModeToggleBase({
   themes = ["light", "dark", "system"],
   className,
+  directToggle = false,
   variant = "ghost"
 }) {
   const [mounted, setMounted] = useState(false);
@@ -3488,6 +3489,40 @@ function ModeToggleBase({
       setTheme(newTheme);
     }
   };
+  const handleDirectToggle = () => {
+    const currentIndex = themes.indexOf(currentTheme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    toggleTheme(themes[nextIndex]);
+  };
+  if (directToggle) {
+    return /* @__PURE__ */ jsxs(
+      ButtonBase,
+      {
+        ref: buttonRef,
+        variant,
+        size: "icon",
+        className: cn("relative overflow-hidden group", className),
+        onClick: handleDirectToggle,
+        children: [
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SunIcon,
+              {
+                className: `h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100 group-hover:rotate-12"}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MoonIcon,
+              {
+                className: `absolute h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-0 scale-100 opacity-100 group-hover:-rotate-12" : "rotate-90 scale-0 opacity-0"}`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(DropDownMenuBase, { children: [
     /* @__PURE__ */ jsx(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs(
       ButtonBase,
@@ -16606,23 +16641,35 @@ var Name = ({
     ] })
   ] }) });
 };
-var SystemNode = React32__default.forwardRef(({ label }, ref) => {
-  const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
-  const needsTooltip = label.length > 9;
-  const circle = /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default",
-      children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
-    }
-  );
-  if (!needsTooltip) return circle;
-  return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
-    /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: circle }),
-    /* @__PURE__ */ jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
-  ] }) });
-});
+var SystemNode = React32__default.forwardRef(
+  ({ label }, ref) => {
+    const innerRef = useRef(null);
+    const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
+    const needsTooltip = label.length > 9;
+    const setRefs = useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const circle = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRefs,
+        className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default",
+        children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
+      }
+    );
+    if (!needsTooltip) return circle;
+    return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
+      /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: circle }),
+      /* @__PURE__ */ jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
+    ] }) });
+  }
+);
 SystemNode.displayName = "SystemNode";
 var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   const gradientId = useId();
@@ -16683,7 +16730,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      className: "pointer-events-none absolute left-0 top-0 right-0",
+      className: "pointer-events-none absolute",
       width: svgSize.w,
       height: svgSize.h,
       fill: "none",
@@ -16703,7 +16750,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
           {
             d: pathD,
             stroke: `url(#${gradientId})`,
-            strokeWidth: 2,
+            strokeWidth: 4,
             strokeLinecap: "round",
             initial: { strokeOpacity: 0 },
             animate: { strokeOpacity: 1 },
@@ -16723,7 +16770,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
               y2: ["0%", "0%"]
             },
             transition: {
-              duration: 4,
+              duration: 2,
               ease: [0.16, 1, 0.3, 1],
               repeat: Infinity,
               repeatDelay: 0
@@ -16750,8 +16797,20 @@ var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
       ref: containerRef,
       className: "relative flex items-center justify-between py-1",
       children: [
-        /* @__PURE__ */ jsx(SystemNode, { ref: leftRef, label: isInput ? externalSystem : currentSystem }),
-        /* @__PURE__ */ jsx(SystemNode, { ref: rightRef, label: isInput ? currentSystem : externalSystem }),
+        /* @__PURE__ */ jsx(
+          SystemNode,
+          {
+            ref: leftRef,
+            label: isInput ? externalSystem : currentSystem
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SystemNode,
+          {
+            ref: rightRef,
+            label: isInput ? currentSystem : externalSystem
+          }
+        ),
         /* @__PURE__ */ jsx(
           Beam,
           {
@@ -16770,7 +16829,6 @@ var BodyComponent = ({ data, isLoading, connections, isInput, externalSystem })
     /* @__PURE__ */ jsx(SkeletonBase, { className: "h-6 w-3/4" }),
     /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
   ] }) : /* @__PURE__ */ jsx(Name, { name: data.name, description: data.description }),
-  /* @__PURE__ */ jsx("div", { className: "border-t border-border/20" }),
   isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
       /* @__PURE__ */ jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
@@ -16797,7 +16855,6 @@ var BodyComponent = ({ data, isLoading, connections, isInput, externalSystem })
         externalSystem
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "border-t border-border/20" }),
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase -mb-2", children: isInput ? "Informa\xE7\xF5es de Entrada" : "Informa\xE7\xF5es de Sa\xEDda" }) }),
     /* @__PURE__ */ jsx("div", { children: connections.map((conn) => /* @__PURE__ */ jsx(
       IntegrationCard,

package/package.json

@@ -5,7 +5,7 @@
     "access": "public",
     "type":"module"
   },
-  "version": "1.10.9",
+  "version": "1.10.10",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",