@sohanemon/utils 6.2.8 → 6.3.0

package/package.json

@@ -1,52 +1,48 @@
 {
   "name": "@sohanemon/utils",
-  "version": "6.2.8",
+  "version": "6.3.0",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "source": "./src/index.ts",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.cts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
-    "./core": "./dist/index.js",
-    "./functions": "./dist/functions/index.js",
-    "./hooks": "./dist/hooks/index.js",
-    "./components": "./dist/components/index.js",
-    "./types": "./dist/types/index.js"
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
-      "core": [
-        "dist/index.d.ts"
-      ],
-      "functions": [
-        "dist/functions/index.d.ts"
-      ],
-      "types": [
-        "dist/types/index.d.ts"
-      ],
       "hooks": [
-        "dist/hooks/index.d.ts"
+        "dist/hooks.d.ts"
       ],
       "components": [
-        "dist/components/index.d.ts"
+        "dist/components.d.ts"
       ]
     }
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
   "scripts": {
-    "dev": "tsc --watch",
-    "build": "tsc",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "test": "vitest",
     "test:run": "vitest run",
     "test:list": "vitest list",
     "test:log": "vitest run --reporter verbose",
     "test:ui": "vitest --ui",
-    "prepublish": "tsc",
+    "check": "biome check .",
+    "fix": "biome check --diagnostic-level=error --write .",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write --unsafe .",
+    "format": "biome format .",
+    "format:write": "biome format . --write",
+    "typecheck": "tsgo --noEmit",
     "release": "tsgo --noEmit && npm run build && npm publish"
   },
   "keywords": [
@@ -54,19 +50,40 @@
     "cn"
   ],
   "license": "ISC",
