@app-studio/web 0.9.13 → 0.9.14

package/dist/web.umd.development.js

@@ -17005,8 +17005,78 @@
     };
   };
 
-  var _excluded$T = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+  var ToggleShapes = {
+    sharp: 0,
+    rounded: 4,
+    pillShaped: 24
+  };
+  /**
+   * Generate toggle variants with proper color combinations based on main color and contrast
+   * Similar to Button's getButtonVariants function
+   */
+  var getToggleVariants = (color, isLight) => ({
+    outline: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: color,
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    },
+    link: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px',
+      _hover: {
+        borderColor: color,
+        textDecorationThickness: '2px',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        borderColor: color,
+        textDecorationThickness: '2px',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    }
+  });
+
+  var _excluded$T = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
+    var _ref2;
     var {
         children,
         shape = 'rounded',
@@ -17017,25 +17087,30 @@
         isToggle,
         setIsToggled,
         onToggle,
-        views
+        views,
+        backgroundColor,
+        // primary candidate for main color
+        color,
+        // 2nd candidate for main color
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
-    var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
+    /* theme helpers */
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var mode = elementMode != null ? elementMode : themeMode;
+    /* MAIN COLOR – determines the entire palette */
+    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
+    var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
+      themeMode: mode
+    });
+    var tone = contrast(mainTone);
+    /* variant palette */
+    var palette = React.useMemo(() => getToggleVariants(mainTone, tone === 'light'), [mainTone, tone]);
+    var base = palette[variant];
     var isActive = !!(isToggle || isHovered);
-    var toggleVariants = {
-      outline: {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'color.trueGray.400'
-      },
-      link: {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: isActive ? toggleColor : 'transparent',
-        textDecoration: 'underline'
-      },
-      ghost: {}
-    };
     var handleHover = () => setIsHovered(!isHovered);
     var handleToggle = () => {
       if (!isDisabled) {
@@ -17052,14 +17127,15 @@
       role: "Toggle",
       padding: shape === 'pillShaped' ? '10px 12px' : '8px',
       width: "fit-content",
-      color: isActive ? 'color.white' : toggleColor,
-      backgroundColor: isActive ? toggleColor : 'transparent',
-      onMouseEnter: handleHover,
-      onMouseLeave: () => setIsHovered(false),
       cursor: isDisabled ? 'not-allowed' : 'pointer',
-      borderRadius: shape === 'pillShaped' ? '50px' : '8px',
-      onClick: handleToggle
-    }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
+      borderRadius: ToggleShapes[shape],
+      onClick: handleToggle,
+      onMouseEnter: handleHover,
+      onMouseLeave: () => setIsHovered(false)
+    }, base, isActive && {
+      backgroundColor: mainTone,
+      color: tone === 'light' ? 'color.black' : 'color.white'
+    }, props, views == null ? void 0 : views.container), children);
   };
 
   var _excluded$U = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];