@sohanemon/utils 4.0.10 → 4.0.11

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
-export { Icon as Iconify } from '@iconify/react';
-export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
+export { Icon as Iconify } from "@iconify/react";
+export { MediaWrapper } from "./media-wrapper";
+export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from "./responsive-indicator";

package/dist/components/index.js

@@ -1,3 +1,4 @@
-'use client';
-export { Icon as Iconify } from '@iconify/react';
-export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
+"use client";
+export { Icon as Iconify } from "@iconify/react";
+export { MediaWrapper } from "./media-wrapper";
+export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from "./responsive-indicator";

package/dist/components/media-wrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type BreakPoints = "sm" | "md" | "lg" | "xl" | "2xl" | "max-sm" | "max-md" | "max-lg" | "max-xl" | "max-2xl";
+type MediaWrapperProps = React.ComponentProps<"div"> & {
+    breakpoint: BreakPoints;
+};
+export declare function MediaWrapper({ breakpoint, ...props }: MediaWrapperProps): any;
+export {};

package/dist/components/media-wrapper.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useMediaQuery } from "../hooks";
+export function MediaWrapper({ breakpoint, ...props }) {
+    const overMedia = useMediaQuery(breakpoint.split("-").pop());
+    const isMax = breakpoint.startsWith("max");
+    const Wrapper = overMedia === isMax ? React.Fragment : "div";
+    return _jsx(Wrapper, { ...props });
+}

package/dist/components/responsive-indicator.d.ts

@@ -1,2 +1,2 @@
-import * as React from 'react';
+import * as React from "react";
 export declare const ResponsiveIndicator: React.FC;

package/dist/components/responsive-indicator.js

@@ -1,6 +1,6 @@
-'use client';
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+import * as React from "react";
 export const ResponsiveIndicator = () => {
     const [viewportWidth, setViewportWidth] = React.useState(window.innerWidth);
     const [position, setPosition] = React.useState(0); // State to manage button position
@@ -8,60 +8,60 @@ export const ResponsiveIndicator = () => {
         const handleResize = () => {
             setViewportWidth(window.innerWidth);
         };
-        window.addEventListener('resize', handleResize);
+        window.addEventListener("resize", handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener("resize", handleResize);
         };
     }, []);
     // Function to handle button click
     const handleClick = () => {
         setPosition((prevPosition) => (prevPosition + 1) % 4); // Cycle through positions
     };
-    let text = '';
+    let text = "";
     if (viewportWidth < 640) {
-        text = 'xs';
+        text = "xs";
     }
     else if (viewportWidth >= 640 && viewportWidth < 768) {
-        text = 'sm';
+        text = "sm";
     }
     else if (viewportWidth >= 768 && viewportWidth < 1024) {
-        text = 'md';
+        text = "md";
     }
     else if (viewportWidth >= 1024 && viewportWidth < 1280) {
-        text = 'lg';
+        text = "lg";
     }
     else if (viewportWidth >= 1280 && viewportWidth < 1536) {
-        text = 'xl';
+        text = "xl";
     }
     else {
-        text = '2xl';
+        text = "2xl";
     }
     // Define positions
     const positions = [
-        { bottom: '2rem', left: '2rem' },
-        { bottom: '2rem', right: '2rem' },
-        { top: '2rem', right: '2rem' },
-        { top: '2rem', left: '2rem' }, // Top left
+        { bottom: "2rem", left: "2rem" }, // Bottom left
+        { bottom: "2rem", right: "2rem" }, // Bottom right
+        { top: "2rem", right: "2rem" }, // Top right
+        { top: "2rem", left: "2rem" }, // Top left
     ];
     const buttonStyle = {
-        position: 'fixed',
+        position: "fixed",
         zIndex: 50,
-        display: 'grid',
-        height: '2.5rem',
-        width: '2.5rem',
-        borderRadius: '50%',
-        placeContent: 'center',
-        backgroundColor: '#2d3748',
-        fontFamily: 'Courier New, Courier, monospace',
-        fontSize: '1rem',
-        color: '#ffffff',
-        border: '2px solid #4a5568',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-        padding: '0.5rem',
-        transition: 'all 0.2s ease-in-out',
+        display: "grid",
+        height: "2.5rem",
+        width: "2.5rem",
+        borderRadius: "50%",
+        placeContent: "center",
+        backgroundColor: "#2d3748",
+        fontFamily: "Courier New, Courier, monospace",
+        fontSize: "1rem",
+        color: "#ffffff",
+        border: "2px solid #4a5568",
+        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        padding: "0.5rem",
+        transition: "all 0.2s ease-in-out",
         ...positions[position], // Apply the current position
     };
