@sohanemon/utils 4.0.14 → 4.0.15

package/dist/components/index.d.ts

@@ -1,3 +1,3 @@
-export { Icon as Iconify } from '@iconify/react';
-export { MediaWrapper } from './media-wrapper';
-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,4 +1,4 @@
-'use client';
-export { Icon as Iconify } from '@iconify/react';
-export { MediaWrapper } from './media-wrapper';
-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

@@ -1,10 +1,8 @@
-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'> & {
+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;
     as?: React.ElementType;
-    fallback?: React.ElementType;
-    classNameFallback?: string;
 };
-export declare function MediaWrapper({ breakpoint, as, fallback, classNameFallback, className: classNameOriginal, ...props }: MediaWrapperProps): any;
+export declare function MediaWrapper({ breakpoint, as, ...props }: MediaWrapperProps): any;
 export {};

package/dist/components/media-wrapper.js

@@ -1,14 +1,10 @@
-'use client';
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useMediaQuery } from '../hooks';
-export function MediaWrapper({ breakpoint, as = 'div', fallback = React.Fragment, classNameFallback, className: classNameOriginal, ...props }) {
-    const overMedia = useMediaQuery(breakpoint.split('-').pop());
-    const isMax = breakpoint.startsWith('max');
-    const useFallback = overMedia === isMax;
-    // Conditionally determining which component to render,
-    // and what className should be passed to it.
-    const Wrapper = useFallback ? fallback : as;
-    const className = useFallback ? classNameFallback : classNameOriginal;
-    return _jsx(Wrapper, { className: className, ...props });
+import * as React from "react";
+import { useMediaQuery } from "../hooks";
+export function MediaWrapper({ breakpoint, as = "div", ...props }) {
+    const overMedia = useMediaQuery(breakpoint.split("-").pop());
+    const isMax = breakpoint.startsWith("max");
+    const Wrapper = overMedia === isMax ? React.Fragment : as;
+    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", { type: "button", style: buttonStyle, onClick: handleClick, children: text }));
 };

package/dist/functions/index.d.ts

@@ -1,6 +1,4 @@
 import { type ClassValue } from 'clsx';
-import type * as React from 'react';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function isNavActive(href: string, path: string): boolean;
 export declare function cleanSrc(src: string): string;
-export declare const scrollTo: (containerSelector: string | React.RefObject<HTMLDivElement>, to: 'top' | 'bottom') => void;

package/dist/functions/index.js

@@ -12,21 +12,3 @@ export function cleanSrc(src) {
         return src.replace('/public/', '/');
     return src;
 }
-export const scrollTo = (containerSelector, to) => {
-    let container;
-    if (typeof containerSelector === 'string') {
-        container = document.querySelector(containerSelector);
-    }
-    else if (containerSelector.current) {
-        container = containerSelector.current;
-    }
-    else {
-        return;
-    }
-    if (container) {
-        container.scrollTo({
-            top: to === 'top' ? 0 : container.scrollHeight - container.clientHeight,
-            behavior: 'smooth',
-        });
-    }
-};

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
-import { type Dispatch, type EffectCallback, type 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,7 +1,8 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.0.14",
+  "version": "4.0.15",
   "description": "",
+  "type": "module",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,17 +14,22 @@
   },
   "typesVersions": {
     "*": {
-      "hooks": ["dist/hooks/index.d.ts"],
-      "components": ["dist/components/index.d.ts"]
+      "hooks": [
+        "dist/hooks/index.d.ts"
+      ],
+      "components": [
+        "dist/components/index.d.ts"
+      ]
     }
   },
-  "files": ["dist", "README.md"],
-  "scripts": {
-    "build": "tsc",
-    "build:watch": "tsc --watch",
-    "export": "tsc && npm publish"
-  },
-  "keywords": ["utils", "cn"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "utils",
+    "cn"
+  ],
   "author": "sohanemon",
   "license": "ISC",
   "devDependencies": {
@@ -34,5 +40,10 @@
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "tailwind-merge": "^1.14.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "export": "tsc && npm publish"
   }
-}
+}