@sohanemon/utils 4.0.5 → 4.0.7

package/dist/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Icon as Iconify } from '@iconify/react';
-export declare function TailwindIndicator(): any;
+import * as React from 'react';
+export declare const ResponsiveIndicator: React.FC;

package/dist/components/index.js

@@ -1,8 +1,67 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export { Icon as Iconify } from '@iconify/react';
-export function TailwindIndicator() {
+import { jsx as _jsx } from "react/jsx-runtime";
+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
+    React.useEffect(() => {
+        const handleResize = () => {
+            setViewportWidth(window.innerWidth);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    // Function to handle button click
+    const handleClick = () => {
+        setPosition((prevPosition) => (prevPosition + 1) % 4); // Cycle through positions
+    };
+    let text = '';
+    if (viewportWidth < 640) {
+        text = 'xs';
+    }
+    else if (viewportWidth >= 640 && viewportWidth < 768) {
+        text = 'sm';
+    }
+    else if (viewportWidth >= 768 && viewportWidth < 1024) {
+        text = 'md';
+    }
+    else if (viewportWidth >= 1024 && viewportWidth < 1280) {
+        text = 'lg';
+    }
+    else if (viewportWidth >= 1280 && viewportWidth < 1536) {
+        text = 'xl';
+    }
+    else {
+        text = '2xl';
+    }
+    // Define positions
+    const positions = [
+        { bottom: '2rem', left: '2rem' },
+        { bottom: '2rem', right: '2rem' },
+        { top: '2rem', right: '2rem' },
+        { top: '2rem', left: '2rem' }, // Top left
+    ];
+    const buttonStyle = {
+        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',
+        ...positions[position], // Apply the current position
+    };
     if (process.env.NODE_ENV === 'production')
         return null;
-    return (_jsxs("div", { className: 'fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white', children: [_jsx("div", { className: 'block sm:hidden', children: "xs" }), _jsx("div", { className: 'hidden sm:block md:hidden', children: "sm" }), _jsx("div", { className: 'hidden md:block lg:hidden', children: "md" }), _jsx("div", { className: 'hidden lg:block xl:hidden', children: "lg" }), _jsx("div", { className: 'hidden xl:block 2xl:hidden', children: "xl" }), _jsx("div", { className: 'hidden 2xl:block', children: "2xl" })] }));
-}
+    return (_jsx("button", { style: buttonStyle, onClick: handleClick, children: text }));
+};

package/dist/hooks/index.d.ts

@@ -9,4 +9,5 @@ export declare function useTimeout(callback: () => void, delay?: number | null):
 export declare function useWindowEvent<K extends string = keyof WindowEventMap>(type: K, listener: K extends keyof WindowEventMap ? (this: Window, ev: WindowEventMap[K]) => void : (this: Window, ev: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;
 type LocalStorageValue<T> = [T, Dispatch<SetStateAction<T>>];
 export declare const useLocalStorage: <T extends Record<string, any>>(key: string, defaultValue: T) => LocalStorageValue<T>;
+export declare const useUrlParams: <T extends string | number | boolean>(key: string, defaultValue: T) => [T, (value: T) => void];
 export {};

package/dist/hooks/index.js

@@ -126,3 +126,23 @@ export const useLocalStorage = (key, defaultValue) => {
     };
     return [storedValue, updateStoredValue];
 };
+// Custom hook for using URL parameters with a specified key and default value
+export const useUrlParams = (key, defaultValue) => {
+    const [value, setValue] = useState(defaultValue);
+    // Use effect to retrieve the value from URL parameters on component mount
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        const value = params.get(key);
+        if (value !== null) {
+            setValue(value);
+        }
+    }, [key]);
+    // Function to update the value in URL parameters and state
+    const updateValue = (newValue) => {
+        const params = new URLSearchParams(window.location.search);
+        params.set(key, String(newValue));
+        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.5",
+  "version": "4.0.7",
   "description": "",
   "source": "./src/index.ts",
   "main": "./dist/index.js",