@app-studio/web 0.8.92 → 0.8.94

package/dist/web.umd.development.js

@@ -439,20 +439,20 @@
    * Font sizes following typography guidelines
    */
   var FontSizes = {
-    xs: '12px',
-    sm: '14px',
-    md: '16px',
-    lg: '18px',
+    xs: '10px',
+    sm: '12px',
+    md: '14px',
+    lg: '16px',
     xl: '20px'
   };
   /**
    * Line heights following typography guidelines
    */
   var LineHeights = {
-    xs: '16px',
-    sm: '20px',
-    md: '24px',
-    lg: '28px',
+    xs: '14px',
+    sm: '16px',
+    md: '20px',
+    lg: '22px',
     xl: '28px'
   };
   /**
@@ -3234,7 +3234,7 @@
       height: '32px',
       padding: '0 12px',
       // Typography
-      fontSize: '14px',
+      fontSize: '16px',
       fontWeight: '500',
       lineHeight: '32px'
     },
@@ -3244,7 +3244,7 @@
       height: '36px',
       padding: '0 14px',
       // Typography
-      fontSize: '16px',
+      fontSize: '20px',
       fontWeight: '500',
       lineHeight: '36px'
     }
@@ -3370,18 +3370,6 @@
   // Badge component that displays a small indicator, typically used for counts or status
   var Badge = props => /*#__PURE__*/React__default.createElement(BadgeView, Object.assign({}, props));
 
