@herowcode/utils 1.4.8 → 1.5.0

package/dist/nextjs/index.browser.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var clsx = require('clsx');
+var Image = require('next/image');
+var react = require('react');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var Image__default = /*#__PURE__*/_interopDefault(Image);
+
+// src/nextjs/optimized-image.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx__default.default(inputs));
+}
+var OptimizedImage = react.forwardRef(
+  function OptimizedImage2({
+    src,
+    alt,
+    width,
+    height,
+    className,
+    fallbackText = "Falha ao carregar a imagem",
+    lazyLoad = true,
+    onLoad,
+    sizes,
+    ...props
+  }, ref) {
+    const containerRef = react.useRef(null);
+    const [isLoading, setIsLoading] = react.useState(true);
+    const [hasError, setHasError] = react.useState(false);
+    const [isInView, setIsInView] = react.useState(!lazyLoad);
+    react.useEffect(() => {
+      if (!lazyLoad || !containerRef.current) {
+        setIsInView(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      observer.observe(containerRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [lazyLoad]);
+    const handleLoad = (ev) => {
+      setIsLoading(false);
+      onLoad == null ? void 0 : onLoad(ev);
+    };
+    const handleError = () => {
+      setIsLoading(false);
+      setHasError(true);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative overflow-hidden",
+        style: {
+          width: width != null ? `${Number(width)}px` : "100%",
+          height: height != null ? `${Number(height)}px` : "100%"
+        },
+        children: [
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "bg-muted absolute inset-0 animate-pulse rounded-md",
+              style: { width: "100%", height: "100%" }
+            }
+          ),
+          hasError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted text-muted-foreground absolute inset-0 flex items-center justify-center rounded-md text-center text-sm", children: fallbackText }) : isInView && /* @__PURE__ */ jsxRuntime.jsx(
+            Image__default.default,
+            {
+              ref,
+              src: src || "/placeholder.svg",
+              alt,
+              width: width ? Number(width) : void 0,
+              height: height ? Number(height) : void 0,
+              sizes: sizes || "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+              quality: 80,
+              loading: props.priority ? "eager" : "lazy",
+              className: cn(
+                "rounded-md object-cover transition-opacity duration-300",
+                isLoading ? "opacity-0" : "opacity-100",
+                className
+              ),
+              onLoad: handleLoad,
+              onError: handleError,
+              placeholder: "blur",
+              blurDataURL: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAEtAI8V7yQCgAAAABJRU5ErkJggg==",
+              ...props
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.OptimizedImage = OptimizedImage;
+//# sourceMappingURL=index.browser.cjs.map
+//# sourceMappingURL=index.browser.cjs.map

package/dist/nextjs/index.browser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/nextjs/optimized-image.tsx"],"names":["twMerge","clsx","forwardRef","OptimizedImage","useRef","useState","useEffect","jsxs","jsx","Image"],"mappings":"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","file":"index.browser.cjs","sourcesContent":["\"use client\"\n\nimport clsx, { type ClassValue } from \"clsx\"\nimport Image from \"next/image\"\nimport type React from \"react\"\nimport { forwardRef, useEffect, useRef, useState } from \"react\"\nimport { twMerge } from \"tailwind-merge\"\n\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\ninterface OptimizedImageProps\n  extends React.ComponentPropsWithoutRef<typeof Image> {\n  fallbackText?: string\n  lazyLoad?: boolean\n}\n\nexport const OptimizedImage = forwardRef<HTMLImageElement, OptimizedImageProps>(\n  function OptimizedImage(\n    {\n      src,\n      alt,\n      width,\n      height,\n      className,\n      fallbackText = \"Falha ao carregar a imagem\",\n      lazyLoad = true,\n      onLoad,\n      sizes,\n      ...props\n    },\n    ref,\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const [isLoading, setIsLoading] = useState(true)\n    const [hasError, setHasError] = useState(false)\n    const [isInView, setIsInView] = useState(!lazyLoad)\n\n    useEffect(() => {\n      if (!lazyLoad || !containerRef.current) {\n        setIsInView(true)\n        return\n      }\n\n      const observer = new IntersectionObserver(\n        ([entry]) => {\n          if (entry.isIntersecting) {\n            setIsInView(true)\n            observer.disconnect()\n          }\n        },\n        { rootMargin: \"200px\" },\n      )\n\n      observer.observe(containerRef.current)\n\n      return () => {\n        observer.disconnect()\n      }\n    }, [lazyLoad])\n\n    const handleLoad = (ev: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setIsLoading(false)\n      onLoad?.(ev)\n    }\n\n    const handleError = () => {\n      setIsLoading(false)\n      setHasError(true)\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className=\"relative overflow-hidden\"\n        style={{\n          width: width != null ? `${Number(width)}px` : \"100%\",\n          height: height != null ? `${Number(height)}px` : \"100%\",\n        }}\n      >\n        {isLoading && (\n          <div\n            className=\"bg-muted absolute inset-0 animate-pulse rounded-md\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          />\n        )}\n\n        {hasError ? (\n          <div className=\"bg-muted text-muted-foreground absolute inset-0 flex items-center justify-center rounded-md text-center text-sm\">\n            {fallbackText}\n          </div>\n        ) : (\n          isInView && (\n            <Image\n              ref={ref}\n              src={src || \"/placeholder.svg\"}\n              alt={alt}\n              width={width ? Number(width) : undefined}\n              height={height ? Number(height) : undefined}\n              sizes={\n                sizes ||\n                \"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n              }\n              quality={80}\n              loading={props.priority ? \"eager\" : \"lazy\"}\n              className={cn(\n                \"rounded-md object-cover transition-opacity duration-300\",\n                isLoading ? \"opacity-0\" : \"opacity-100\",\n                className,\n              )}\n              onLoad={handleLoad}\n              onError={handleError}\n              placeholder=\"blur\"\n              blurDataURL=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAEtAI8V7yQCgAAAABJRU5ErkJggg==\"\n              {...props}\n            />\n          )\n        )}\n      </div>\n    )\n  },\n)\n"]}

package/dist/nextjs/index.browser.d.mts

@@ -0,0 +1,10 @@
+import Image from 'next/image';
+import React from 'react';
+
+interface OptimizedImageProps extends React.ComponentPropsWithoutRef<typeof Image> {
+    fallbackText?: string;
+    lazyLoad?: boolean;
+}
+declare const OptimizedImage: React.ForwardRefExoticComponent<OptimizedImageProps & React.RefAttributes<HTMLImageElement>>;
+
+export { OptimizedImage };

package/dist/nextjs/index.browser.d.ts

@@ -0,0 +1,10 @@
+import Image from 'next/image';
+import React from 'react';
+
+interface OptimizedImageProps extends React.ComponentPropsWithoutRef<typeof Image> {
+    fallbackText?: string;
+    lazyLoad?: boolean;
+}
+declare const OptimizedImage: React.ForwardRefExoticComponent<OptimizedImageProps & React.RefAttributes<HTMLImageElement>>;
+
+export { OptimizedImage };

package/dist/nextjs/index.browser.js

@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/nextjs/optimized-image.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var OptimizedImage = forwardRef(
+  function OptimizedImage2({
+    src,
+    alt,
+    width,
+    height,
+    className,
+    fallbackText = "Falha ao carregar a imagem",
+    lazyLoad = true,
+    onLoad,
+    sizes,
+    ...props
+  }, ref) {
+    const containerRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const [isInView, setIsInView] = useState(!lazyLoad);
+    useEffect(() => {
+      if (!lazyLoad || !containerRef.current) {
+        setIsInView(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      observer.observe(containerRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [lazyLoad]);
+    const handleLoad = (ev) => {
+      setIsLoading(false);
+      onLoad == null ? void 0 : onLoad(ev);
+    };
+    const handleError = () => {
+      setIsLoading(false);
+      setHasError(true);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative overflow-hidden",
+        style: {
+          width: width != null ? `${Number(width)}px` : "100%",
+          height: height != null ? `${Number(height)}px` : "100%"
+        },
+        children: [
+          isLoading && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-muted absolute inset-0 animate-pulse rounded-md",
+              style: { width: "100%", height: "100%" }
+            }
+          ),
+          hasError ? /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground absolute inset-0 flex items-center justify-center rounded-md text-center text-sm", children: fallbackText }) : isInView && /* @__PURE__ */ jsx(
+            Image,
+            {
+              ref,
+              src: src || "/placeholder.svg",
+              alt,
+              width: width ? Number(width) : void 0,
+              height: height ? Number(height) : void 0,
+              sizes: sizes || "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+              quality: 80,
+              loading: props.priority ? "eager" : "lazy",
+              className: cn(
+                "rounded-md object-cover transition-opacity duration-300",
+                isLoading ? "opacity-0" : "opacity-100",
+                className
+              ),
+              onLoad: handleLoad,
+              onError: handleError,
+              placeholder: "blur",
+              blurDataURL: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAEtAI8V7yQCgAAAABJRU5ErkJggg==",
+              ...props
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { OptimizedImage };
+//# sourceMappingURL=index.browser.js.map
+//# sourceMappingURL=index.browser.js.map

package/dist/nextjs/index.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/nextjs/optimized-image.tsx"],"names":["OptimizedImage"],"mappings":"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","file":"index.browser.js","sourcesContent":["\"use client\"\n\nimport clsx, { type ClassValue } from \"clsx\"\nimport Image from \"next/image\"\nimport type React from \"react\"\nimport { forwardRef, useEffect, useRef, useState } from \"react\"\nimport { twMerge } from \"tailwind-merge\"\n\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\ninterface OptimizedImageProps\n  extends React.ComponentPropsWithoutRef<typeof Image> {\n  fallbackText?: string\n  lazyLoad?: boolean\n}\n\nexport const OptimizedImage = forwardRef<HTMLImageElement, OptimizedImageProps>(\n  function OptimizedImage(\n    {\n      src,\n      alt,\n      width,\n      height,\n      className,\n      fallbackText = \"Falha ao carregar a imagem\",\n      lazyLoad = true,\n      onLoad,\n      sizes,\n      ...props\n    },\n    ref,\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const [isLoading, setIsLoading] = useState(true)\n    const [hasError, setHasError] = useState(false)\n    const [isInView, setIsInView] = useState(!lazyLoad)\n\n    useEffect(() => {\n      if (!lazyLoad || !containerRef.current) {\n        setIsInView(true)\n        return\n      }\n\n      const observer = new IntersectionObserver(\n        ([entry]) => {\n          if (entry.isIntersecting) {\n            setIsInView(true)\n            observer.disconnect()\n          }\n        },\n        { rootMargin: \"200px\" },\n      )\n\n      observer.observe(containerRef.current)\n\n      return () => {\n        observer.disconnect()\n      }\n    }, [lazyLoad])\n\n    const handleLoad = (ev: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setIsLoading(false)\n      onLoad?.(ev)\n    }\n\n    const handleError = () => {\n      setIsLoading(false)\n      setHasError(true)\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className=\"relative overflow-hidden\"\n        style={{\n          width: width != null ? `${Number(width)}px` : \"100%\",\n          height: height != null ? `${Number(height)}px` : \"100%\",\n        }}\n      >\n        {isLoading && (\n          <div\n            className=\"bg-muted absolute inset-0 animate-pulse rounded-md\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          />\n        )}\n\n        {hasError ? (\n          <div className=\"bg-muted text-muted-foreground absolute inset-0 flex items-center justify-center rounded-md text-center text-sm\">\n            {fallbackText}\n          </div>\n        ) : (\n          isInView && (\n            <Image\n              ref={ref}\n              src={src || \"/placeholder.svg\"}\n              alt={alt}\n              width={width ? Number(width) : undefined}\n              height={height ? Number(height) : undefined}\n              sizes={\n                sizes ||\n                \"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n              }\n              quality={80}\n              loading={props.priority ? \"eager\" : \"lazy\"}\n              className={cn(\n                \"rounded-md object-cover transition-opacity duration-300\",\n                isLoading ? \"opacity-0\" : \"opacity-100\",\n                className,\n              )}\n              onLoad={handleLoad}\n              onError={handleError}\n              placeholder=\"blur\"\n              blurDataURL=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAEtAI8V7yQCgAAAABJRU5ErkJggg==\"\n              {...props}\n            />\n          )\n        )}\n      </div>\n    )\n  },\n)\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herowcode/utils",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "A lightweight collection of utility functions for everyday JavaScript/TypeScript development",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -86,6 +86,18 @@
         "default": "./dist/function/index.cjs"
       }
     },
+    "./nextjs": {
+      "browser": {
+        "import": {
+          "types": "./dist/nextjs/index.browser.d.mts",
+          "default": "./dist/nextjs/index.browser.js"
+        },
+        "require": {
+          "types": "./dist/nextjs/index.browser.d.ts",
+          "default": "./dist/nextjs/index.browser.cjs"
+        }
+      }
+    },
     "./string": {
       "import": {
         "types": "./dist/string/index.d.mts",
@@ -133,7 +145,7 @@
   "scripts": {
     "prebuild": "node scripts/sync-exports.cjs",
     "build": "tsup --config tsup.config.ts",
-    "lint": "biome check --write --unsafe",
+    "lint": "biome check --write --unsafe && tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
@@ -156,7 +168,21 @@
   ],
   "dependencies": {
     "axios": "1.12.2",
-    "dayjs": "^1.11.10"
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.10",
+    "tailwind-merge": "3.5.0"
+  },
+  "peerDependencies": {
+    "next": ">=13",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.4",
@@ -171,6 +197,8 @@
     "@vitest/ui": "3.2.4",
     "jest-environment-jsdom": "30.1.2",
     "jsdom": "26.1.0",
+    "next": "15",
+    "react": "19.1.1",
     "react-dom": "19.1.1",
     "tsup": "8.5.1",
     "typescript": "^5.2.2",