@app-studio/web 0.9.13 → 0.9.14

package/dist/components/Toggle/Toggle/Toggle.style.d.ts

@@ -1,2 +1,8 @@
-import { Shape } from './Toggle.type';
+import { ViewProps } from 'app-studio';
+import { Shape, Variant } from './Toggle.type';
 export declare const ToggleShapes: Record<Shape, number | string>;
+/**
+ * Generate toggle variants with proper color combinations based on main color and contrast
+ * Similar to Button's getButtonVariants function
+ */
+export declare const getToggleVariants: (color: string, isLight: boolean) => Record<Variant, ViewProps>;

package/dist/components/Toggle/Toggle/Toggle.view.d.ts

@@ -5,6 +5,9 @@ interface Props extends ToggleViewProps {
     views?: {
         container?: ViewProps;
     };
+    backgroundColor?: string;
+    color?: string;
+    themeMode?: 'light' | 'dark';
 }
 declare const ToggleView: React.FC<Props>;
 export default ToggleView;

package/dist/web.cjs.development.js

@@ -17036,8 +17036,78 @@ var useToggleState = defaultToggled => {
   };
 };
 
-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',
@@ -17048,25 +17118,30 @@ var ToggleView = _ref => {
       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) {
@@ -17083,14 +17158,15 @@ var ToggleView = _ref => {
     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"];