-  var useButtonState = () => {
-    var [isHovered, setIsHovered] = React__default.useState(false);
-    // This custom react hook 'useButtonState' is defined for managing the state of a button, especially for hover interactions.
-    return {
-      isHovered,
-      setIsHovered
-    };
-    // The 'setIsHovered' function is used to update the value of 'isHovered' state when the hover status of the button changes.
-    // A state variable 'isHovered' is declared with its initial value set to 'false', indicating that the button is not hovered by default.
-  };
-  // The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
-
   // This function initializes the Link component's state using the useState hook and exposes its state and setter function.
   var useLinkState = () => {
     var [isHovered, setIsHovered] = React.useState(false);
@@ -3667,70 +3655,60 @@
    */
   /**
    * Button sizes following the 4px grid system
-   */
-  var ButtonSizes = {
+   */var ButtonSizes = {
     xs: {
-      // Height: 24px (6 × 4px)
+      minHeight: 3 * 4,
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 2,
+      paddingRight: 2,
+      fontSize: 10,
+      fontWeight: '500',
+      lineHeight: 14,
+      letterSpacing: '-0.01em'
+    },
+    sm: {
       minHeight: 4 * 4,
-      paddingTop: 2,
-      paddingBottom: 2,
-      paddingLeft: 4,
-      paddingRight: 4,
-      // Typography
+      paddingTop: 4,
+      paddingBottom: 4,
+      paddingLeft: 8,
+      paddingRight: 8,
       fontSize: 12,
       fontWeight: '500',
-      lineHeight: 20,
+      lineHeight: 16,
       letterSpacing: '-0.01em'
     },
-    sm: {
-      // Height: 32px (8 × 4px)
+    md: {
       minHeight: 6 * 4,
       paddingTop: 6,
       paddingBottom: 6,
       paddingLeft: 12,
       paddingRight: 12,
-      // Typography
-      fontSize: 12,
+      fontSize: 14,
       fontWeight: '500',
-      lineHeight: 12,
+      lineHeight: 18,
       letterSpacing: '-0.01em'
     },
-    md: {
-      // Height: 40px (10 × 4px) - standard height for interactive elements
+    lg: {
       minHeight: 8 * 4,
       paddingTop: 8,
       paddingBottom: 8,
       paddingLeft: 16,
       paddingRight: 16,
-      // Typography
       fontSize: 16,
       fontWeight: '500',
-      lineHeight: 16,
+      lineHeight: 18,
       letterSpacing: '-0.01em'
     },
-    lg: {
+    xl: {
       minHeight: 10 * 4,
       paddingTop: 10,
       paddingBottom: 10,
       paddingLeft: 20,
       paddingRight: 20,
-      // Typography
-      fontSize: 16,
-      fontWeight: '500',
-      lineHeight: 20,
-      letterSpacing: '-0.01em'
-    },
-    xl: {
-      // Height: 60px (15 × 4px)
-      minHeight: 12 * 4,
-      paddingTop: 12,
-      paddingBottom: 12,
-      paddingLeft: 24,
-      paddingRight: 24,
-      // Typography
-      fontSize: 18,
+      fontSize: 20,
       fontWeight: '500',
-      lineHeight: 24,
+      lineHeight: 22,
       letterSpacing: '-0.01em'
     }
   };
@@ -3966,25 +3944,14 @@
 
   // Importing a custom hook to manage the state specific to the button component.
   var ButtonComponent = props => {
-    // Importing the view part of the button, which is presumably a presentational component.
-    var {
-      isHovered,
-      setIsHovered
-    } = useButtonState();
-    // Defining the button component with generic React Functional Component type augmented with ButtonProps type.
-    var handleHover = () => setIsHovered(!isHovered);
+    var [ref, hover] = appStudio.useHover();
     // Destructuring the state and state update function from the custom hook for button state management.
     return (
       /*#__PURE__*/
       // Defines a function to toggle the hover state of the button.
       React__default.createElement(ButtonView, Object.assign({
-        isHovered: isHovered,
-        // Rendering the ButtonView component and spreading the received props on it.
-        setIsHovered: setIsHovered,
-        // Passing the isHovered state and the setIsHovered function to the ButtonView.
-        onMouseEnter: handleHover,
-        // Binding handleHover function to onMouseEnter and onMouseLeave events to toggle hover effect.
-        onMouseLeave: handleHover
+        ref: ref,
+        isHovered: hover
       }, props))
     );
     // Exports the Button component for use in other parts of the application.
@@ -6492,13 +6459,12 @@
     var {
       placeholder,
       isMulti,
-      options
+      options,
+      id = "select-" + Math.random().toString(36).substr(2, 9)
     } = _ref;
     // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
     var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
-    : Array.isArray(options) && options.length > 0 ? options[0].value : ''; // If no placeholder, use the first option value if available, otherwise undefined
-    // State hook for managing visibility of the Select dropdown, initially set to hidden
-    var [hide, setHide] = React__default.useState(true);
+    : Array.isArray(options) && options.length > 0 ? options[0].value : isMulti ? [] : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
     // State hook for tracking mouse hover status over the Select component
     var [isHovered, setIsHovered] = React__default.useState(false);
     // State hook for tracking focus status of the Select input field
@@ -6507,8 +6473,11 @@
     var [value, setValue] = React__default.useState(defaultValue);
     // State hook for keeping track of the currently highlighted index in the options list
     var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
+    // State hook for managing visibility of the Select dropdown, initially set to hidden
+    var [hide, setHide] = React__default.useState(true);
     // Returns an object containing all stateful values and their associated setters to manage the Select component's state
     return {
+      id,
       value,
       setValue,
       hide,
@@ -6723,7 +6692,7 @@
       flexWrap: "nowrap",
       alignItems: "center",
       justifyContent: "space-between",
-      marginBottom: 8,
+      marginBottom: 2,
       // Visual properties
       borderStyle: "solid",
       borderColor: color,
@@ -6745,10 +6714,9 @@
       props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
       gap: 10,
-      right: 16,
+      right: 10,
       zIndex: 500,
-      flexWrap: "nowrap",
-      position: "absolute"
+      flexWrap: "nowrap"
     }, props), children);
   };
 
@@ -6932,20 +6900,27 @@
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     // Handles the click event on an option by invoking the callback with the selected option's value
-    var handleOptionClick = option => callback(option);
+    var handleOptionClick = (e, option) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (typeof callback === 'function') {
+        callback(option);
+      }
+    };
     // Toggles the hover state on the item
     var handleHover = () => setIsHovered(!isHovered);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "li",
       // Layout properties
       margin: 0,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
+      paddingVertical: 8,
+      paddingHorizontal: 8,
       listStyleType: "none",
+      cursor: "pointer",
       // Event handlers
       onMouseEnter: handleHover,
       onMouseLeave: handleHover,
-      onClick: () => handleOptionClick(option.value),
+      onClick: e => handleOptionClick(e, option.value),
       // Visual properties
       backgroundColor: isHovered ? 'color.gray.100' : 'transparent',
       borderRadius: "4px" // Subtle rounded corners for items
@@ -6991,7 +6966,7 @@
       width: '95%',
       height: '100%',
       border: 'none',
-      paddingVertical: 12,
+      paddingVertical: 4,
       paddingHorizontal: 0,
       // Typography properties
       fontSize: appStudio.Typography.fontSizes[size],
@@ -7071,34 +7046,16 @@
     } = _ref5;
     var itemStates = useItemState();
     var handleCallback = option => callback(option);
-    // Shadow styles for the dropdown
-    var shadow = {
-      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
-    };
+    // Shadow styles for the dropdown - now applied directly in the Element
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "ul",
       role: "dropdown",
-      top: "100%",
       width: "100%",
       display: "flex",
       flexDirection: "column",
-      position: "absolute",
-      marginTop: 8,
-      marginLeft: 0,
-      marginRight: 0,
-      marginBottom: 0,
-      padding: 0,
-      maxHeight: "240px" // 60 × 4px grid
-      ,
-      overflowY: "auto",
-      zIndex: 1000,
       backgroundColor: "color.white",
-      borderRadius: "8px" // Consistent with design system (rounded-md)
-      ,
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: "color.gray.200",
       transition: "all 0.2s ease",
+      margin: 0,
       style: {
         scrollbarWidth: 'thin',
         scrollbarColor: 'rgba(0, 0, 0, 0.2) transparent',
@@ -7113,7 +7070,7 @@
           borderRadius: '4px'
         }
       }