-    if (process.env.NODE_ENV === 'production')
+    if (process.env.NODE_ENV === "production")
         return null;
-    return (_jsx("button", { style: buttonStyle, onClick: handleClick, children: text }));
+    return (_jsx("button", { type: "button", style: buttonStyle, onClick: handleClick, children: text }));
 };

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
-import { Dispatch, EffectCallback, SetStateAction } from 'react';
+import { type Dispatch, type EffectCallback, type SetStateAction } from "react";
 export declare const useClickOutside: (callback?: () => void) => any;
-export declare function useMediaQuery(tailwindBreakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | `(${string})`): any;
+export declare function useMediaQuery(tailwindBreakpoint: "sm" | "md" | "lg" | "xl" | "2xl" | `(${string})`): any;
 export declare function useEffectOnce(effect: EffectCallback): void;
 export declare function useUpdateEffect(effect: EffectCallback, deps: any[]): void;
 export declare function useDebounce<T>(state: T, delay?: number): T;

package/dist/hooks/index.js

@@ -1,6 +1,6 @@
-'use client';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-export const useClickOutside = (callback = () => alert('clicked outside')) => {
+"use client";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+export const useClickOutside = (callback = () => alert("clicked outside")) => {
     const ref = useRef(null);
     const listener = (e) => {
         if (ref.current && !ref.current.contains(e.target)) {
@@ -8,11 +8,11 @@ export const useClickOutside = (callback = () => alert('clicked outside')) => {
         }
     };
     useEffect(() => {
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
         return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
         };
     });
     return ref;
@@ -20,22 +20,22 @@ export const useClickOutside = (callback = () => alert('clicked outside')) => {
 export function useMediaQuery(tailwindBreakpoint) {
     const parsedQuery = useMemo(() => {
         switch (tailwindBreakpoint) {
-            case 'sm':
-                return '(min-width: 640px)';
-            case 'md':
-                return '(min-width: 768px)';
-            case 'lg':
-                return '(min-width: 1024px)';
-            case 'xl':
-                return '(min-width: 1280px)';
-            case '2xl':
-                return '(min-width: 1536px)';
+            case "sm":
+                return "(min-width: 640px)";
+            case "md":
+                return "(min-width: 768px)";
+            case "lg":
+                return "(min-width: 1024px)";
+            case "xl":
+                return "(min-width: 1280px)";
+            case "2xl":
+                return "(min-width: 1536px)";
             default:
                 return tailwindBreakpoint;
         }
     }, [tailwindBreakpoint]);
     const getMatches = (parsedQuery) => {
-        if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
             return window.matchMedia(parsedQuery).matches;
         }
         return false;
@@ -47,9 +47,9 @@ export function useMediaQuery(tailwindBreakpoint) {
     useEffect(() => {
         const matchMedia = window.matchMedia(parsedQuery);
         handleChange();
-        matchMedia.addEventListener('change', handleChange);
+        matchMedia.addEventListener("change", handleChange);
         return () => {
-            matchMedia.removeEventListener('change', handleChange);
+            matchMedia.removeEventListener("change", handleChange);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [parsedQuery]);
@@ -81,7 +81,7 @@ export function useDebounce(state, delay = 500) {
     }, [state, delay]);
     return debouncedState;
 }
-export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export const useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 export function useTimeout(callback, delay = 1000) {
     const savedCallback = useRef(callback);
     useIsomorphicEffect(() => {
@@ -114,7 +114,7 @@ export const useLocalStorage = (key, defaultValue) => {
     // Function to update the stored value in local storage and state
     const updateStoredValue = (valueOrFn) => {
         let newValue;
-        if (typeof valueOrFn === 'function') {
+        if (typeof valueOrFn === "function") {
             const updateFunction = valueOrFn;
             newValue = updateFunction(storedValue);
         }
@@ -141,7 +141,7 @@ export const useUrlParams = (key, defaultValue) => {
     const updateValue = (newValue) => {
         const params = new URLSearchParams(window.location.search);
         params.set(key, String(newValue));
-        window.history.pushState({}, '', `${window.location.pathname}?${params}`);
+        window.history.pushState({}, "", `${window.location.pathname}?${params}`);
         setValue(newValue);
     };
     return [value, updateValue];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "description": "",
   "source": "./src/index.ts",
   "main": "./dist/index.js",