-  "homepage": "https://github.com/sohanemon/utils",
-  "website": "https://sohanjs.web.app/utils",
+  "homepage": "https://sohanjs.web.app/utils",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sohanemon/utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sohanemon/utils/issues"
+  },
   "devDependencies": {
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.2",
+    "@biomejs/biome": "2.3.8",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@tsconfig/strictest": "^2.0.8",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
     "@vitest/ui": "^4.0.14",
+    "tsdown": "^0.16.4",
     "typescript": "^5.9.3",
+    "vite": "npm:rolldown-vite@^7.2.5",
     "vitest": "^4.0.14"
   },
   "dependencies": {
     "@iconify/react": "^6.0.2",
     "clsx": "^2.1.1",
-    "react": "^19.2.0",
+    "jsdom": "^27.2.0",
     "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/dist/components/html-injector.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-/**
- * Props for the HtmlInjector component
- */
-type HtmlInjectorProps = Omit<React.ComponentProps<'div'>, 'dangerouslySetInnerHTML'> & {
-    /** The HTML content to inject and render */
-    html: string;
-    /**
-     * Whether to sanitize the HTML content by removing potentially dangerous elements and attributes
-     * @default false
-     */
-    sanitize?: boolean;
-    /**
-     * Whether to execute script tags found in the HTML content
-     * @default true
-     */
-    executeScripts?: boolean;
-};
-/**
- * A robust component for safely injecting and rendering HTML content with optional script execution.
- *
- * This component provides a safe way to render dynamic HTML content with the following features:
- * - Optional HTML sanitization to remove dangerous elements and attributes
- * - Controlled script execution with proper cleanup
- * - Memory leak prevention by tracking and removing injected scripts
- * - Error handling for malformed HTML and script execution failures
- *
- * @example
- * ```tsx
- * // Basic HTML injection
- * <HtmlInjector html="<p>Hello <strong>World</strong></p>" />
- *
- * // With sanitization enabled
- * <HtmlInjector
- *   html="<p>Safe content</p><script>alert('removed')</script>"
- *   sanitize={true}
- * />
- *
- * // Disable script execution
- * <HtmlInjector
- *   html="<p>Content</p><script>console.log('not executed')</script>"
- *   executeScripts={false}
- * />
- * ```
- *
- * @param props - The component props
- * @returns A div element containing the injected HTML content, or null if no HTML is provided
- */
-export declare function HtmlInjector({ className, html, sanitize, executeScripts, ...props }: HtmlInjectorProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/html-injector.js

@@ -1,108 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { cn } from '../functions';
-/**
- * A robust component for safely injecting and rendering HTML content with optional script execution.
- *
- * This component provides a safe way to render dynamic HTML content with the following features:
- * - Optional HTML sanitization to remove dangerous elements and attributes
- * - Controlled script execution with proper cleanup
- * - Memory leak prevention by tracking and removing injected scripts
- * - Error handling for malformed HTML and script execution failures
- *
- * @example
- * ```tsx
- * // Basic HTML injection
- * <HtmlInjector html="<p>Hello <strong>World</strong></p>" />
- *
- * // With sanitization enabled
- * <HtmlInjector
- *   html="<p>Safe content</p><script>alert('removed')</script>"
- *   sanitize={true}
- * />
- *
- * // Disable script execution
- * <HtmlInjector
- *   html="<p>Content</p><script>console.log('not executed')</script>"
- *   executeScripts={false}
- * />
- * ```
- *
- * @param props - The component props
- * @returns A div element containing the injected HTML content, or null if no HTML is provided
- */
-export function HtmlInjector({ className, html, sanitize = false, executeScripts = true, ...props }) {
-    const injectedScriptsRef = React.useRef([]);
-    const containerRef = React.useRef(null);
-    React.useEffect(() => {
-        // NOTE: Cleanup previously injected scripts
-        injectedScriptsRef.current.forEach((script) => {
-            if (script.parentNode) {
-                script.parentNode.removeChild(script);
-            }
-        });
-        injectedScriptsRef.current = [];
-        if (!executeScripts || !html)
-            return;
-        try {
-            const tempContainer = document.createElement('div');
-            tempContainer.innerHTML = html;
-            const scripts = tempContainer.querySelectorAll('script');
-            scripts.forEach((oldScript) => {
-                const newScript = document.createElement('script');
-                // HACK: Copy text content
-                if (oldScript.textContent) {
-                    newScript.textContent = oldScript.textContent;
-                }
-                // HACK: Copy all attributes (src, type, async, defer, etc.)
-                Array.from(oldScript.attributes).forEach((attr) => {
-                    newScript.setAttribute(attr.name, attr.value);
-                });
-                newScript.onerror = (error) => {
-                    console.error('Script injection error:', error);
-                };
-                document.body.appendChild(newScript);
-                injectedScriptsRef.current.push(newScript);
-            });
-        }
-        catch (error) {
-            console.error('HTML injection error:', error);
-        }
-    }, [html, executeScripts]);
-    React.useEffect(() => {
-        return () => {
-            injectedScriptsRef.current.forEach((script) => {
-                if (script.parentNode) {
-                    script.parentNode.removeChild(script);
-                }
-            });
-        };
-    }, []);
-    const processedHtml = React.useMemo(() => {
-        if (!html)
-            return '';
-        if (sanitize) {
-            // Basic sanitization - remove potentially dangerous elements
-            const container = document.createElement('div');
-            container.innerHTML = html;
-            // Remove script tags if sanitize is enabled
-            container.querySelectorAll('script').forEach((script) => script.remove());
-            // Remove potentially dangerous attributes
-            const dangerousAttrs = ['onclick', 'onload', 'onerror', 'onmouseover'];
-            container.querySelectorAll('*').forEach((el) => {
-                dangerousAttrs.forEach((attr) => {
-                    if (el.hasAttribute(attr)) {
-                        el.removeAttribute(attr);
-                    }
-                });
-            });
-            return container.innerHTML;
-        }
-        return html;
-    }, [html, sanitize]);
-    if (!html) {
-        return null;
-    }
-    return (_jsx("div", { ref: containerRef, className: cn(className), dangerouslySetInnerHTML: { __html: processedHtml }, ...props }));
-}

package/dist/components/index.d.ts

@@ -1,5 +0,0 @@
-export { Icon as Iconify } from '@iconify/react';
-export { HtmlInjector } from './html-injector';
-export { MediaWrapper } from './media-wrapper';
-export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
-export { ScrollableMarker } from './scrollable-marker';

package/dist/components/index.js

@@ -1,7 +0,0 @@
-'use client';
-//NOTE: It's currently unsupported to use "export *" in a client boundary
-export { Icon as Iconify } from '@iconify/react';
-export { HtmlInjector } from './html-injector';
-export { MediaWrapper } from './media-wrapper';
-export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
-export { ScrollableMarker } from './scrollable-marker';

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

@@ -1,10 +0,0 @@
-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): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/media-wrapper.js

@@ -1,14 +0,0 @@
-'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 });
-}

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

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

package/dist/components/responsive-indicator.js