-    }, shadow, views == null ? void 0 : views.dropDown), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+    }, views == null ? void 0 : views.dropDown), options && options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
       key: option.value,
       size: size,
       style: views['text'],
@@ -7196,23 +7153,57 @@
         highlightedIndex
       } = _ref7,
       props = _objectWithoutPropertiesLoose(_ref7, _excluded4$6);
+    // close when *any* other select opens
+    React__default.useEffect(() => {
+      var handleCloseAll = () => setHide(true);
+      document.addEventListener('closeAllSelects', handleCloseAll);
+      return () => document.removeEventListener('closeAllSelects', handleCloseAll);
+    }, [setHide]);
+    // Add a global click handler to close the dropdown when clicking outside
+    React__default.useEffect(() => {
+      var handleGlobalClick = e => {
+        var target = e.target;
+        // Only close if clicking outside of this specific select component
+        if (!target.closest("#" + id) && !hide) {
+          setHide(true);
+        }
+      };
+      document.addEventListener('click', handleGlobalClick);
+      return () => {
+        document.removeEventListener('click', handleGlobalClick);
+      };
+    }, [id, hide, setHide]);
     var showLabel = !!(isFocused && label);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
     var handleClick = event => {
+      // tell all other selects to close
+      document.dispatchEvent(new Event('closeAllSelects'));
       if (event && event.stopPropagation) event.stopPropagation();
-      setHide(!hide);
-      setIsFocused(!isFocused);
+      // Toggle dropdown visibility
+      var newHideState = !hide;
+      setHide(newHideState);
+      setIsFocused(!newHideState); // Set focus state based on dropdown visibility
     };
     var handleCallback = React.useCallback(option => {
-      setHide(!hide);
+      // Close dropdown after selection
+      setHide(true);
+      // Tell all other selects to close
+      document.dispatchEvent(new Event('closeAllSelects'));
+      // Update value based on multi-select or single-select mode
       if (isMulti && Array.isArray(value)) {
-        !value.includes(option) && setValue([...value, option]);
+        if (!value.includes(option)) {
+          var newValue = [...value, option];
+          setValue(newValue);
+          if (onChange) onChange(option);
+        }
       } else {
         setValue(option);
+        if (onChange) onChange(option);
       }
-      if (onChange) onChange(option);
-    }, [hide, isMulti, value]);
+      // Set focus to indicate selection
+      setIsFocused(true);
+    }, [isMulti, value, setHide, setValue, onChange, setIsFocused]);
     var handleRemoveOption = valueOption => {
       if (Array.isArray(value) && value.includes(valueOption)) {
         var newValue = value.filter(option => option !== valueOption);
@@ -7220,11 +7211,24 @@
       }
     };
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
+      style: {
+        position: 'relative',
+        width: '100%',
+        display: 'inline-block'
+      },
+      id: id,
       role: "SelectBox",
       helperText: helperText,
       error: error,
       views: views,
-      onClick: isDisabled || isReadOnly ? () => {} : handleClick
+      onClick: e => {
+        // Stop propagation to prevent clicks from bubbling up
+        e.stopPropagation();
+        // Only handle click if not disabled or readonly
+        if (!(isDisabled || isReadOnly)) {
+          handleClick(e);
+        }
+      }
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
@@ -7274,39 +7278,78 @@
       orientation: "up",
       widthHeight: IconSizes$2[size],
       style: views.icon
