New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
fhf-react - npm Package Compare versions
@@ -0,0 +0,0 @@ # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created |
+1564
-1564
| // Import statements | ||
| import "fhf/dist/layout.min.css"; | ||
| import "fhf/dist/norm.min.css"; | ||
| import "fhf/dist/layout.css"; | ||
| import "fhf/dist/normalize.css"; | ||
| import "fhf/dist/base.css"; | ||
| import "fhf/dist/flexbox.css"; | ||
@@ -9,9 +11,9 @@ import React from "react"; | ||
| import { | ||
| isValidColor, | ||
| isValidSize, | ||
| isValidBorderStyle, | ||
| isValidTextDecoration, | ||
| isValidTextTransform, | ||
| isValidJContent, | ||
| isValidAContent, | ||
| isValidColor, | ||
| isValidSize, | ||
| isValidBorderStyle, | ||
| isValidTextDecoration, | ||
| isValidTextTransform, | ||
| isValidJContent, | ||
| isValidAContent, | ||
| } from "./tools/validation"; | ||
@@ -23,559 +25,557 @@ import GridSystemOop from "./tools/GridSystemOop"; | ||
| function ClearFix() { | ||
| return <div className="clear-fix"></div>; | ||
| return <div className="clear-fix"></div>; | ||
| } | ||
| function Container({ children, style = {}, className = "", ...otherProps }) { | ||
| return ( | ||
| <div style={style} className={`container ${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div style={style} className={`container ${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| function FlexContainer({ | ||
| children, | ||
| style = {}, | ||
| className = "", | ||
| ...otherProps | ||
| children, | ||
| style = {}, | ||
| className = "", | ||
| ...otherProps | ||
| }) { | ||
| return ( | ||
| <div | ||
| className={`flex-container ${className}`} | ||
| style={style} | ||
| {...otherProps} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div | ||
| className={`flex-container ${className}`} | ||
| style={style} | ||
| {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| function FlexItem({ children, style = {}, className = "", ...otherProps }) { | ||
| return ( | ||
| <div className={`flex-item ${className}`} style={style} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div className={`flex-item ${className}`} style={style} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| function DivV({ | ||
| children, | ||
| className = "", | ||
| style = {}, | ||
| visibleIn = "", | ||
| hiddenIn = "", | ||
| ...otherProps | ||
| children, | ||
| className = "", | ||
| style = {}, | ||
| visibleIn = "", | ||
| hiddenIn = "", | ||
| ...otherProps | ||
| }) { | ||
| if (visibleIn === "" && hiddenIn === "") { | ||
| console.warn( | ||
| "visibleIn and hiddenIn cannot be empty at the same time (use div instead of DivV)" | ||
| ); | ||
| } | ||
| const visibilityClasses = { | ||
| xs: "visible-xs", | ||
| sm: "visible-sm", | ||
| md: "visible-md", | ||
| lg: "visible-lg", | ||
| }; | ||
| if (visibleIn === "" && hiddenIn === "") { | ||
| console.warn( | ||
| "visibleIn and hiddenIn cannot be empty at the same time (use div instead of DivV)" | ||
| ); | ||
| } | ||
| const visibilityClasses = { | ||
| xs: "visible-xs", | ||
| sm: "visible-sm", | ||
| md: "visible-md", | ||
| lg: "visible-lg", | ||
| }; | ||
| const hiddenClasses = { | ||
| xs: "hidden-xs", | ||
| sm: "hidden-sm", | ||
| md: "hidden-md", | ||
| lg: "hidden-lg", | ||
| }; | ||
| const hiddenClasses = { | ||
| xs: "hidden-xs", | ||
| sm: "hidden-sm", | ||
| md: "hidden-md", | ||
| lg: "hidden-lg", | ||
| }; | ||
| const getVisibilityClass = (visibility, classes) => | ||
| (visibility && classes[visibility]) || ""; | ||
| const getVisibilityClass = (visibility, classes) => | ||
| (visibility && classes[visibility]) || ""; | ||
| const combinedClasses = `${getVisibilityClass( | ||
| visibleIn, | ||
| visibilityClasses | ||
| )} ${getVisibilityClass(hiddenIn, hiddenClasses)} ${className}`; | ||
| const combinedClasses = `${getVisibilityClass( | ||
| visibleIn, | ||
| visibilityClasses | ||
| )} ${getVisibilityClass(hiddenIn, hiddenClasses)} ${className}`; | ||
| return ( | ||
| <div style={style} className={combinedClasses} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div style={style} className={combinedClasses} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| function RespImg({ src, alt, style = {}, className = "", ...otherProps }) { | ||
| if (src === undefined || src === "") { | ||
| throw new Error("src cannot be undefined or empty"); | ||
| } | ||
| const respImg = { | ||
| maxWidth: "100%", | ||
| height: "auto", | ||
| }; | ||
| if (src === undefined || src === "") { | ||
| throw new Error("src cannot be undefined or empty"); | ||
| } | ||
| const respImg = { | ||
| maxWidth: "100%", | ||
| height: "auto", | ||
| }; | ||
| const combinedStyles = { | ||
| ...respImg, | ||
| ...style, | ||
| }; | ||
| const combinedStyles = { | ||
| ...respImg, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <img | ||
| src={src} | ||
| alt={alt} | ||
| style={combinedStyles} | ||
| className={className} | ||
| {...otherProps} | ||
| /> | ||
| ); | ||
| return ( | ||
| <img | ||
| src={src} | ||
| alt={alt} | ||
| style={combinedStyles} | ||
| className={className} | ||
| {...otherProps} | ||
| /> | ||
| ); | ||
| } | ||
| function RespVideo({ src = "", style = {}, className = "", ...otherProps }) { | ||
| if (src === undefined || src === "") { | ||
| throw new Error("src cannot be undefined or empty"); | ||
| } | ||
| const respVideo = { | ||
| maxWidth: "100%", | ||
| height: "auto", | ||
| }; | ||
| if (src === undefined || src === "") { | ||
| throw new Error("src cannot be undefined or empty"); | ||
| } | ||
| const respVideo = { | ||
| maxWidth: "100%", | ||
| height: "auto", | ||
| }; | ||
| const combinedStyles = { | ||
| ...respVideo, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <video | ||
| src={src} | ||
| style={combinedStyles} | ||
| className={className} | ||
| {...otherProps} | ||
| /> | ||
| ); | ||
| const combinedStyles = { | ||
| ...respVideo, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <video | ||
| src={src} | ||
| style={combinedStyles} | ||
| className={className} | ||
| {...otherProps} | ||
| /> | ||
| ); | ||
| } | ||
| function ClippedText({ | ||
| children, | ||
| url, | ||
| element: Element = "p", | ||
| style = {}, | ||
| className = "", | ||
| ...otherProps | ||
| children, | ||
| url, | ||
| element: Element = "p", | ||
| style = {}, | ||
| className = "", | ||
| ...otherProps | ||
| }) { | ||
| // Merge the background image style with additional styles | ||
| const mergedStyle = mergeStyles( | ||
| { | ||
| backgroundImage: `url(${url})`, | ||
| // Add any other background-related styles here | ||
| }, | ||
| style | ||
| ); | ||
| // Merge the background image style with additional styles | ||
| const mergedStyle = mergeStyles( | ||
| { | ||
| backgroundImage: `url(${url})`, | ||
| // Add any other background-related styles here | ||
| }, | ||
| style | ||
| ); | ||
| return ( | ||
| <Element | ||
| style={mergedStyle} | ||
| className={`clipped-text ${className}`} | ||
| {...otherProps} | ||
| > | ||
| {children} | ||
| </Element> | ||
| ); | ||
| return ( | ||
| <Element | ||
| style={mergedStyle} | ||
| className={`clipped-text ${className}`} | ||
| {...otherProps}> | ||
| {children} | ||
| </Element> | ||
| ); | ||
| } | ||
| function RespGridFill({ | ||
| children, | ||
| size = 0, | ||
| style = {}, | ||
| gap = 0, | ||
| className = "", | ||
| ...otherProps | ||
| children, | ||
| size = 0, | ||
| style = {}, | ||
| gap = 0, | ||
| className = "", | ||
| ...otherProps | ||
| }) { | ||
| if (size === null || size === undefined || size === 0) { | ||
| throw new Error("size cannot be null or undefined or 0"); | ||
| } | ||
| const withOutGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))`, | ||
| }; | ||
| const withGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))`, | ||
| gap: `${gap}px`, | ||
| }; | ||
| if (size === null || size === undefined || size === 0) { | ||
| throw new Error("size cannot be null or undefined or 0"); | ||
| } | ||
| const withOutGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))`, | ||
| }; | ||
| const withGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))`, | ||
| gap: `${gap}px`, | ||
| }; | ||
| if (gap === "") { | ||
| return ( | ||
| <div style={withOutGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div style={withGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| if (gap === "") { | ||
| return ( | ||
| <div style={withOutGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div style={withGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| function RespGridFit({ | ||
| children, | ||
| size = 0, | ||
| style = {}, | ||
| gap = 0, | ||
| className = "", | ||
| ...otherProps | ||
| children, | ||
| size = 0, | ||
| style = {}, | ||
| gap = 0, | ||
| className = "", | ||
| ...otherProps | ||
| }) { | ||
| if (size === null || size === undefined || size === 0) { | ||
| throw new Error("size cannot be null or undefined or 0"); | ||
| } | ||
| const withOutGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))`, | ||
| }; | ||
| const withGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))`, | ||
| gap: `${gap}px`, | ||
| }; | ||
| if (size === null || size === undefined || size === 0) { | ||
| throw new Error("size cannot be null or undefined or 0"); | ||
| } | ||
| const withOutGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))`, | ||
| }; | ||
| const withGap = { | ||
| ...style, | ||
| display: "grid", | ||
| gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))`, | ||
| gap: `${gap}px`, | ||
| }; | ||
| if (gap === "") { | ||
| return ( | ||
| <div style={withOutGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div style={withGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| if (gap === "") { | ||
| return ( | ||
| <div style={withOutGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div style={withGap} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| function UnstyledList({ children, className = "", style = {}, ...otherProps }) { | ||
| const listStyle = { | ||
| listStyleType: "none", | ||
| padding: 0, | ||
| margin: 0, | ||
| }; | ||
| const combinedStyles = { | ||
| ...listStyle, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <ul style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </ul> | ||
| ); | ||
| const listStyle = { | ||
| listStyleType: "none", | ||
| padding: 0, | ||
| margin: 0, | ||
| }; | ||
| const combinedStyles = { | ||
| ...listStyle, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <ul style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </ul> | ||
| ); | ||
| } | ||
| function NavUl({ children, style = {}, className = "", ...otherProps }) { | ||
| const listStyle = { | ||
| listStyleType: "none", | ||
| padding: 0, | ||
| margin: 0, | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| }; | ||
| const combinedStyles = { | ||
| ...listStyle, | ||
| ...style, | ||
| }; | ||
| const listStyle = { | ||
| listStyleType: "none", | ||
| padding: 0, | ||
| margin: 0, | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| }; | ||
| const combinedStyles = { | ||
| ...listStyle, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <ul style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </ul> | ||
| ); | ||
| return ( | ||
| <ul style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </ul> | ||
| ); | ||
| } | ||
| function RespHeading({ | ||
| level = 1, | ||
| style = {}, | ||
| className = "", | ||
| children, | ||
| ...otherProps | ||
| level = 1, | ||
| style = {}, | ||
| className = "", | ||
| children, | ||
| ...otherProps | ||
| }) { | ||
| if (level < 1 || level > 6) { | ||
| throw new Error( | ||
| "Incorrect element value in RespHeading; it should be level between 1 and 6" | ||
| ); | ||
| } else { | ||
| const responsiveTypography = { | ||
| h1: { | ||
| fontSize: "clamp(32px, 4vw, 48px)", | ||
| }, | ||
| h2: { | ||
| fontSize: "clamp(24px, 3vw, 36px)", | ||
| }, | ||
| h3: { | ||
| fontSize: "clamp(20px, 2.5vw, 30px)", | ||
| }, | ||
| h4: { | ||
| fontSize: "clamp(20px, 2.5vw, 30px)", | ||
| }, | ||
| h5: { | ||
| fontSize: "clamp(16px, 2vw, 20px)", | ||
| }, | ||
| h6: { | ||
| fontSize: "clamp(14px, 1.5vw, 18px)", | ||
| }, | ||
| }; | ||
| const element = `h${level}`; | ||
| const combinedStyles = { | ||
| ...responsiveTypography[element], | ||
| ...style, | ||
| }; | ||
| if (level < 1 || level > 6) { | ||
| throw new Error( | ||
| "Incorrect element value in RespHeading; it should be level between 1 and 6" | ||
| ); | ||
| } else { | ||
| const responsiveTypography = { | ||
| h1: { | ||
| fontSize: "clamp(32px, 4vw, 48px)", | ||
| }, | ||
| h2: { | ||
| fontSize: "clamp(24px, 3vw, 36px)", | ||
| }, | ||
| h3: { | ||
| fontSize: "clamp(20px, 2.5vw, 30px)", | ||
| }, | ||
| h4: { | ||
| fontSize: "clamp(20px, 2.5vw, 30px)", | ||
| }, | ||
| h5: { | ||
| fontSize: "clamp(16px, 2vw, 20px)", | ||
| }, | ||
| h6: { | ||
| fontSize: "clamp(14px, 1.5vw, 18px)", | ||
| }, | ||
| }; | ||
| const element = `h${level}`; | ||
| const combinedStyles = { | ||
| ...responsiveTypography[element], | ||
| ...style, | ||
| }; | ||
| return React.createElement( | ||
| element, | ||
| { | ||
| style: combinedStyles, | ||
| className: `${className}`, | ||
| ...otherProps, | ||
| }, | ||
| children | ||
| ); | ||
| } | ||
| return React.createElement( | ||
| element, | ||
| { | ||
| style: combinedStyles, | ||
| className: `${className}`, | ||
| ...otherProps, | ||
| }, | ||
| children | ||
| ); | ||
| } | ||
| } | ||
| function RespP({ style = {}, className = "", children, ...otherProps }) { | ||
| const combinedStyles = { | ||
| fontSize: "clamp(16px, 1.2vw, 20px)", | ||
| ...style, | ||
| }; | ||
| const combinedStyles = { | ||
| fontSize: "clamp(16px, 1.2vw, 20px)", | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <p style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </p> | ||
| ); | ||
| return ( | ||
| <p style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </p> | ||
| ); | ||
| } | ||
| function Circle({ children, style = {}, className = "", ...otherProps }) { | ||
| const circleStyle = { | ||
| borderRadius: "50%", | ||
| }; | ||
| const combinedStyles = { | ||
| ...circleStyle, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <div style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| const circleStyle = { | ||
| borderRadius: "50%", | ||
| }; | ||
| const combinedStyles = { | ||
| ...circleStyle, | ||
| ...style, | ||
| }; | ||
| return ( | ||
| <div style={combinedStyles} className={`${className}`} {...otherProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| function RespBackgImg({ | ||
| element = "div", | ||
| url = "", | ||
| children, | ||
| style = {}, | ||
| className = "", | ||
| ...otherProps | ||
| element = "div", | ||
| url = "", | ||
| children, | ||
| style = {}, | ||
| className = "", | ||
| ...otherProps | ||
| }) { | ||
| if (url === "") { | ||
| throw new Error(" url cannot be empty in ResBackgImg"); | ||
| } | ||
| if ( | ||
| element !== "div" && | ||
| element !== "section" && | ||
| element != "header" && | ||
| element != "footer" | ||
| ) { | ||
| throw new Error( | ||
| " incorrect element value in ResBackgImg it should be one of those (div,section,header,footer)" | ||
| ); | ||
| } else { | ||
| const respBackgImg = { | ||
| backgroundSize: "cover", | ||
| backgroundPosition: "center", | ||
| backgroundRepeat: "no-repeat", | ||
| }; | ||
| const combinedStyles = { | ||
| backgroundImage: `url(${url})`, | ||
| ...respBackgImg, | ||
| ...style, | ||
| }; | ||
| return React.createElement( | ||
| element, | ||
| { | ||
| style: combinedStyles, | ||
| className: `${className}`, | ||
| ...otherProps, | ||
| }, | ||
| children | ||
| ); | ||
| } | ||
| if (url === "") { | ||
| throw new Error(" url cannot be empty in ResBackgImg"); | ||
| } | ||
| if ( | ||
| element !== "div" && | ||
| element !== "section" && | ||
| element != "header" && | ||
| element != "footer" | ||
| ) { | ||
| throw new Error( | ||
| " incorrect element value in ResBackgImg it should be one of those (div,section,header,footer)" | ||
| ); | ||
| } else { | ||
| const respBackgImg = { | ||
| backgroundSize: "cover", | ||
| backgroundPosition: "center", | ||
| backgroundRepeat: "no-repeat", | ||
| }; | ||
| const combinedStyles = { | ||
| backgroundImage: `url(${url})`, | ||
| ...respBackgImg, | ||
| ...style, | ||
| }; | ||
| return React.createElement( | ||
| element, | ||
| { | ||
| style: combinedStyles, | ||
| className: `${className}`, | ||
| ...otherProps, | ||
| }, | ||
| children | ||
| ); | ||
| } | ||
| } | ||
| function TypingAnimationElement({ | ||
| text, | ||
| cursorColor, | ||
| element: Element = "span", // Default element type | ||
| style = {}, | ||
| className = "", | ||
| speed = 0.5, | ||
| ...otherProps | ||
| text, | ||
| cursorColor, | ||
| element = "span", // Default element type | ||
| style = {}, | ||
| className = "", | ||
| speed = 0.5, | ||
| ...otherProps | ||
| }) { | ||
| const [finalText, setFinalText] = useState(""); | ||
| const [finalText, setFinalText] = useState(""); | ||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setFinalText((prevText) => { | ||
| if (prevText.length === text.length) { | ||
| return ""; | ||
| } | ||
| return prevText + text[finalText.length]; | ||
| }); | ||
| }, speed * 100); | ||
| return () => { | ||
| clearInterval(interval); | ||
| }; | ||
| }); | ||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setFinalText((prevText) => { | ||
| if (prevText.length === text.length) { | ||
| return ""; | ||
| } | ||
| return prevText + text[finalText.length]; | ||
| }); | ||
| }, speed * 100); | ||
| return () => { | ||
| clearInterval(interval); | ||
| }; | ||
| }); | ||
| return ( | ||
| <Element | ||
| style={mergeStyles(style, { "--typing-color": cursorColor })} | ||
| className={`typing ${className}`} // Use className for CSS classes | ||
| {...otherProps} | ||
| > | ||
| {finalText} | ||
| </Element> | ||
| ); | ||
| return React.createElement( | ||
| element, | ||
| { | ||
| style: mergeStyles(style, { "--typing-color": cursorColor }), | ||
| className: `typing ${className}`, | ||
| ...otherProps, | ||
| }, | ||
| finalText | ||
| ); | ||
| } | ||
| function useMediaQuery(query) { | ||
| // Initialize the state variable 'matches' with the initial match status of the media query. | ||
| const [matches, setMatches] = useState(window.matchMedia(query).matches); | ||
| // Initialize the state variable 'matches' with the initial match status of the media query. | ||
| const [matches, setMatches] = useState(window.matchMedia(query).matches); | ||
| // Define a memoized function to handle changes in the media query status. | ||
| const handleChange = useCallback((event) => { | ||
| // Update the 'matches' state based on the new match status. | ||
| setMatches(event.matches); | ||
| }, []); | ||
| // Define a memoized function to handle changes in the media query status. | ||
| const handleChange = useCallback((event) => { | ||
| // Update the 'matches' state based on the new match status. | ||
| setMatches(event.matches); | ||
| }, []); | ||
| // useEffect is used to set up the subscription to the media query changes. | ||
| useEffect(() => { | ||
| // Create a media query list object based on the provided query. | ||
| const mediaQueryList = window.matchMedia(query); | ||
| // useEffect is used to set up the subscription to the media query changes. | ||
| useEffect(() => { | ||
| // Create a media query list object based on the provided query. | ||
| const mediaQueryList = window.matchMedia(query); | ||
| // Add the 'handleChange' function as a listener to the media query changes. | ||
| mediaQueryList.addListener(handleChange); | ||
| // Add the 'handleChange' function as a listener to the media query changes. | ||
| mediaQueryList.addListener(handleChange); | ||
| // Clean up by removing the listener when the component unmounts or when the query changes. | ||
| return () => { | ||
| mediaQueryList.removeListener(handleChange); | ||
| }; | ||
| }, [query, handleChange]); | ||
| // Clean up by removing the listener when the component unmounts or when the query changes. | ||
| return () => { | ||
| mediaQueryList.removeListener(handleChange); | ||
| }; | ||
| }, [query, handleChange]); | ||
| // Return the current match status of the media query. | ||
| return matches; | ||
| // Return the current match status of the media query. | ||
| return matches; | ||
| } | ||
| const useMediaStyle = (query, style) => { | ||
| // Use the useMediaQuery hook to check if the media query matches. | ||
| const matches = useMediaQuery(query); | ||
| // Return the style object if the media query matches, otherwise an empty object. | ||
| return matches ? style : {}; | ||
| // Use the useMediaQuery hook to check if the media query matches. | ||
| const matches = useMediaQuery(query); | ||
| // Return the style object if the media query matches, otherwise an empty object. | ||
| return matches ? style : {}; | ||
| }; | ||
| function useHover() { | ||
| // Initialize the state variable 'useHoverIsHovered' with the initial hover state. | ||
| const [useHoverIsHovered, setUseHoverIsHovered] = useState(false); | ||
| // Initialize the state variable 'useHoverIsHovered' with the initial hover state. | ||
| const [useHoverIsHovered, setUseHoverIsHovered] = useState(false); | ||
| // Create a refOfUseHover to store the reference to the DOM element. | ||
| const refOfUseHover = useRef(null); | ||
| // Create a refOfUseHover to store the reference to the DOM element. | ||
| const refOfUseHover = useRef(null); | ||
| // Define memoized functions to handle mouse enter and mouse leave events. | ||
| const handleMouseEnter = useCallback(() => { | ||
| setUseHoverIsHovered(true); | ||
| }, []); | ||
| // Define memoized functions to handle mouse enter and mouse leave events. | ||
| const handleMouseEnter = useCallback(() => { | ||
| setUseHoverIsHovered(true); | ||
| }, []); | ||
| const handleMouseLeave = useCallback(() => { | ||
| setUseHoverIsHovered(false); | ||
| }, []); | ||
| const handleMouseLeave = useCallback(() => { | ||
| setUseHoverIsHovered(false); | ||
| }, []); | ||
| // useEffect is used to set up the subscription to the mouse enter and mouse leave events. | ||
| useEffect(() => { | ||
| const element = refOfUseHover.current; | ||
| // useEffect is used to set up the subscription to the mouse enter and mouse leave events. | ||
| useEffect(() => { | ||
| const element = refOfUseHover.current; | ||
| if (element) { | ||
| element.addEventListener("mouseenter", handleMouseEnter); | ||
| element.addEventListener("mouseleave", handleMouseLeave); | ||
| if (element) { | ||
| element.addEventListener("mouseenter", handleMouseEnter); | ||
| element.addEventListener("mouseleave", handleMouseLeave); | ||
| // Clean up by removing the event listeners when the component unmounts. | ||
| return () => { | ||
| element.removeEventListener("mouseenter", handleMouseEnter); | ||
| element.removeEventListener("mouseleave", handleMouseLeave); | ||
| }; | ||
| } | ||
| }, [handleMouseEnter, handleMouseLeave]); | ||
| // Clean up by removing the event listeners when the component unmounts. | ||
| return () => { | ||
| element.removeEventListener("mouseenter", handleMouseEnter); | ||
| element.removeEventListener("mouseleave", handleMouseLeave); | ||
| }; | ||
| } | ||
| }, [handleMouseEnter, handleMouseLeave]); | ||
| // Return an object containing a reference to the DOM element and the current hover state. | ||
| return { refOfUseHover, useHoverIsHovered }; | ||
| // Return an object containing a reference to the DOM element and the current hover state. | ||
| return { refOfUseHover, useHoverIsHovered }; | ||
| } | ||
| function useActive() { | ||
| // Initialize the state variable 'useActiveIsActive' with the initial active state. | ||
| const [useActiveIsActive, setUseActiveIsActive] = useState(false); | ||
| // Initialize the state variable 'useActiveIsActive' with the initial active state. | ||
| const [useActiveIsActive, setUseActiveIsActive] = useState(false); | ||
| // Create a refOfUseActive to store the reference to the DOM element. | ||
| const refOfUseActive = useRef(null); | ||
| // Create a refOfUseActive to store the reference to the DOM element. | ||
| const refOfUseActive = useRef(null); | ||
| // Define memoized functions to handle mouse down and mouse up events. | ||
| const handleMouseDown = useCallback(() => { | ||
| setUseActiveIsActive(true); | ||
| }, []); | ||
| // Define memoized functions to handle mouse down and mouse up events. | ||
| const handleMouseDown = useCallback(() => { | ||
| setUseActiveIsActive(true); | ||
| }, []); | ||
| const handleMouseUp = useCallback(() => { | ||
| setUseActiveIsActive(false); | ||
| }, []); | ||
| const handleMouseUp = useCallback(() => { | ||
| setUseActiveIsActive(false); | ||
| }, []); | ||
| // useEffect is used to set up the subscription to the mouse down and mouse up events. | ||
| useEffect(() => { | ||
| const element = refOfUseActive.current; | ||
| // useEffect is used to set up the subscription to the mouse down and mouse up events. | ||
| useEffect(() => { | ||
| const element = refOfUseActive.current; | ||
| if (element) { | ||
| element.addEventListener("mousedown", handleMouseDown); | ||
| element.addEventListener("mouseup", handleMouseUp); | ||
| if (element) { | ||
| element.addEventListener("mousedown", handleMouseDown); | ||
| element.addEventListener("mouseup", handleMouseUp); | ||
| // Clean up by removing the event listeners when the component unmounts. | ||
| return () => { | ||
| element.removeEventListener("mousedown", handleMouseDown); | ||
| element.removeEventListener("mouseup", handleMouseUp); | ||
| }; | ||
| } | ||
| }, [handleMouseDown, handleMouseUp]); | ||
| // Clean up by removing the event listeners when the component unmounts. | ||
| return () => { | ||
| element.removeEventListener("mousedown", handleMouseDown); | ||
| element.removeEventListener("mouseup", handleMouseUp); | ||
| }; | ||
| } | ||
| }, [handleMouseDown, handleMouseUp]); | ||
| // Return an object containing a mutable reference to the DOM element and the current active state. | ||
| return { refOfUseActive, useActiveIsActive }; | ||
| // Return an object containing a mutable reference to the DOM element and the current active state. | ||
| return { refOfUseActive, useActiveIsActive }; | ||
| } | ||
| const useMousePosition = () => { | ||
| const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); | ||
| const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); | ||
| const handleMouseMove = (event) => { | ||
| setMousePosition({ x: event.clientX, y: event.clientY }); | ||
| }; | ||
| const handleMouseMove = (event) => { | ||
| setMousePosition({ x: event.clientX, y: event.clientY }); | ||
| }; | ||
| useEffect(() => { | ||
| document.addEventListener("mousemove", handleMouseMove); | ||
| useEffect(() => { | ||
| document.addEventListener("mousemove", handleMouseMove); | ||
| return () => { | ||
| document.removeEventListener("mousemove", handleMouseMove); | ||
| }; | ||
| }, []); | ||
| return () => { | ||
| document.removeEventListener("mousemove", handleMouseMove); | ||
| }; | ||
| }, []); | ||
| return mousePosition; | ||
| return mousePosition; | ||
| }; | ||
| function mergeRefs(...refs) { | ||
| // Define a memoized function to set the value of each ref in the array based on the order of the refs. | ||
| const mergeFunction = (val) => { | ||
| setRef(val, ...refs); | ||
| }; | ||
| // Define a memoized function to set the value of each ref in the array based on the order of the refs. | ||
| const mergeFunction = (val) => { | ||
| setRef(val, ...refs); | ||
| }; | ||
| // Return the memoized merge function. | ||
| return mergeFunction; | ||
| // Return the memoized merge function. | ||
| return mergeFunction; | ||
| } | ||
@@ -590,1213 +590,1213 @@ | ||
| function setRef(val, ...refs) { | ||
| // Loop through each ref in the array. | ||
| for (let i = 0; i < refs.length; i++) { | ||
| // If the ref is a function, call the ref with the value. | ||
| if (typeof refs[i] === "function") { | ||
| refs[i](val); | ||
| } | ||
| // Otherwise, set the ref.current property to the value. | ||
| else if (refs[i] != null) { | ||
| refs[i].current = val; | ||
| } | ||
| } | ||
| // Loop through each ref in the array. | ||
| for (let i = 0; i < refs.length; i++) { | ||
| // If the ref is a function, call the ref with the value. | ||
| if (typeof refs[i] === "function") { | ||
| refs[i](val); | ||
| } | ||
| // Otherwise, set the ref.current property to the value. | ||
| else if (refs[i] != null) { | ||
| refs[i].current = val; | ||
| } | ||
| } | ||
| } | ||
| const styles = { | ||
| centerPosition: { | ||
| position: "absolute", | ||
| left: "50%", | ||
| top: "50%", | ||
| transform: "translate(-50%, -50%)", | ||
| }, | ||
| centerPosition: { | ||
| position: "absolute", | ||
| left: "50%", | ||
| top: "50%", | ||
| transform: "translate(-50%, -50%)", | ||
| }, | ||
| textCenter: { | ||
| textAlign: "center", | ||
| }, | ||
| textLeft: { | ||
| textAlign: "left", | ||
| }, | ||
| textRight: { | ||
| textAlign: "right", | ||
| }, | ||
| textCenter: { | ||
| textAlign: "center", | ||
| }, | ||
| textLeft: { | ||
| textAlign: "left", | ||
| }, | ||
| textRight: { | ||
| textAlign: "right", | ||
| }, | ||
| floatLeft: { | ||
| float: "left", | ||
| }, | ||
| floatRight: { | ||
| float: "right", | ||
| }, | ||
| centerContentFlex: { | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }, | ||
| dispFlex: { | ||
| display: "flex", | ||
| }, | ||
| dispInlineFlex: { | ||
| display: "inline-flex", | ||
| }, | ||
| floatLeft: { | ||
| float: "left", | ||
| }, | ||
| floatRight: { | ||
| float: "right", | ||
| }, | ||
| centerContentFlex: { | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }, | ||
| dispFlex: { | ||
| display: "flex", | ||
| }, | ||
| dispInlineFlex: { | ||
| display: "inline-flex", | ||
| }, | ||
| dispNone: { | ||
| display: "none", | ||
| }, | ||
| dispBlock: { | ||
| display: "block", | ||
| }, | ||
| dispInline: { | ||
| display: "inline", | ||
| }, | ||
| dispInlineBlock: { | ||
| display: "inline-block", | ||
| }, | ||
| dispTable: { | ||
| display: "table", | ||
| }, | ||
| dispTableRow: { | ||
| display: "table-row", | ||
| }, | ||
| dispTableCell: { | ||
| display: "table-cell", | ||
| }, | ||
| dispNone: { | ||
| display: "none", | ||
| }, | ||
| dispBlock: { | ||
| display: "block", | ||
| }, | ||
| dispInline: { | ||
| display: "inline", | ||
| }, | ||
| dispInlineBlock: { | ||
| display: "inline-block", | ||
| }, | ||
| dispTable: { | ||
| display: "table", | ||
| }, | ||
| dispTableRow: { | ||
| display: "table-row", | ||
| }, | ||
| dispTableCell: { | ||
| display: "table-cell", | ||
| }, | ||
| dispGrid: { | ||
| display: "grid", | ||
| }, | ||
| dispInlineGrid: { | ||
| display: "inline-grid", | ||
| }, | ||
| dispGrid: { | ||
| display: "grid", | ||
| }, | ||
| dispInlineGrid: { | ||
| display: "inline-grid", | ||
| }, | ||
| fontColor: (color) => { | ||
| if (isValidColor(color)) { | ||
| return { | ||
| color: color, | ||
| }; | ||
| } else { | ||
| throw new Error("Invalid color value in fontColor"); | ||
| } | ||
| }, | ||
| bg: (color) => { | ||
| if (isValidColor(color)) { | ||
| return { | ||
| backgroundColor: color, | ||
| }; | ||
| } else { | ||
| throw new Error("Invalid color value in bg"); | ||
| } | ||
| }, | ||
| border: (size, type, color) => { | ||
| if ( | ||
| !isValidSize(size) || | ||
| !isValidBorderStyle(type) || | ||
| !isValidColor(color) | ||
| ) { | ||
| throw new Error("Invalid size, type, or color value in border"); | ||
| } | ||
| return { | ||
| border: `${size}px ${type} ${color}`, | ||
| }; | ||
| }, | ||
| fontColor: (color) => { | ||
| if (isValidColor(color)) { | ||
| return { | ||
| color: color, | ||
| }; | ||
| } else { | ||
| throw new Error("Invalid color value in fontColor"); | ||
| } | ||
| }, | ||
| bg: (color) => { | ||
| if (isValidColor(color)) { | ||
| return { | ||
| backgroundColor: color, | ||
| }; | ||
| } else { | ||
| throw new Error("Invalid color value in bg"); | ||
| } | ||
| }, | ||
| border: (size, type, color) => { | ||
| if ( | ||
| !isValidSize(size) || | ||
| !isValidBorderStyle(type) || | ||
| !isValidColor(color) | ||
| ) { | ||
| throw new Error("Invalid size, type, or color value in border"); | ||
| } | ||
| return { | ||
| border: `${size}px ${type} ${color}`, | ||
| }; | ||
| }, | ||
| margin: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in margin"); | ||
| } | ||
| return { | ||
| margin: `${size}px`, | ||
| }; | ||
| }, | ||
| marginTop: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginTop"); | ||
| } | ||
| return { | ||
| marginTop: `${size}px`, | ||
| }; | ||
| }, | ||
| marginBottom: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginBottom"); | ||
| } | ||
| return { | ||
| marginBottom: `${size}px`, | ||
| }; | ||
| }, | ||
| marginLeft: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginLeft"); | ||
| } | ||
| return { | ||
| marginLeft: `${size}px`, | ||
| }; | ||
| }, | ||
| marginRight: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginRight"); | ||
| } | ||
| return { | ||
| marginRight: `${size}px`, | ||
| }; | ||
| }, | ||
| padding: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in padding"); | ||
| } | ||
| return { | ||
| padding: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingTop: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingTop"); | ||
| } | ||
| return { | ||
| paddingTop: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingBottom: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingBottom"); | ||
| } | ||
| return { | ||
| paddingBottom: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingLeft: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingLeft"); | ||
| } | ||
| return { | ||
| paddingLeft: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingRight: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingRight"); | ||
| } | ||
| return { | ||
| paddingRight: `${size}px`, | ||
| }; | ||
| }, | ||
| respMargin: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMargin"); | ||
| } | ||
| return { | ||
| margin: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginTop: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginTop"); | ||
| } | ||
| return { | ||
| marginTop: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginLeft: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginLeft"); | ||
| } | ||
| return { | ||
| marginLeft: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginRight: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginRight"); | ||
| } | ||
| return { | ||
| marginRight: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginBottom: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginBottom"); | ||
| } | ||
| return { | ||
| marginBottom: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPadding: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPadding"); | ||
| } | ||
| return { | ||
| padding: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingTop: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingTop"); | ||
| } | ||
| return { | ||
| paddingTop: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingLeft: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingLeft"); | ||
| } | ||
| return { | ||
| paddingLeft: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingRight: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingRight"); | ||
| } | ||
| return { | ||
| paddingRight: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingBottom: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingBottom"); | ||
| } | ||
| return { | ||
| paddingBottom: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| marginNone: { | ||
| margin: 0, | ||
| }, | ||
| paddingNone: { | ||
| padding: 0, | ||
| }, | ||
| borderNone: { | ||
| border: 0, | ||
| }, | ||
| borderRadiusNone: { | ||
| borderRadius: 0, | ||
| }, | ||
| boxShadowNone: { | ||
| boxShadow: "none", | ||
| }, | ||
| textShadowNone: { | ||
| textShadow: "none", | ||
| }, | ||
| margin: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in margin"); | ||
| } | ||
| return { | ||
| margin: `${size}px`, | ||
| }; | ||
| }, | ||
| marginTop: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginTop"); | ||
| } | ||
| return { | ||
| marginTop: `${size}px`, | ||
| }; | ||
| }, | ||
| marginBottom: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginBottom"); | ||
| } | ||
| return { | ||
| marginBottom: `${size}px`, | ||
| }; | ||
| }, | ||
| marginLeft: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginLeft"); | ||
| } | ||
| return { | ||
| marginLeft: `${size}px`, | ||
| }; | ||
| }, | ||
| marginRight: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in marginRight"); | ||
| } | ||
| return { | ||
| marginRight: `${size}px`, | ||
| }; | ||
| }, | ||
| padding: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in padding"); | ||
| } | ||
| return { | ||
| padding: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingTop: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingTop"); | ||
| } | ||
| return { | ||
| paddingTop: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingBottom: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingBottom"); | ||
| } | ||
| return { | ||
| paddingBottom: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingLeft: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingLeft"); | ||
| } | ||
| return { | ||
| paddingLeft: `${size}px`, | ||
| }; | ||
| }, | ||
| paddingRight: (size) => { | ||
| if (!isValidSize(size)) { | ||
| throw new Error("Invalid size value in paddingRight"); | ||
| } | ||
| return { | ||
| paddingRight: `${size}px`, | ||
| }; | ||
| }, | ||
| respMargin: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMargin"); | ||
| } | ||
| return { | ||
| margin: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginTop: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginTop"); | ||
| } | ||
| return { | ||
| marginTop: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginLeft: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginLeft"); | ||
| } | ||
| return { | ||
| marginLeft: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginRight: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginRight"); | ||
| } | ||
| return { | ||
| marginRight: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respMarginBottom: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respMarginBottom"); | ||
| } | ||
| return { | ||
| marginBottom: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPadding: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPadding"); | ||
| } | ||
| return { | ||
| padding: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingTop: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingTop"); | ||
| } | ||
| return { | ||
| paddingTop: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingLeft: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingLeft"); | ||
| } | ||
| return { | ||
| paddingLeft: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingRight: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingRight"); | ||
| } | ||
| return { | ||
| paddingRight: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| respPaddingBottom: (min, max) => { | ||
| if (!isValidSize(min) || !isValidSize(max)) { | ||
| throw new Error("Invalid size value in respPaddingBottom"); | ||
| } | ||
| return { | ||
| paddingBottom: `clamp(${min}px, 5vw, ${max}px)`, | ||
| }; | ||
| }, | ||
| marginNone: { | ||
| margin: 0, | ||
| }, | ||
| paddingNone: { | ||
| padding: 0, | ||
| }, | ||
| borderNone: { | ||
| border: 0, | ||
| }, | ||
| borderRadiusNone: { | ||
| borderRadius: 0, | ||
| }, | ||
| boxShadowNone: { | ||
| boxShadow: "none", | ||
| }, | ||
| textShadowNone: { | ||
| textShadow: "none", | ||
| }, | ||
| zIndex: (value) => { | ||
| if (!isValidSize(value)) { | ||
| throw new Error("Invalid value in zIndex"); | ||
| } | ||
| return { | ||
| zIndex: value, | ||
| }; | ||
| }, | ||
| textDeco: (value) => { | ||
| if (!isValidTextDecoration(value)) { | ||
| throw new Error("Invalid value in textDeco"); | ||
| } | ||
| return { | ||
| textDecoration: value, | ||
| }; | ||
| }, | ||
| textTrans: (value) => { | ||
| if (!isValidTextTransform(value)) { | ||
| throw new Error("Invalid value in textTrans"); | ||
| } | ||
| return { | ||
| textTransform: value, | ||
| }; | ||
| }, | ||
| zIndex: (value) => { | ||
| if (!isValidSize(value)) { | ||
| throw new Error("Invalid value in zIndex"); | ||
| } | ||
| return { | ||
| zIndex: value, | ||
| }; | ||
| }, | ||
| textDeco: (value) => { | ||
| if (!isValidTextDecoration(value)) { | ||
| throw new Error("Invalid value in textDeco"); | ||
| } | ||
| return { | ||
| textDecoration: value, | ||
| }; | ||
| }, | ||
| textTrans: (value) => { | ||
| if (!isValidTextTransform(value)) { | ||
| throw new Error("Invalid value in textTrans"); | ||
| } | ||
| return { | ||
| textTransform: value, | ||
| }; | ||
| }, | ||
| transBg: { | ||
| backgroundColor: "transparent", | ||
| }, | ||
| rounded: { | ||
| borderRadius: "5px", | ||
| }, | ||
| extraRounded: { | ||
| borderRadius: "25px", | ||
| }, | ||
| megaRounded: { | ||
| borderRadius: "45px", | ||
| }, | ||
| superRounded: { | ||
| borderRadius: "65px", | ||
| }, | ||
| ultraRounded: { | ||
| borderRadius: "85px", | ||
| }, | ||
| extremeRounded: { | ||
| borderRadius: "105px", | ||
| }, | ||
| radicalRounded: { | ||
| borderRadius: "125px", | ||
| }, | ||
| hyperRounded: { | ||
| borderRadius: "145px", | ||
| }, | ||
| ultimateRounded: { | ||
| borderRadius: "165px", | ||
| }, | ||
| maxRounded: { | ||
| borderRadius: "185px", | ||
| }, | ||
| beyondRounded: { | ||
| borderRadius: "205px", | ||
| }, | ||
| transBg: { | ||
| backgroundColor: "transparent", | ||
| }, | ||
| rounded: { | ||
| borderRadius: "5px", | ||
| }, | ||
| extraRounded: { | ||
| borderRadius: "25px", | ||
| }, | ||
| megaRounded: { | ||
| borderRadius: "45px", | ||
| }, | ||
| superRounded: { | ||
| borderRadius: "65px", | ||
| }, | ||
| ultraRounded: { | ||
| borderRadius: "85px", | ||
| }, | ||
| extremeRounded: { | ||
| borderRadius: "105px", | ||
| }, | ||
| radicalRounded: { | ||
| borderRadius: "125px", | ||
| }, | ||
| hyperRounded: { | ||
| borderRadius: "145px", | ||
| }, | ||
| ultimateRounded: { | ||
| borderRadius: "165px", | ||
| }, | ||
| maxRounded: { | ||
| borderRadius: "185px", | ||
| }, | ||
| beyondRounded: { | ||
| borderRadius: "205px", | ||
| }, | ||
| flexJContent: (type) => { | ||
| if (!isValidJContent(type)) { | ||
| throw new Error("Invalid value in flexJContent"); | ||
| } | ||
| return { | ||
| justifyContent: type, | ||
| }; | ||
| }, | ||
| flexJContent: (type) => { | ||
| if (!isValidJContent(type)) { | ||
| throw new Error("Invalid value in flexJContent"); | ||
| } | ||
| return { | ||
| justifyContent: type, | ||
| }; | ||
| }, | ||
| flexAContent: (type) => { | ||
| if (!isValidAContent(type)) { | ||
| throw new Error("Invalid value in flexAContent"); | ||
| } | ||
| return { | ||
| alignItems: type, | ||
| }; | ||
| }, | ||
| flexAContent: (type) => { | ||
| if (!isValidAContent(type)) { | ||
| throw new Error("Invalid value in flexAContent"); | ||
| } | ||
| return { | ||
| alignItems: type, | ||
| }; | ||
| }, | ||
| RespFontSize: (min, max) => ({ | ||
| fontSize: `clamp(${min}px, 4vw, ${max}px)`, | ||
| }), | ||
| RespLineHeight: (min, max) => ({ | ||
| lineHeight: `clamp(${min}px, 4vw, ${max}px)`, | ||
| }), | ||
| respFontWeight: (min, max) => ({ | ||
| fontWeight: `clamp(${min}, 4vw, ${max})`, | ||
| }), | ||
| boxShadowLight: { | ||
| boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", | ||
| }, | ||
| RespFontSize: (min, max) => ({ | ||
| fontSize: `clamp(${min}px, 4vw, ${max}px)`, | ||
| }), | ||
| RespLineHeight: (min, max) => ({ | ||
| lineHeight: `clamp(${min}px, 4vw, ${max}px)`, | ||
| }), | ||
| respFontWeight: (min, max) => ({ | ||
| fontWeight: `clamp(${min}, 4vw, ${max})`, | ||
| }), | ||
| boxShadowLight: { | ||
| boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", | ||
| }, | ||
| textPrimary: { | ||
| color: "#007bff", | ||
| }, | ||
| textPrimary: { | ||
| color: "#007bff", | ||
| }, | ||
| textSecondary: { | ||
| color: "#6c757d", | ||
| }, | ||
| textSecondary: { | ||
| color: "#6c757d", | ||
| }, | ||
| bgLight: { | ||
| backgroundColor: "#f8f9fa", | ||
| }, | ||
| bgLight: { | ||
| backgroundColor: "#f8f9fa", | ||
| }, | ||
| roundedCircle: { | ||
| borderRadius: "50%", | ||
| }, | ||
| bgPrimary: { | ||
| backgroundColor: "#007bff", | ||
| color: "#fff", | ||
| }, | ||
| roundedCircle: { | ||
| borderRadius: "50%", | ||
| }, | ||
| bgPrimary: { | ||
| backgroundColor: "#007bff", | ||
| color: "#fff", | ||
| }, | ||
| bgSuccess: { | ||
| backgroundColor: "#28a745", | ||
| color: "#fff", | ||
| }, | ||
| bgSuccess: { | ||
| backgroundColor: "#28a745", | ||
| color: "#fff", | ||
| }, | ||
| bgDanger: { | ||
| backgroundColor: "#dc3545", | ||
| color: "#fff", | ||
| }, | ||
| bgDanger: { | ||
| backgroundColor: "#dc3545", | ||
| color: "#fff", | ||
| }, | ||
| textUppercase: { | ||
| textTransform: "uppercase", | ||
| }, | ||
| textUppercase: { | ||
| textTransform: "uppercase", | ||
| }, | ||
| textBold: { | ||
| fontWeight: "bold", | ||
| }, | ||
| positionFixed: { | ||
| position: "fixed", | ||
| }, | ||
| textBold: { | ||
| fontWeight: "bold", | ||
| }, | ||
| positionFixed: { | ||
| position: "fixed", | ||
| }, | ||
| fullWidth: { | ||
| width: "100%", | ||
| }, | ||
| fullHeight: { | ||
| height: "100%", | ||
| }, | ||
| fullWidthHeight: { | ||
| width: "100%", | ||
| height: "100%", | ||
| }, | ||
| overflowHidden: { | ||
| overflow: "hidden", | ||
| }, | ||
| positionAbsolute: { | ||
| position: "absolute", | ||
| }, | ||
| positionRelative: { | ||
| position: "relative", | ||
| }, | ||
| positionSticky: { | ||
| position: "sticky", | ||
| }, | ||
| positionStatic: { | ||
| position: "static", | ||
| }, | ||
| transition: (property, duration, timingFunction, delay) => { | ||
| return { | ||
| transition: `${property} ${duration}s ${timingFunction}s ${delay}s`, | ||
| }; | ||
| }, | ||
| fullWidth: { | ||
| width: "100%", | ||
| }, | ||
| fullHeight: { | ||
| height: "100%", | ||
| }, | ||
| fullWidthHeight: { | ||
| width: "100%", | ||
| height: "100%", | ||
| }, | ||
| overflowHidden: { | ||
| overflow: "hidden", | ||
| }, | ||
| positionAbsolute: { | ||
| position: "absolute", | ||
| }, | ||
| positionRelative: { | ||
| position: "relative", | ||
| }, | ||
| positionSticky: { | ||
| position: "sticky", | ||
| }, | ||
| positionStatic: { | ||
| position: "static", | ||
| }, | ||
| transition: (property, duration, timingFunction, delay) => { | ||
| return { | ||
| transition: `${property} ${duration}s ${timingFunction}s ${delay}s`, | ||
| }; | ||
| }, | ||
| rotate: (degree) => { | ||
| return { | ||
| transform: `rotate(${degree}deg)`, | ||
| }; | ||
| }, | ||
| rotate: (degree) => { | ||
| return { | ||
| transform: `rotate(${degree}deg)`, | ||
| }; | ||
| }, | ||
| scale: (factor) => { | ||
| return { | ||
| transform: `scale(${factor})`, | ||
| }; | ||
| }, | ||
| boxShadowDark: { | ||
| boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", | ||
| }, | ||
| scale: (factor) => { | ||
| return { | ||
| transform: `scale(${factor})`, | ||
| }; | ||
| }, | ||
| boxShadowDark: { | ||
| boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", | ||
| }, | ||
| outlineNone: { | ||
| outline: "none", | ||
| }, | ||
| outlineNone: { | ||
| outline: "none", | ||
| }, | ||
| pointer: { | ||
| cursor: "pointer", | ||
| }, | ||
| pointer: { | ||
| cursor: "pointer", | ||
| }, | ||
| noPointerEvents: { | ||
| pointerEvents: "none", | ||
| }, | ||
| noPointerEvents: { | ||
| pointerEvents: "none", | ||
| }, | ||
| overflowAuto: { | ||
| overflow: "auto", | ||
| }, | ||
| overflowAuto: { | ||
| overflow: "auto", | ||
| }, | ||
| overflowScroll: { | ||
| overflow: "scroll", | ||
| }, | ||
| overflowScroll: { | ||
| overflow: "scroll", | ||
| }, | ||
| overflowVisible: { | ||
| overflow: "visible", | ||
| }, | ||
| overflowVisible: { | ||
| overflow: "visible", | ||
| }, | ||
| overflowXHidden: { | ||
| overflowX: "hidden", | ||
| }, | ||
| overflowXHidden: { | ||
| overflowX: "hidden", | ||
| }, | ||
| overflowYHidden: { | ||
| overflowY: "hidden", | ||
| }, | ||
| overflowYHidden: { | ||
| overflowY: "hidden", | ||
| }, | ||
| gradientBg: (startColor, endColor) => { | ||
| return { | ||
| background: `linear-gradient(${startColor}, ${endColor})`, | ||
| }; | ||
| }, | ||
| gradientBg: (startColor, endColor) => { | ||
| return { | ||
| background: `linear-gradient(${startColor}, ${endColor})`, | ||
| }; | ||
| }, | ||
| bgImage: (url, size, position, repeat) => { | ||
| const { x, y } = position; | ||
| return { | ||
| background: `url(${url}) ${size}px ${x}px ${y}px ${ | ||
| repeat ? "repeat" : "no-repeat" | ||
| }`, | ||
| }; | ||
| }, | ||
| bgImage: (url, size, position, repeat) => { | ||
| const { x, y } = position; | ||
| return { | ||
| background: `url(${url}) ${size}px ${x}px ${y}px ${ | ||
| repeat ? "repeat" : "no-repeat" | ||
| }`, | ||
| }; | ||
| }, | ||
| flexColumn: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| }, | ||
| flexColumn: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| }, | ||
| flexRow: { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| }, | ||
| flexRow: { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| }, | ||
| flexWrap: { | ||
| flexWrap: "wrap", | ||
| }, | ||
| flexWrap: { | ||
| flexWrap: "wrap", | ||
| }, | ||
| flexNoWrap: { | ||
| flexWrap: "nowrap", | ||
| }, | ||
| flexNoWrap: { | ||
| flexWrap: "nowrap", | ||
| }, | ||
| flexGrow: (value) => { | ||
| return { | ||
| flexGrow: value, | ||
| }; | ||
| }, | ||
| flexGrow: (value) => { | ||
| return { | ||
| flexGrow: value, | ||
| }; | ||
| }, | ||
| flexShrink: (value) => { | ||
| return { | ||
| flexShrink: value, | ||
| }; | ||
| }, | ||
| flexShrink: (value) => { | ||
| return { | ||
| flexShrink: value, | ||
| }; | ||
| }, | ||
| flexBasisEm: (value) => { | ||
| return { | ||
| flexBasis: `${value}em`, | ||
| }; | ||
| }, | ||
| flexBasisPerc: (value) => { | ||
| return { | ||
| flexBasis: `${value}%`, | ||
| }; | ||
| }, | ||
| flexBasisPx: (value) => { | ||
| return { | ||
| flexBasis: `${value}px`, | ||
| }; | ||
| }, | ||
| flexBasisAuto: { | ||
| flexBasis: "auto", | ||
| }, | ||
| flexBasisMaxC: { | ||
| flexBasis: "max-content", | ||
| }, | ||
| flexBasisMinC: { | ||
| flexBasis: "min-content", | ||
| }, | ||
| flexBasisFitC: { | ||
| flexBasis: "fit-content", | ||
| }, | ||
| flexBasisC: { | ||
| flexBasis: "content", | ||
| }, | ||
| flexCenter: { | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }, | ||
| flexBasisEm: (value) => { | ||
| return { | ||
| flexBasis: `${value}em`, | ||
| }; | ||
| }, | ||
| flexBasisPerc: (value) => { | ||
| return { | ||
| flexBasis: `${value}%`, | ||
| }; | ||
| }, | ||
| flexBasisPx: (value) => { | ||
| return { | ||
| flexBasis: `${value}px`, | ||
| }; | ||
| }, | ||
| flexBasisAuto: { | ||
| flexBasis: "auto", | ||
| }, | ||
| flexBasisMaxC: { | ||
| flexBasis: "max-content", | ||
| }, | ||
| flexBasisMinC: { | ||
| flexBasis: "min-content", | ||
| }, | ||
| flexBasisFitC: { | ||
| flexBasis: "fit-content", | ||
| }, | ||
| flexBasisC: { | ||
| flexBasis: "content", | ||
| }, | ||
| flexCenter: { | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }, | ||
| letterSpacing: (value) => { | ||
| return { | ||
| letterSpacing: `${value}px`, | ||
| }; | ||
| }, | ||
| letterSpacing: (value) => { | ||
| return { | ||
| letterSpacing: `${value}px`, | ||
| }; | ||
| }, | ||
| wordSpacing: (value) => { | ||
| return { | ||
| wordSpacing: `${value}px`, | ||
| }; | ||
| }, | ||
| wordSpacing: (value) => { | ||
| return { | ||
| wordSpacing: `${value}px`, | ||
| }; | ||
| }, | ||
| textAlignJustify: { | ||
| textAlign: "justify", | ||
| }, | ||
| textAlignJustify: { | ||
| textAlign: "justify", | ||
| }, | ||
| overflowEllipsis: { | ||
| overflow: "hidden", | ||
| whiteSpace: "nowrap", | ||
| textOverflow: "ellipsis", | ||
| }, | ||
| overflowEllipsis: { | ||
| overflow: "hidden", | ||
| whiteSpace: "nowrap", | ||
| textOverflow: "ellipsis", | ||
| }, | ||
| cursorNotAllowed: { | ||
| cursor: "not-allowed", | ||
| }, | ||
| cursorNotAllowed: { | ||
| cursor: "not-allowed", | ||
| }, | ||
| cursorGrab: { | ||
| cursor: "grab", | ||
| }, | ||
| cursorGrab: { | ||
| cursor: "grab", | ||
| }, | ||
| cursorGrabbing: { | ||
| cursor: "grabbing", | ||
| }, | ||
| cursorGrabbing: { | ||
| cursor: "grabbing", | ||
| }, | ||
| opacity: (value) => { | ||
| return { | ||
| opacity: value, | ||
| }; | ||
| }, | ||
| opacity: (value) => { | ||
| return { | ||
| opacity: value, | ||
| }; | ||
| }, | ||
| filterBlur: (value) => { | ||
| return { | ||
| filter: `blur(${value}px)`, | ||
| }; | ||
| }, | ||
| filterBlur: (value) => { | ||
| return { | ||
| filter: `blur(${value}px)`, | ||
| }; | ||
| }, | ||
| filterBrightness: (value) => { | ||
| return { | ||
| filter: `brightness(${value}%)`, | ||
| }; | ||
| }, | ||
| filterBrightness: (value) => { | ||
| return { | ||
| filter: `brightness(${value}%)`, | ||
| }; | ||
| }, | ||
| filterContrast: (value) => { | ||
| return { | ||
| filter: `contrast(${value}%)`, | ||
| }; | ||
| }, | ||
| filterContrast: (value) => { | ||
| return { | ||
| filter: `contrast(${value}%)`, | ||
| }; | ||
| }, | ||
| filterGrayscale: (value) => { | ||
| return { | ||
| filter: `grayscale(${value}%)`, | ||
| }; | ||
| }, | ||
| filterGrayscale: (value) => { | ||
| return { | ||
| filter: `grayscale(${value}%)`, | ||
| }; | ||
| }, | ||
| filterHueRotate: (value) => { | ||
| return { | ||
| filter: `hue-rotate(${value}deg)`, | ||
| }; | ||
| }, | ||
| filterHueRotate: (value) => { | ||
| return { | ||
| filter: `hue-rotate(${value}deg)`, | ||
| }; | ||
| }, | ||
| filterInvert: (value) => { | ||
| return { | ||
| filter: `invert(${value}%)`, | ||
| }; | ||
| }, | ||
| filterInvert: (value) => { | ||
| return { | ||
| filter: `invert(${value}%)`, | ||
| }; | ||
| }, | ||
| filterOpacity: (value) => { | ||
| return { | ||
| filter: `opacity(${value}%)`, | ||
| }; | ||
| }, | ||
| filterOpacity: (value) => { | ||
| return { | ||
| filter: `opacity(${value}%)`, | ||
| }; | ||
| }, | ||
| filterSaturate: (value) => { | ||
| return { | ||
| filter: `saturate(${value}%)`, | ||
| }; | ||
| }, | ||
| filterSaturate: (value) => { | ||
| return { | ||
| filter: `saturate(${value}%)`, | ||
| }; | ||
| }, | ||
| filterSepia: (value) => { | ||
| return { | ||
| filter: `sepia(${value}%)`, | ||
| }; | ||
| }, | ||
| bgPrimaryHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| filterSepia: (value) => { | ||
| return { | ||
| filter: `sepia(${value}%)`, | ||
| }; | ||
| }, | ||
| bgPrimaryHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| stylePrimaryHover: isHovered | ||
| ? { | ||
| backgroundColor: "#0056b3", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refPrimaryHover: ref, | ||
| }; | ||
| }, | ||
| return { | ||
| stylePrimaryHover: isHovered | ||
| ? { | ||
| backgroundColor: "#0056b3", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refPrimaryHover: ref, | ||
| }; | ||
| }, | ||
| bgSuccessHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| bgSuccessHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleSuccessHover: isHovered | ||
| ? { | ||
| backgroundColor: "#218838", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSuccessHover: ref, | ||
| }; | ||
| }, | ||
| bgDangerHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleSuccessHover: isHovered | ||
| ? { | ||
| backgroundColor: "#218838", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSuccessHover: ref, | ||
| }; | ||
| }, | ||
| bgDangerHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleDangerHover: isHovered | ||
| ? { | ||
| backgroundColor: "#d32f2f", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDangerHover: ref, | ||
| }; | ||
| }, | ||
| bgWarningHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleDangerHover: isHovered | ||
| ? { | ||
| backgroundColor: "#d32f2f", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDangerHover: ref, | ||
| }; | ||
| }, | ||
| bgWarningHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleWarningHover: isHovered | ||
| ? { | ||
| backgroundColor: "#f0ad4e", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refWarningHover: ref, | ||
| }; | ||
| }, | ||
| bgInfoHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleWarningHover: isHovered | ||
| ? { | ||
| backgroundColor: "#f0ad4e", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refWarningHover: ref, | ||
| }; | ||
| }, | ||
| bgInfoHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleInfoHover: isHovered | ||
| ? { | ||
| backgroundColor: "#17a2b8", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refInfoHover: ref, | ||
| }; | ||
| }, | ||
| bgSecondaryHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleInfoHover: isHovered | ||
| ? { | ||
| backgroundColor: "#17a2b8", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refInfoHover: ref, | ||
| }; | ||
| }, | ||
| bgSecondaryHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleSecondaryHover: isHovered | ||
| ? { | ||
| backgroundColor: "#6c757d", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSecondaryHover: ref, | ||
| }; | ||
| }, | ||
| bgLightHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleSecondaryHover: isHovered | ||
| ? { | ||
| backgroundColor: "#6c757d", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSecondaryHover: ref, | ||
| }; | ||
| }, | ||
| bgLightHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleLightHover: isHovered | ||
| ? { | ||
| backgroundColor: "#f8f9fa", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refLightHover: ref, | ||
| }; | ||
| }, | ||
| bgDarkHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleLightHover: isHovered | ||
| ? { | ||
| backgroundColor: "#f8f9fa", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refLightHover: ref, | ||
| }; | ||
| }, | ||
| bgDarkHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleDarkHover: isHovered | ||
| ? { | ||
| backgroundColor: "#343a40", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDarkHover: ref, | ||
| }; | ||
| }, | ||
| bgWhiteHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleDarkHover: isHovered | ||
| ? { | ||
| backgroundColor: "#343a40", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDarkHover: ref, | ||
| }; | ||
| }, | ||
| bgWhiteHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleWhiteHover: isHovered | ||
| ? { | ||
| backgroundColor: "#fff", | ||
| color: "#000", | ||
| } | ||
| : {}, | ||
| refWhiteHover: ref, | ||
| }; | ||
| }, | ||
| bgTransparentHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleWhiteHover: isHovered | ||
| ? { | ||
| backgroundColor: "#fff", | ||
| color: "#000", | ||
| } | ||
| : {}, | ||
| refWhiteHover: ref, | ||
| }; | ||
| }, | ||
| bgTransparentHover: () => { | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| styleTransparentHover: isHovered | ||
| ? { | ||
| backgroundColor: "transparent", | ||
| color: "#000", | ||
| } | ||
| : {}, | ||
| refTransparentHover: ref, | ||
| }; | ||
| }, | ||
| bgPrimaryActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleTransparentHover: isHovered | ||
| ? { | ||
| backgroundColor: "transparent", | ||
| color: "#000", | ||
| } | ||
| : {}, | ||
| refTransparentHover: ref, | ||
| }; | ||
| }, | ||
| bgPrimaryActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| stylePrimaryActive: isActive | ||
| ? { | ||
| backgroundColor: "#0056b3", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refPrimaryActive: ref, | ||
| }; | ||
| }, | ||
| bgSuccessActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| stylePrimaryActive: isActive | ||
| ? { | ||
| backgroundColor: "#0056b3", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refPrimaryActive: ref, | ||
| }; | ||
| }, | ||
| bgSuccessActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleSuccessActive: isActive | ||
| ? { | ||
| backgroundColor: "#218838", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSuccessActive: ref, | ||
| }; | ||
| }, | ||
| bgDangerActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleSuccessActive: isActive | ||
| ? { | ||
| backgroundColor: "#218838", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSuccessActive: ref, | ||
| }; | ||
| }, | ||
| bgDangerActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleDangerActive: isActive | ||
| ? { | ||
| backgroundColor: "#d32f2f", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDangerActive: ref, | ||
| }; | ||
| }, | ||
| bgWarningActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleDangerActive: isActive | ||
| ? { | ||
| backgroundColor: "#d32f2f", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDangerActive: ref, | ||
| }; | ||
| }, | ||
| bgWarningActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleWarningActive: isActive | ||
| ? { | ||
| backgroundColor: "#f0ad4e", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refWarningActive: ref, | ||
| }; | ||
| }, | ||
| bgInfoActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleWarningActive: isActive | ||
| ? { | ||
| backgroundColor: "#f0ad4e", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refWarningActive: ref, | ||
| }; | ||
| }, | ||
| bgInfoActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleInfoActive: isActive | ||
| ? { | ||
| backgroundColor: "#17a2b8", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refInfoActive: ref, | ||
| }; | ||
| }, | ||
| return { | ||
| styleInfoActive: isActive | ||
| ? { | ||
| backgroundColor: "#17a2b8", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refInfoActive: ref, | ||
| }; | ||
| }, | ||
| bgSecondaryActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| bgSecondaryActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleSecondaryActive: isActive | ||
| ? { | ||
| backgroundColor: "#6c757d", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSecondaryActive: ref, | ||
| }; | ||
| }, | ||
| bgLightActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleSecondaryActive: isActive | ||
| ? { | ||
| backgroundColor: "#6c757d", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refSecondaryActive: ref, | ||
| }; | ||
| }, | ||
| bgLightActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleLightActive: isActive | ||
| ? { | ||
| backgroundColor: "#f8f9fa", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refLightActive: ref, | ||
| }; | ||
| }, | ||
| return { | ||
| styleLightActive: isActive | ||
| ? { | ||
| backgroundColor: "#f8f9fa", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refLightActive: ref, | ||
| }; | ||
| }, | ||
| bgDarkActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleDarkActive: isActive | ||
| ? { | ||
| backgroundColor: "#343a40", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDarkActive: ref, | ||
| }; | ||
| }, | ||
| persWidth: (value) => { | ||
| return { | ||
| width: `${value}%`, | ||
| }; | ||
| }, | ||
| persWH: (value) => { | ||
| return { | ||
| width: `${value}%`, | ||
| height: `${value}%`, | ||
| }; | ||
| }, | ||
| persHeight: (value) => { | ||
| return { | ||
| height: `${value}%`, | ||
| }; | ||
| }, | ||
| pxWidth: (value) => { | ||
| return { | ||
| width: `${value}px`, | ||
| }; | ||
| }, | ||
| pxHeight: (value) => { | ||
| return { | ||
| height: `${value}px`, | ||
| }; | ||
| }, | ||
| pxWH: (value) => { | ||
| return { | ||
| width: `${value}px`, | ||
| height: `${value}px`, | ||
| }; | ||
| }, | ||
| dvhHeight: (value) => { | ||
| return { | ||
| height: `${value}dvh`, | ||
| }; | ||
| }, | ||
| dvwWidth: (value) => { | ||
| return { | ||
| width: `${value}dvw`, | ||
| }; | ||
| }, | ||
| dvWH: (value) => { | ||
| return { | ||
| width: `${value}dvw`, | ||
| height: `${value}dvh`, | ||
| }; | ||
| }, | ||
| fitContentW: { | ||
| width: "fit-content", | ||
| }, | ||
| fitContentH: { | ||
| height: "fit-content", | ||
| }, | ||
| fitContentHW: { | ||
| width: "fit-content", | ||
| height: "fit-content", | ||
| }, | ||
| maxWidthPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}px`, | ||
| }; | ||
| }, | ||
| maxHeightPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| maxWHPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}px`, | ||
| maxHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| minWidthPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}px`, | ||
| }; | ||
| }, | ||
| minHeightPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| minWHPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}px`, | ||
| minHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| minHeightPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}%`, | ||
| }; | ||
| }, | ||
| minWidthPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| minWHPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}%`, | ||
| minHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| maxWidthPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}%`, | ||
| }; | ||
| }, | ||
| maxHeightPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| maxWHPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}%`, | ||
| maxHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| gridSystem: (numColumns = 1, gapValue) => | ||
| new GridSystemOop(numColumns, gapValue), | ||
| bgDarkActive: () => { | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| styleDarkActive: isActive | ||
| ? { | ||
| backgroundColor: "#343a40", | ||
| color: "#fff", | ||
| } | ||
| : {}, | ||
| refDarkActive: ref, | ||
| }; | ||
| }, | ||
| persWidth: (value) => { | ||
| return { | ||
| width: `${value}%`, | ||
| }; | ||
| }, | ||
| persWH: (value) => { | ||
| return { | ||
| width: `${value}%`, | ||
| height: `${value}%`, | ||
| }; | ||
| }, | ||
| persHeight: (value) => { | ||
| return { | ||
| height: `${value}%`, | ||
| }; | ||
| }, | ||
| pxWidth: (value) => { | ||
| return { | ||
| width: `${value}px`, | ||
| }; | ||
| }, | ||
| pxHeight: (value) => { | ||
| return { | ||
| height: `${value}px`, | ||
| }; | ||
| }, | ||
| pxWH: (value) => { | ||
| return { | ||
| width: `${value}px`, | ||
| height: `${value}px`, | ||
| }; | ||
| }, | ||
| dvhHeight: (value) => { | ||
| return { | ||
| height: `${value}dvh`, | ||
| }; | ||
| }, | ||
| dvwWidth: (value) => { | ||
| return { | ||
| width: `${value}dvw`, | ||
| }; | ||
| }, | ||
| dvWH: (value) => { | ||
| return { | ||
| width: `${value}dvw`, | ||
| height: `${value}dvh`, | ||
| }; | ||
| }, | ||
| fitContentW: { | ||
| width: "fit-content", | ||
| }, | ||
| fitContentH: { | ||
| height: "fit-content", | ||
| }, | ||
| fitContentHW: { | ||
| width: "fit-content", | ||
| height: "fit-content", | ||
| }, | ||
| maxWidthPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}px`, | ||
| }; | ||
| }, | ||
| maxHeightPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| maxWHPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}px`, | ||
| maxHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| minWidthPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}px`, | ||
| }; | ||
| }, | ||
| minHeightPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| minWHPx: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}px`, | ||
| minHeight: `${value}px`, | ||
| }; | ||
| }, | ||
| minHeightPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}%`, | ||
| }; | ||
| }, | ||
| minWidthPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| minWHPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| minWidth: `${value}%`, | ||
| minHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| maxWidthPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}%`, | ||
| }; | ||
| }, | ||
| maxHeightPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| maxWHPers: (value) => { | ||
| return { | ||
| width: "100%", | ||
| maxWidth: `${value}%`, | ||
| maxHeight: `${value}%`, | ||
| }; | ||
| }, | ||
| gridSystem: (numColumns = 1, gapValue) => | ||
| new GridSystemOop(numColumns, gapValue), | ||
| gradientText: (angle, colors) => ({ | ||
| backgroundImage: `linear-gradient(${angle}, ${colors})`, | ||
| WebkitBackgroundClip: "text", | ||
| color: "transparent", | ||
| }), | ||
| flexibleGap: (minSpacing, maxSpacing) => ({ | ||
| gap: `clamp(${minSpacing}px, 2vw, ${maxSpacing}px)`, | ||
| }), | ||
| neonText: (color) => ({ | ||
| textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`, | ||
| }), | ||
| roundedCard: (bgColor, borderRadius) => ({ | ||
| backgroundColor: bgColor, | ||
| borderRadius, | ||
| padding: "20px", | ||
| boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", | ||
| }), | ||
| stickyHeader: (scrollThreshold) => { | ||
| const stickyHeaderRef = useRef(); | ||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const isSticky = window.scrollY > scrollThreshold; | ||
| stickyHeaderRef.current.style.position = isSticky ? "fixed" : "static"; | ||
| }; | ||
| gradientText: (angle, colors) => ({ | ||
| backgroundImage: `linear-gradient(${angle}, ${colors})`, | ||
| WebkitBackgroundClip: "text", | ||
| color: "transparent", | ||
| }), | ||
| flexibleGap: (minSpacing, maxSpacing) => ({ | ||
| gap: `clamp(${minSpacing}px, 2vw, ${maxSpacing}px)`, | ||
| }), | ||
| neonText: (color) => ({ | ||
| textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`, | ||
| }), | ||
| roundedCard: (bgColor, borderRadius) => ({ | ||
| backgroundColor: bgColor, | ||
| borderRadius, | ||
| padding: "20px", | ||
| boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", | ||
| }), | ||
| stickyHeader: (scrollThreshold) => { | ||
| const stickyHeaderRef = useRef(); | ||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const isSticky = window.scrollY > scrollThreshold; | ||
| stickyHeaderRef.current.style.position = isSticky ? "fixed" : "static"; | ||
| }; | ||
| window.addEventListener("scroll", handleScroll); | ||
| return () => { | ||
| window.removeEventListener("scroll", handleScroll); | ||
| }; | ||
| }, [scrollThreshold]); | ||
| return stickyHeaderRef; | ||
| }, | ||
| gridTemplateAreas: (areas) => ({ | ||
| gridTemplateAreas: areas.map((areas) => `"${areas}"`).join(" "), | ||
| }), | ||
| animation: ( | ||
| name, // Required for the animation name | ||
| options = {} // Optional object for overriding defaults | ||
| ) => { | ||
| // Define default values for animation properties: | ||
| const defaults = { | ||
| duration: "1s", | ||
| timingFunction: "ease", | ||
| delay: 0, | ||
| iterationCount: 1, | ||
| direction: "normal", | ||
| fillMode: "none", | ||
| playState: "running", | ||
| }; | ||
| const validatedOptions = { ...defaults, ...options }; | ||
| window.addEventListener("scroll", handleScroll); | ||
| return () => { | ||
| window.removeEventListener("scroll", handleScroll); | ||
| }; | ||
| }, [scrollThreshold]); | ||
| return stickyHeaderRef; | ||
| }, | ||
| gridTemplateAreas: (areas) => ({ | ||
| gridTemplateAreas: areas.map((areas) => `"${areas}"`).join(" "), | ||
| }), | ||
| animation: ( | ||
| name, // Required for the animation name | ||
| options = {} // Optional object for overriding defaults | ||
| ) => { | ||
| // Define default values for animation properties: | ||
| const defaults = { | ||
| duration: "1s", | ||
| timingFunction: "ease", | ||
| delay: 0, | ||
| iterationCount: 1, | ||
| direction: "normal", | ||
| fillMode: "none", | ||
| playState: "running", | ||
| }; | ||
| const validatedOptions = { ...defaults, ...options }; | ||
| // Validate numeric properties | ||
| const validateNumber = (prop, value) => { | ||
| if ( | ||
| typeof value !== "number" || | ||
| isNaN(value) || | ||
| (prop === "delay" && (value < 0 || value > 60)) | ||
| ) { | ||
| console.warn( | ||
| `Invalid ${prop} value: "${value}". Using default "${defaults[prop]}".` | ||
| ); | ||
| return defaults[prop]; | ||
| } | ||
| return value; | ||
| }; | ||
| // Validate numeric properties | ||
| const validateNumber = (prop, value) => { | ||
| if ( | ||
| typeof value !== "number" || | ||
| isNaN(value) || | ||
| (prop === "delay" && (value < 0 || value > 60)) | ||
| ) { | ||
| console.warn( | ||
| `Invalid ${prop} value: "${value}". Using default "${defaults[prop]}".` | ||
| ); | ||
| return defaults[prop]; | ||
| } | ||
| return value; | ||
| }; | ||
| validatedOptions.duration = validateNumber( | ||
| "duration", | ||
| validatedOptions.duration | ||
| ); | ||
| validatedOptions.delay = validateNumber("delay", validatedOptions.delay); | ||
| validatedOptions.iterationCount = validateNumber( | ||
| "iterationCount", | ||
| Math.max(1, validatedOptions.iterationCount) | ||
| ); // Ensure iterationCount is at least 1 | ||
| validatedOptions.duration = validateNumber( | ||
| "duration", | ||
| validatedOptions.duration | ||
| ); | ||
| validatedOptions.delay = validateNumber("delay", validatedOptions.delay); | ||
| validatedOptions.iterationCount = validateNumber( | ||
| "iterationCount", | ||
| Math.max(1, validatedOptions.iterationCount) | ||
| ); // Ensure iterationCount is at least 1 | ||
| // Validate string properties with allowed values | ||
| const validateString = (prop, value, allowedValues) => { | ||
| if (typeof value !== "string" || !allowedValues.includes(value.trim())) { | ||
| console.warn( | ||
| `Invalid ${prop}: "${value}". Using default "${defaults[prop]}".` | ||
| ); | ||
| return defaults[prop]; | ||
| } | ||
| return value.trim(); | ||
| }; | ||
| // Validate string properties with allowed values | ||
| const validateString = (prop, value, allowedValues) => { | ||
| if (typeof value !== "string" || !allowedValues.includes(value.trim())) { | ||
| console.warn( | ||
| `Invalid ${prop}: "${value}". Using default "${defaults[prop]}".` | ||
| ); | ||
| return defaults[prop]; | ||
| } | ||
| return value.trim(); | ||
| }; | ||
| validatedOptions.timingFunction = validateString( | ||
| "timingFunction", | ||
| validatedOptions.timingFunction, | ||
| ["linear", "ease", "ease-in", "ease-out", "ease-in-out"] | ||
| ); | ||
| validatedOptions.direction = validateString( | ||
| "direction", | ||
| validatedOptions.direction, | ||
| ["normal", "reverse", "alternate", "alternate-reverse"] | ||
| ); | ||
| validatedOptions.fillMode = validateString( | ||
| "fillMode", | ||
| validatedOptions.fillMode, | ||
| ["none", "forwards", "backwards", "both"] | ||
| ); | ||
| validatedOptions.playState = validateString( | ||
| "playState", | ||
| validatedOptions.playState, | ||
| ["running", "paused"] | ||
| ); | ||
| validatedOptions.timingFunction = validateString( | ||
| "timingFunction", | ||
| validatedOptions.timingFunction, | ||
| ["linear", "ease", "ease-in", "ease-out", "ease-in-out"] | ||
| ); | ||
| validatedOptions.direction = validateString( | ||
| "direction", | ||
| validatedOptions.direction, | ||
| ["normal", "reverse", "alternate", "alternate-reverse"] | ||
| ); | ||
| validatedOptions.fillMode = validateString( | ||
| "fillMode", | ||
| validatedOptions.fillMode, | ||
| ["none", "forwards", "backwards", "both"] | ||
| ); | ||
| validatedOptions.playState = validateString( | ||
| "playState", | ||
| validatedOptions.playState, | ||
| ["running", "paused"] | ||
| ); | ||
| // Build the animation string | ||
| const animation = `${name} ${validatedOptions.duration} ${validatedOptions.timingFunction} ${validatedOptions.delay}s ${validatedOptions.iterationCount} ${validatedOptions.direction} ${validatedOptions.fillMode} ${validatedOptions.playState}`; | ||
| // Build the animation string | ||
| const animation = `${name} ${validatedOptions.duration} ${validatedOptions.timingFunction} ${validatedOptions.delay}s ${validatedOptions.iterationCount} ${validatedOptions.direction} ${validatedOptions.fillMode} ${validatedOptions.playState}`; | ||
| return { animation }; | ||
| }, | ||
| return { animation }; | ||
| }, | ||
| }; | ||
| const hoverStyle = (...styles) => { | ||
| const { ref, isHovered } = useHover(); | ||
| const { ref, isHovered } = useHover(); | ||
| return { | ||
| hoverRef: ref, | ||
| hoverStyle: isHovered ? mergeStyles(...styles) : {}, | ||
| }; | ||
| return { | ||
| hoverRef: ref, | ||
| hoverStyle: isHovered ? mergeStyles(...styles) : {}, | ||
| }; | ||
| }; | ||
| const activeStyle = (...styles) => { | ||
| const { ref, isActive } = useActive(); | ||
| const { ref, isActive } = useActive(); | ||
| return { | ||
| activeRef: ref, | ||
| activeStyle: isActive ? mergeStyles(...styles) : {}, | ||
| }; | ||
| return { | ||
| activeRef: ref, | ||
| activeStyle: isActive ? mergeStyles(...styles) : {}, | ||
| }; | ||
| }; | ||
| const mergeStyles = (...styles) => | ||
| Object.assign({}, ...styles.map((style) => style)); | ||
| Object.assign({}, ...styles.map((style) => style)); | ||
| export { | ||
| ClearFix, | ||
| Container, | ||
| FlexContainer, | ||
| FlexItem, | ||
| DivV, | ||
| RespImg, | ||
| RespVideo, | ||
| RespGridFill, | ||
| RespGridFit, | ||
| UnstyledList, | ||
| NavUl, | ||
| RespHeading, | ||
| RespP, | ||
| Circle, | ||
| RespBackgImg, | ||
| useActive, | ||
| useHover, | ||
| useMediaQuery, | ||
| useMediaStyle, | ||
| mergeRefs, | ||
| styles, | ||
| hoverStyle, | ||
| activeStyle, | ||
| useMousePosition, | ||
| TypingAnimationElement, | ||
| ClippedText, | ||
| mergeStyles, | ||
| ClearFix, | ||
| Container, | ||
| FlexContainer, | ||
| FlexItem, | ||
| DivV, | ||
| RespImg, | ||
| RespVideo, | ||
| RespGridFill, | ||
| RespGridFit, | ||
| UnstyledList, | ||
| NavUl, | ||
| RespHeading, | ||
| RespP, | ||
| Circle, | ||
| RespBackgImg, | ||
| useActive, | ||
| useHover, | ||
| useMediaQuery, | ||
| useMediaStyle, | ||
| mergeRefs, | ||
| styles, | ||
| hoverStyle, | ||
| activeStyle, | ||
| useMousePosition, | ||
| TypingAnimationElement, | ||
| ClippedText, | ||
| mergeStyles, | ||
| }; |
+41
-41
| { | ||
| "name": "fhf-react", | ||
| "version": "1.8.9", | ||
| "description": "this react framework has React components and styles designed to facilitate the creation of responsive and flexible web layouts. Tailored for ease of use and versatility, the framework includes components for containers, flexible layouts, responsive images and videos, grid systems, navigation, and more. By incorporating predefined styles, the framework simplifies common layout tasks such as centering content, text alignment, floats, and flexbox arrangements. With a focus on responsiveness, the framework adapts to different screen sizes and provides a set of utility functions for managing visibility based on screen dimensions. Whether you're building a simple webpage or a complex web application, this framework aims to streamline the development process by offering a cohesive set of components and styles for creating modern and responsive user interfaces.", | ||
| "main": "index.jsx", | ||
| "type": "module", | ||
| "types": "index.d.ts", | ||
| "dependencies": { | ||
| "fhf": "^1.5.2", | ||
| "js-tokens": "^4.0.0", | ||
| "loose-envify": "^1.4.0", | ||
| "object-assign": "^4.1.1", | ||
| "react": "^18.2.0", | ||
| "react-is": "^16.13.1" | ||
| }, | ||
| "scripts": { | ||
| "res": "npm uninstall fhf | npm i fhf" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/80mahd08/fhf-react.git" | ||
| }, | ||
| "keywords": [ | ||
| "responsive", | ||
| "display", | ||
| "framework", | ||
| "react", | ||
| "web", | ||
| "layout", | ||
| "responsive", | ||
| "flexbox", | ||
| "grid", | ||
| "layout", | ||
| "js", | ||
| "css" | ||
| ], | ||
| "author": "Mahdi Amari", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/80mahd08/fhf-react/issues" | ||
| }, | ||
| "homepage": "https://github.com/80mahd08/fhf-react#readme" | ||
| "name": "fhf-react", | ||
| "version": "2.0.0", | ||
| "description": "this react framework has React components and styles designed to facilitate the creation of responsive and flexible web layouts. Tailored for ease of use and versatility, the framework includes components for containers, flexible layouts, responsive images and videos, grid systems, navigation, and more. By incorporating predefined styles, the framework simplifies common layout tasks such as centering content, text alignment, floats, and flexbox arrangements. With a focus on responsiveness, the framework adapts to different screen sizes and provides a set of utility functions for managing visibility based on screen dimensions. Whether you're building a simple webpage or a complex web application, this framework aims to streamline the development process by offering a cohesive set of components and styles for creating modern and responsive user interfaces.", | ||
| "main": "index.jsx", | ||
| "type": "module", | ||
| "types": "index.d.ts", | ||
| "dependencies": { | ||
| "fhf": "^2.0.2", | ||
| "js-tokens": "^4.0.0", | ||
| "loose-envify": "^1.4.0", | ||
| "object-assign": "^4.1.1", | ||
| "react": "^18.2.0", | ||
| "react-is": "^16.13.1" | ||
| }, | ||
| "scripts": { | ||
| "res": "npm uninstall fhf | npm i fhf" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/80mahd08/fhf-react.git" | ||
| }, | ||
| "keywords": [ | ||
| "responsive", | ||
| "display", | ||
| "framework", | ||
| "react", | ||
| "web", | ||
| "layout", | ||
| "responsive", | ||
| "flexbox", | ||
| "grid", | ||
| "layout", | ||
| "js", | ||
| "css" | ||
| ], | ||
| "author": "Mahdi Amari", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/80mahd08/fhf-react/issues" | ||
| }, | ||
| "homepage": "https://github.com/80mahd08/fhf-react#readme" | ||
| } |
+30
-31
@@ -1,6 +0,6 @@ | ||
| <h1 style="text-align:center">FHF-REACT</h1> | ||
| <h1 align="center">FHF-REACT</h1> | ||
| <p align="center"> | ||
| <img width="300" src="https://raw.githubusercontent.com/80mahd08/fhf-react/main/logo.png" /> | ||
| </p> | ||
| <div align="center"> | ||
| <img width="300" src="./logo.png" /> | ||
| </div> | ||
@@ -51,3 +51,3 @@ ## Introduction | ||
| <DivV visibleIn="md" hiddenIn="lg"> | ||
| {/* Your content goes here */} | ||
| {/* Your content goes here */} | ||
| </DivV> | ||
@@ -78,3 +78,3 @@ ``` | ||
| <RespGridFill size={100} gap={20}> | ||
| {/* Grid items go here */} | ||
| {/* Grid items go here */} | ||
| </RespGridFill> | ||
@@ -89,3 +89,3 @@ ``` | ||
| <RespGridFit size={100} gap={20}> | ||
| {/* Grid items go here */} | ||
| {/* Grid items go here */} | ||
| </RespGridFit> | ||
@@ -132,3 +132,3 @@ ``` | ||
| <RespBackgImg element="div" url="path/*"> | ||
| {/* Your content goes here */} | ||
| {/* Your content goes here */} | ||
| </RespBackgImg> | ||
@@ -143,29 +143,28 @@ ``` | ||
| import { | ||
| styles, | ||
| mergeStyles, | ||
| styleHover, | ||
| styleActive, | ||
| mergeRefs, | ||
| styles, | ||
| mergeStyles, | ||
| styleHover, | ||
| styleActive, | ||
| mergeRefs, | ||
| } from "fhf-react"; | ||
| const Comp = () => { | ||
| const { refLightHover, styleLightHover } = styles.bgLightHover(); | ||
| const { refOfActive, styleOfActive } = styleActive( | ||
| styles.extremeRounded, | ||
| styles.bg("green") | ||
| ); | ||
| const { refLightHover, styleLightHover } = styles.bgLightHover(); | ||
| const { refOfActive, styleOfActive } = styleActive( | ||
| styles.extremeRounded, | ||
| styles.bg("green") | ||
| ); | ||
| return ( | ||
| <div | ||
| ref={mergeRefs(refLightHover, refOfActive)} | ||
| style={mergeStyles( | ||
| styles.centerPosition, | ||
| styles.fitContentHW, | ||
| styleLightHover, | ||
| styleOfActive | ||
| )} | ||
| > | ||
| {/* Your centered content goes here */} | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div | ||
| ref={mergeRefs(refLightHover, refOfActive)} | ||
| style={mergeStyles( | ||
| styles.centerPosition, | ||
| styles.fitContentHW, | ||
| styleLightHover, | ||
| styleOfActive | ||
| )}> | ||
| {/* Your centered content goes here */} | ||
| </div> | ||
| ); | ||
| }; | ||
@@ -172,0 +171,0 @@ |
+13
-11
@@ -0,18 +1,20 @@ | ||
| ::root { | ||
| --typing-color: black; | ||
| } | ||
| .typing::after { | ||
| content: "|"; | ||
| animation: blink 1.2s infinite; | ||
| color: var(--typing-color); /* Use a CSS variable to set the color */ | ||
| font-size: inherit; | ||
| content: "|"; | ||
| animation: blink 1.2s infinite; | ||
| color: var(--typing-color); | ||
| } | ||
| @keyframes blink { | ||
| 50% { | ||
| opacity: 0; | ||
| } | ||
| 50% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| .clipped-text { | ||
| background-size: cover; | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| color: transparent; | ||
| background-size: cover; | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| color: transparent; | ||
| } |
@@ -0,0 +0,0 @@ class GridSystemOop { |
Sorry, the diff of this file is too big to display
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Lines of code
3433
0.03%Worsened metrics
- Total package byte prevSize
233676
-2.28%- Number of lines in readme file
173
-0.57%Dependency changes
+ Added
fhf@2.1.1(transitive)- Removed
fhf@1.6.1(transitive)Updated
fhf@^2.0.2