@@ -1,68 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { isSSR } from '../functions';
-export const ResponsiveIndicator = () => {
-    const [viewportWidth, setViewportWidth] = React.useState(isSSR ? 0 : 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 left
-        { bottom: '2rem', right: '2rem' }, // Bottom right
-        { top: '2rem', right: '2rem' }, // Top right
-        { 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 (_jsx("button", { type: "button", style: buttonStyle, onClick: handleClick, children: text }));
-};

package/dist/components/scrollable-marker.d.ts

@@ -1 +0,0 @@
-export declare function ScrollableMarker(): any;

package/dist/components/scrollable-marker.js

@@ -1,56 +0,0 @@
-'use client';
-import { useScheduledEffect } from '../hooks/schedule';
-export function ScrollableMarker() {
-    useScheduledEffect(() => {
-        const root = document.body;
-        if (!root)
-            return;
-        const isScrollable = (el) => {
-            const style = getComputedStyle(el);
-            if (style.overflow === 'hidden' &&
-                style.overflowY === 'hidden' &&
-                style.overflowX === 'hidden')
-                return false;
-            const canScrollY = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
-                el.scrollHeight > el.clientHeight;
-            const canScrollX = (style.overflowX === 'auto' || style.overflowX === 'scroll') &&
-                el.scrollWidth > el.clientWidth;
-            return canScrollY || canScrollX;
-        };
-        const markScrollable = (el) => {
-            if (isScrollable(el))
-                el.dataset.scrollable = 'true';
-            else
-                delete el.dataset.scrollable;
-        };
-        const scanTree = (node) => {
-            markScrollable(node);
-            for (let i = 0; i < node.children.length; i++) {
-                const child = node.children[i];
-                scanTree(child);
-            }
-        };
-        requestIdleCallback(() => scanTree(root));
-        const observer = new MutationObserver((mutations) => {
-            for (const m of mutations) {
-                if (m.type === 'childList') {
-                    m.addedNodes.forEach((n) => {
-                        if (n instanceof HTMLElement)
-                            scanTree(n);
-                    });
-                }
-                else if (m.type === 'attributes' && m.target instanceof HTMLElement) {
-                    markScrollable(m.target);
-                }
-            }
-        });
-        observer.observe(root, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeFilter: ['style', 'class'],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return null;
-}

package/dist/functions/cookie.d.ts

@@ -1,6 +0,0 @@
-export declare const setClientSideCookie: (name: string, value: string, days?: number, path?: string) => void;
-export declare const deleteClientSideCookie: (name: string, path?: string) => void;
-export declare const hasClientSideCookie: (name: string) => boolean;
-export declare const getClientSideCookie: (name: string) => {
-    value: string;
-};

package/dist/functions/cookie.js

@@ -1,22 +0,0 @@
-export const setClientSideCookie = (name, value, days, path = '/') => {
-    let expires = '';
-    if (days) {
-        const date = new Date();
-        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-        expires = `; expires=${date.toUTCString()}`;
-    }
-    document.cookie = `${name}=${value || ''}${expires}; path=${path}`;
-};
-export const deleteClientSideCookie = (name, path = '/') => {
-    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
-};
-export const hasClientSideCookie = (name) => {
-    return document.cookie.split('; ').some((row) => row.startsWith(`${name}=`));
-};
-export const getClientSideCookie = (name) => {
-    const cookieValue = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith(`${name}=`))
-        ?.split('=')[1];
-    return { value: cookieValue };
-};

package/dist/functions/deepmerge.d.ts

@@ -1,59 +0,0 @@
-type TAllKeys<T> = T extends any ? keyof T : never;
-type TIndexValue<T, K extends PropertyKey, D = never> = T extends any ? K extends keyof T ? T[K] : D : never;
-type TPartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>> extends infer O ? {
-    [P in keyof O]: O[P];
-} : never;
-type TFunction = (...a: any[]) => any;
-type TPrimitives = string | number | boolean | bigint | symbol | Date | TFunction;
-type TMerged<T> = [T] extends [Array<any>] ? {
-    [K in keyof T]: TMerged<T[K]>;
-} : [T] extends [TPrimitives] ? T : [T] extends [object] ? TPartialKeys<{
-    [K in TAllKeys<T>]: TMerged<TIndexValue<T, K>>;
-}, never> : T;
-/**
- * Deeply merges multiple objects, with later sources taking precedence.
- * Handles nested objects, arrays, and special object types with circular reference detection.
- *
- * Features:
- * - Deep merging of nested objects
- * - Configurable array merging strategies
- * - Circular reference detection and handling
- * - Support for symbols and special objects (Date, RegExp, etc.)
- * - Type-safe with improved generics
- * - Optional cloning to avoid mutation
- * - Custom merge functions for specific keys
- *
- * @template T - The target object type
- * @param target - The target object to merge into
- * @param sources - Source objects to merge from (can have additional properties)
- * @param options - Configuration options
- * @param options.arrayMerge - How to merge arrays: 'replace' (default), 'concat', or 'merge'
- * @param options.clone - Whether to clone the target (default: true)
- * @param options.customMerge - Custom merge function for specific keys
- * @param options.maxDepth - Maximum recursion depth (default: 100)
- * @returns The merged object with proper typing
- *
- * @example
- * // Basic merge
- * deepmerge({ a: 1 }, { b: 2 }) // { a: 1, b: 2 }
- *
- * @example
- * // Nested merge
- * deepmerge({ a: { x: 1 } }, { a: { y: 2 } }) // { a: { x: 1, y: 2 } }
- *
- * @example
- * // Array concat
- * deepmerge({ arr: [1] }, { arr: [2] }, { arrayMerge: 'concat' }) // { arr: [1, 2] }
- *
- * @example
- * // Sources with extra properties
- * deepmerge({ a: 1 }, { b: 2, c: 3 }) // { a: 1, b: 2, c: 3 }
- */
-export declare function deepmerge<T extends Record<string, any>, S extends Record<string, any>[]>(target: T, ...sources: S): TMerged<T | S[number]>;
-export declare function deepmerge<T extends Record<string, any>, S extends Record<string, any>[]>(target: T, sources: S, options?: {
-    arrayMerge?: 'replace' | 'concat' | 'merge' | ((target: any[], source: any[]) => any[]);
-    clone?: boolean;
-    customMerge?: (key: string | symbol, targetValue: any, sourceValue: any) => any;
-    maxDepth?: number;
-}): TMerged<T | S[number]>;
-export {};

package/dist/functions/deepmerge.js

@@ -1,116 +0,0 @@
-import { isPlainObject } from '../types';
-export function deepmerge(target, ...args) {
-    let sources;
-    let options = {};
-    // Check if last arg is options object
-    const lastArg = args[args.length - 1];
-    if (lastArg &&
-        typeof lastArg === 'object' &&
-        !Array.isArray(lastArg) &&
-        (lastArg.arrayMerge !== undefined ||
-            lastArg.clone !== undefined ||
-            lastArg.customMerge !== undefined ||
-            lastArg.maxDepth !== undefined)) {
-        options = { ...options, ...lastArg };
-        sources = args.slice(0, -1);
-    }
-    else {
-        sources = args;
-    }
-    const { arrayMerge = 'replace', clone = true, customMerge, maxDepth = 100, } = options;
-    const visited = new WeakMap();
-    return mergeObjects(target, sources, 0);
-    function mergeObjects(target, sources, depth) {
-        if (depth >= maxDepth) {
-            console.warn(`[deepmerge] Maximum depth ${maxDepth} exceeded. Returning target as-is.`);
-            return target;
-        }
-        if (!isPlainObject(target) && !Array.isArray(target)) {
-            // For primitives or special objects, return the last source or target
-            for (const source of sources) {
-                if (source !== undefined)
-                    return source;
-            }
-            return target;
-        }
-        let result = clone
-            ? Array.isArray(target)
-                ? [...target]
-                : { ...target }
-            : target;
-        for (const source of sources) {
-            if (source == null)
-                continue;
-            if (visited.has(source)) {
-                // Circular reference, skip
-                continue;
-            }
-            visited.set(source, result);
-            if (Array.isArray(result) && Array.isArray(source)) {
-                result = mergeArrays(result, source, arrayMerge);
-            }
-            else if (isPlainObject(result) && isPlainObject(source)) {
-                const keys = new Set([
-                    ...Object.keys(result),
-                    ...Object.keys(source),
-                    ...Object.getOwnPropertySymbols(result),
-                    ...Object.getOwnPropertySymbols(source),
-                ]);
-                for (const key of keys) {
-                    const targetValue = result[key];
-                    const sourceValue = source[key];
-                    if (customMerge &&
-                        customMerge(key, targetValue, sourceValue) !== undefined) {
-                        result[key] = customMerge(key, targetValue, sourceValue);
-                    }
-                    else if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
-                        result[key] = mergeObjects(targetValue, [sourceValue], depth + 1);
-                    }
-                    else if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
-                        result[key] = mergeArrays(targetValue, sourceValue, arrayMerge);
-                    }
-                    else if (sourceValue !== undefined) {
-                        result[key] = sourceValue;
-                    }
-                }
-            }
-            else {
-                // If types don't match, source takes precedence
-                result = source;
-            }
-        }
-        return result;
-    }
-    function mergeArrays(target, source, strategy) {
-        if (typeof strategy === 'function') {
-            return strategy(target, source);
-        }
-        switch (strategy) {
-            case 'concat':
-                return [...target, ...source];
-            case 'merge':
-                const maxLength = Math.max(target.length, source.length);
-                const merged = [];
-                for (let i = 0; i < maxLength; i++) {
-                    if (i < target.length && i < source.length) {
-                        if (isPlainObject(target[i]) && isPlainObject(source[i])) {
-                            merged[i] = mergeObjects(target[i], [source[i]], 0);
-                        }
-                        else {
-                            merged[i] = source[i];
-                        }
-                    }
-                    else if (i < target.length) {
-                        merged[i] = target[i];
-                    }
-                    else {
-                        merged[i] = source[i];
-                    }
-                }
-                return merged;
-            case 'replace':
-            default:
-                return [...source];
-        }
-    }
-}