-    })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
+    })))))), !hide && options.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Element, {
+      onClick: e => e.stopPropagation(),
+      style: {
+        position: 'absolute',
+        top: 'calc(100% + 4px)',
+        left: 0,
+        right: 0,
+        zIndex: 1000
+      }
+    }, /*#__PURE__*/React__default.createElement(DropDown, {
       size: size,
-      views: views,
+      views: Object.assign({}, views, {
+        dropDown: {
+          borderRadius: '6px',
+          border: '1px solid color.gray.200',
+          boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
+          padding: '8px',
+          maxHeight: '240px',
+          overflowY: 'auto'
+        }
+      }),
       options: options,
       callback: handleCallback,
       highlightedIndex: highlightedIndex,
       setHighlightedIndex: setHighlightedIndex
-    })));
+    }))));
   };
 
   // Defines a functional component named 'SelectComponent', which is expected to receive 'SelectProps' as properties.
   var SelectComponent = props => {
+    // Ensure options is always an array
+    var safeProps = Object.assign({}, props, {
+      options: props.options || []
+    });
     // Invokes the 'useSelectState' hook with props to obtain stateful logic for the Select component.
-    var selectStates = useSelectState(props);
+    var selectStates = useSelectState(safeProps);
     // Renders the 'SelectView' component, passing along any states controlled by 'useSelectState' and all properties passed to 'SelectComponent'.
-    return /*#__PURE__*/React__default.createElement(SelectView, Object.assign({}, selectStates, props));
+    return /*#__PURE__*/React__default.createElement(SelectView, Object.assign({}, selectStates, safeProps, {
+      onClick: e => {
+        // Stop propagation to prevent the global click handler from closing other dropdowns
+        e.stopPropagation();
+        if (props.onClick) props.onClick(e);
+      }
+    }));
   };
   // Exports 'SelectComponent' as 'Select', making it available for import in other parts of the application.
   var Select = SelectComponent;
 
-  // This file defines a custom hook for managing the state of a Switch component. It allows tracking whether the switch is hovered, and its on/off state based on 'isDisabled' and 'isChecked' properties.
+  // This file defines a custom hook for managing the state of a Switch component.
+  // It allows tracking whether the switch is hovered, and its on/off state based on 'isDisabled' and 'isChecked' properties.
   var useSwitchState = _ref => {
     var {
       isDisabled,
       isChecked
     } = _ref;
     var [isHovered, setIsHovered] = React__default.useState(false);
-    var [on, setOn] = React__default.useState(isDisabled ? !isDisabled : isChecked);
+    var [on, setOn] = React__default.useState(isChecked || false);
+    var [value, setValue] = React__default.useState(isChecked || false);
+    // Update the value when isChecked changes
+    React.useEffect(() => {
+      if (isChecked !== undefined) {
+        setOn(isChecked);
+        setValue(isChecked);
+      }
+    }, [isChecked]);
     return {
       isHovered,
       setIsHovered,
       on,
-      setOn
+      setOn,
+      value,
+      setValue
     };
   };
 
