@app-studio/web 0.8.92 → 0.8.93

package/dist/web.esm.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { View, Horizontal, Vertical, Element, Text as Text$1, Center, useTheme, Image, Typography, Input, Form, useInView } from 'app-studio';
+import { View, Horizontal, Vertical, Element, Text as Text$1, Center, useTheme, Image, useHover, Typography, Input, Form, useInView } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.parse-float.js';
 import 'core-js/modules/es.string.trim-end.js';
@@ -3394,18 +3394,6 @@ var BadgeView = _ref => {
 // Badge component that displays a small indicator, typically used for counts or status
 var Badge = props => /*#__PURE__*/React.createElement(BadgeView, Object.assign({}, props));
 
-var useButtonState = () => {
-  var [isHovered, setIsHovered] = React.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] = useState(false);
@@ -3990,25 +3978,14 @@ var ButtonView = _ref => {
 
 // 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] = 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.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.