@@ -7322,68 +7365,68 @@
    */
   /**
    * Knob (circle) sizes for the Switch component
-   * Following the 4px grid system
+   * Following the 4px grid system - dimensions réduites
    */
   var KnobSizes = {
     xs: {
+      height: '8px',
+      width: '8px'
+    },
+    sm: {
       height: '12px',
       width: '12px'
     },
-    sm: {
+    md: {
       height: '16px',
       width: '16px'
     },
-    md: {
+    lg: {
       height: '20px',
       width: '20px'
     },
-    lg: {
+    xl: {
       height: '24px',
       width: '24px'
-    },
-    xl: {
-      height: '28px',
-      width: '28px'
     }
   };
   /**
    * Slider (track) sizes for the Switch component
-   * Following the 4px grid system
+   * Following the 4px grid system - dimensions réduites
    */
   var SliderSizes = {
     xs: {
-      height: '24px',
-      width: '40px'
+      height: '16px',
+      width: '36px'
     },
     sm: {
-      height: '28px',
-      width: '48px'
+      height: '20px',
+      width: '44px'
     },
     md: {
-      height: '32px',
-      width: '56px'
+      height: '24px',
+      width: '52px'
     },
     lg: {
-      height: '36px',
-      width: '64px'
+      height: '28px',
+      width: '60px'
     },
     xl: {
-      height: '40px',
-      width: '72px'
+      height: '32px',
+      width: '68px'
     }
   };
   /**
-   * Padding for the Switch slider
+   * Padding for the Switch slider - ajusté pour les nouvelles dimensions
    * Following the 4px grid system
    */
   var SliderPadding = {
     xs: {
       paddingVertical: 4,
-      paddingHorizontal: 4
+      paddingHorizontal: 2
     },
     sm: {
       paddingVertical: 4,
-      paddingHorizontal: 4
+      paddingHorizontal: 2
     },
     md: {
       paddingVertical: 4,
@@ -7441,7 +7484,6 @@
         isHovered = false,
         isDisabled = false,
         isReadOnly = false,
-        on,
         setOn,
         onChange,
         setValue = () => {},
@@ -7454,10 +7496,11 @@
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     var handleToggle = event => {
-      if (!isReadOnly) {
-        setValue(!value);
-        setOn(!on);
-        if (onChange) onChange(event.target.checked);
+      if (!isReadOnly && !isDisabled) {
+        var newValue = event.target.checked;
+        setValue(newValue);
+        setOn(newValue);
+        if (onChange) onChange(newValue);
       }
     };
     var handleHover = () => setIsHovered(!isHovered);
@@ -7505,27 +7548,39 @@
       // Layout properties
       display: "flex",
       alignItems: "center",
-      justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start',
+      justifyContent: value ? activeChild ? 'space-between' : 'flex-end' : inActiveChild ? 'space-between' : 'flex-start',
       marginBottom: 4,
       // Visual properties
       borderRadius: "9999px" // Full rounded for pill shape
       ,
       backgroundColor: isDisabled ? ColorSchemes.default.disabled : value ? isHovered ? ColorSchemes.states.hover.active : ColorSchemes.default.active : isHovered ? ColorSchemes.states.hover.inactive : ColorSchemes.default.inactive,
+      overflow: "hidden",
       // State properties
       cursor: "pointer",
       // Animation
       transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
     }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
       marginLeft: 8,
-      transition: "all 0.3s ease"
+      marginRight: 4,
+      transition: "all 0.3s ease",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%"
     }, activeChild)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       borderRadius: "50%",
       backgroundColor: ColorSchemes.default.knob,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      zIndex: 1
     }, KnobSizes[size], views['circle'])), inActiveChild && !value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
       marginRight: 8,
-      transition: "all 0.3s ease"
+      marginLeft: 4,
+      transition: "all 0.3s ease",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%"
     }, inActiveChild))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(Text, {
       fontWeight: "500" // Medium weight for better readability
       ,
@@ -7811,7 +7866,7 @@
     var fieldStyles = Object.assign({
       // Layout properties
       margin: 0,
-      paddingVertical: 8,
+      paddingVertical: 4,
       paddingHorizontal: 0,
       width: '100%',
       height: '100%',
@@ -7951,24 +8006,24 @@
    */
   var Sizes = {
     xs: {
+      height: '12px',
+      width: '12px'
+    },
+    sm: {
       height: '16px',
       width: '16px'
     },
-    sm: {
+    md: {
       height: '20px',
       width: '20px'
     },
-    md: {
+    lg: {
       height: '24px',
       width: '24px'
     },
-    lg: {
+    xl: {
       height: '28px',
       width: '28px'
-    },
-    xl: {
-      height: '32px',
-      width: '32px'
     }
   };
   /**
@@ -10206,7 +10261,7 @@
       hint: placeholder,
       isClearable: false,
       left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-        widthHeight: 12
+        widthHeight: 16
       }),
       views: {
         container: Object.assign({
@@ -12767,17 +12822,17 @@
   var NavigationMenuSizes = {
     sm: {
       padding: '8px 12px',
-      fontSize: '14px',
+      fontSize: '12px',
       fontWeight: '500'
     },
     md: {
       padding: '12px 16px',
-      fontSize: '16px',
+      fontSize: '14px',
       fontWeight: '500'
     },
     lg: {
       padding: '16px 20px',
-      fontSize: '18px',
+      fontSize: '16px',
       fontWeight: '500'
     }
   };
@@ -13725,8 +13780,8 @@
     }),
     gradient: (color, secondaryColor) => ({
       background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-      backgroundClip: 'text',
-      webkitBackgroundClip: 'text',
+      backgroundClip: 'text !important',
+      webkitBackgroundClip: 'text !important',
       color: 'transparent',
       webkitTextFillColor: 'transparent',
       display: 'inline-block',