@beyondcorp/beyond-ui 1.2.67 → 1.2.69

package/dist/components/Image/Image.js

@@ -2,12 +2,18 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Skeleton } from '../Skeleton/Skeleton.js';
 import { Spinner } from '../Spinner/Spinner.js';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver.js';
 
 const DEFAULT_PLACEHOLDER = "https://res.cloudinary.com/dmpposta9/image/upload/v1759505259/beyond/beyond%20ui/beyond-ui-logo-part-with-bg_1_wydfry.png";
 const Image = ({ src, alt, className = "", fallbackSrc = DEFAULT_PLACEHOLDER, skeletonClassName = "w-full h-full", ...imgProps }) => {
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(false);
-    return (jsxs("div", { className: `relative ${className}`, children: [!loaded && !error && (jsxs("div", { className: `absolute inset-0 flex items-center justify-center ${skeletonClassName}`, children: [jsx(Skeleton, { className: "w-full h-full absolute inset-0" }), jsx(Spinner, { className: "relative z-10 w-8 h-8 text-primary-500" })] })), jsx("img", { src: error ? fallbackSrc : src, alt: alt, loading: "lazy", style: loaded ? {} : { display: "none" }, onLoad: () => setLoaded(true), onError: () => setError(true), draggable: imgProps.draggable ?? false, ...imgProps, className: `absolute inset-0 w-full h-full object-cover transition-transform duration-300 ${loaded ? "" : "hidden"}` })] }));
+    const [containerRef, inView] = useIntersectionObserver({ threshold: 0.1, freezeOnceVisible: true });
+    // Only load image if inView (or fallback if IntersectionObserver unsupported)
+    const shouldLoad = inView;
+    return (jsxs("div", { ref: containerRef, className: `relative ${className}`, children: [!loaded && !error && (jsxs("div", { className: `absolute inset-0 flex items-center justify-center ${skeletonClassName}`, children: [jsx(Skeleton, { className: "w-full h-full absolute inset-0" }), jsx(Spinner, { className: "relative z-10 w-8 h-8 text-primary-500" })] })), shouldLoad && (jsx("img", { src: error ? fallbackSrc : src, alt: alt, 
+                // loading="lazy"
+                style: loaded ? {} : { display: "none" }, onLoad: () => setLoaded(true), onError: () => setError(true), draggable: imgProps.draggable ?? false, ...imgProps, className: `absolute inset-0 w-full h-full object-cover transition-transform duration-300 ${loaded ? "" : "hidden"}` }))] }));
 };
 
 export { Image };

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport { Skeleton } from \"../Skeleton\";\r\nimport { Spinner } from \"../Spinner\";\r\n\r\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\r\n  src: string;\r\n  alt: string;\r\n  className?: string;\r\n  fallbackSrc?: string;\r\n  skeletonClassName?: string;\r\n}\r\n\r\nconst DEFAULT_PLACEHOLDER =\r\n  \"https://res.cloudinary.com/dmpposta9/image/upload/v1759505259/beyond/beyond%20ui/beyond-ui-logo-part-with-bg_1_wydfry.png\";\r\nexport const Image: React.FC<ImageProps> = ({\r\n  src,\r\n  alt,\r\n  className = \"\",\r\n  fallbackSrc = DEFAULT_PLACEHOLDER,\r\n  skeletonClassName = \"w-full h-full\",\r\n  ...imgProps\r\n}) => {\r\n  const [loaded, setLoaded] = useState(false);\r\n  const [error, setError] = useState(false);\r\n\r\n  return (\r\n    <div className={`relative ${className}`}>\r\n      {!loaded && !error && (\r\n        <div className={`absolute inset-0 flex items-center justify-center ${skeletonClassName}`}>\r\n          <Skeleton className=\"w-full h-full absolute inset-0\" />\r\n          <Spinner className=\"relative z-10 w-8 h-8 text-primary-500\" />\r\n        </div>\r\n      )}\r\n      <img\r\n        src={error ? fallbackSrc : src}\r\n        alt={alt}\r\n        loading=\"lazy\"\r\n        style={loaded ? {} : { display: \"none\" }}\r\n        onLoad={() => setLoaded(true)}\r\n        onError={() => setError(true)}\r\n        draggable={imgProps.draggable ?? false}\r\n        {...imgProps}\r\n        className={`absolute inset-0 w-full h-full object-cover transition-transform duration-300 ${loaded ? \"\" : \"hidden\"}`}\r\n      />\r\n    </div>\r\n  );\r\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAYA,MAAM,mBAAmB,GACvB,2HAA2H;AACtH,MAAM,KAAK,GAAyB,CAAC,EAC1C,GAAG,EACH,GAAG,EACH,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,mBAAmB,EACjC,iBAAiB,GAAG,eAAe,EACnC,GAAG,QAAQ,EACZ,KAAI;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEzC,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,SAAA,EAAY,SAAS,CAAA,CAAE,EAAA,QAAA,EAAA,CACpC,CAAC,MAAM,IAAI,CAAC,KAAK,KAChBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,kDAAA,EAAqD,iBAAiB,CAAA,CAAE,EAAA,QAAA,EAAA,CACtFC,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,gCAAgC,EAAA,CAAG,EACvDA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,wCAAwC,EAAA,CAAG,CAAA,EAAA,CAC1D,CACP,EACDA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,KAAK,GAAG,WAAW,GAAG,GAAG,EAC9B,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EACxC,MAAM,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAC7B,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAE,QAAQ,CAAC,SAAS,IAAI,KAAK,EAAA,GAClC,QAAQ,EACZ,SAAS,EAAE,CAAA,8EAAA,EAAiF,MAAM,GAAG,EAAE,GAAG,QAAQ,CAAA,CAAE,EAAA,CACpH,CAAA,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport { Skeleton } from \"../Skeleton\";\r\nimport { Spinner } from \"../Spinner\";\r\nimport { useIntersectionObserver } from \"../../hooks/useIntersectionObserver\";\r\n\r\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\r\n  src: string;\r\n  alt: string;\r\n  className?: string;\r\n  fallbackSrc?: string;\r\n  skeletonClassName?: string;\r\n}\r\n\r\nconst DEFAULT_PLACEHOLDER =\r\n  \"https://res.cloudinary.com/dmpposta9/image/upload/v1759505259/beyond/beyond%20ui/beyond-ui-logo-part-with-bg_1_wydfry.png\";\r\nexport const Image: React.FC<ImageProps> = ({\r\n  src,\r\n  alt,\r\n  className = \"\",\r\n  fallbackSrc = DEFAULT_PLACEHOLDER,\r\n  skeletonClassName = \"w-full h-full\",\r\n  ...imgProps\r\n}) => {\r\n  const [loaded, setLoaded] = useState(false);\r\n  const [error, setError] = useState(false);\r\n  const [containerRef, inView] = useIntersectionObserver<HTMLDivElement>({ threshold: 0.1, freezeOnceVisible: true });\r\n\r\n  // Only load image if inView (or fallback if IntersectionObserver unsupported)\r\n  const shouldLoad = inView;\r\n\r\n  return (\r\n    <div ref={containerRef} className={`relative ${className}`}>\r\n      {!loaded && !error && (\r\n        <div className={`absolute inset-0 flex items-center justify-center ${skeletonClassName}`}>\r\n          <Skeleton className=\"w-full h-full absolute inset-0\" />\r\n          <Spinner className=\"relative z-10 w-8 h-8 text-primary-500\" />\r\n        </div>\r\n      )}\r\n      {shouldLoad && (\r\n        <img\r\n          src={error ? fallbackSrc : src}\r\n          alt={alt}\r\n          // loading=\"lazy\"\r\n          style={loaded ? {} : { display: \"none\" }}\r\n          onLoad={() => setLoaded(true)}\r\n          onError={() => setError(true)}\r\n          draggable={imgProps.draggable ?? false}\r\n          {...imgProps}\r\n          className={`absolute inset-0 w-full h-full object-cover transition-transform duration-300 ${loaded ? \"\" : \"hidden\"}`}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAaA,MAAM,mBAAmB,GACvB,2HAA2H;AACtH,MAAM,KAAK,GAAyB,CAAC,EAC1C,GAAG,EACH,GAAG,EACH,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,mBAAmB,EACjC,iBAAiB,GAAG,eAAe,EACnC,GAAG,QAAQ,EACZ,KAAI;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzC,IAAA,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG,uBAAuB,CAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC;;IAGnH,MAAM,UAAU,GAAG,MAAM;AAEzB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,CAAA,SAAA,EAAY,SAAS,CAAA,CAAE,EAAA,QAAA,EAAA,CACvD,CAAC,MAAM,IAAI,CAAC,KAAK,KAChBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,kDAAA,EAAqD,iBAAiB,CAAA,CAAE,EAAA,QAAA,EAAA,CACtFC,GAAA,CAAC,QAAQ,IAAC,SAAS,EAAC,gCAAgC,EAAA,CAAG,EACvDA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,wCAAwC,EAAA,CAAG,CAAA,EAAA,CAC1D,CACP,EACA,UAAU,KACTA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,KAAK,GAAG,WAAW,GAAG,GAAG,EAC9B,GAAG,EAAE,GAAG;;AAER,gBAAA,KAAK,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EACxC,MAAM,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAC7B,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAE,QAAQ,CAAC,SAAS,IAAI,KAAK,EAAA,GAClC,QAAQ,EACZ,SAAS,EAAE,CAAA,8EAAA,EAAiF,MAAM,GAAG,EAAE,GAAG,QAAQ,CAAA,CAAE,EAAA,CACpH,CACH,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,9 @@
+export interface IntersectionOptions extends IntersectionObserverInit {
+    freezeOnceVisible?: boolean;
+}
+/**
+ * useIntersectionObserver
+ * Returns true if the element is in the viewport.
+ * Usage: const [ref, inView] = useIntersectionObserver(options);
+ */
+export declare function useIntersectionObserver<T extends HTMLElement = HTMLElement>(options?: IntersectionOptions): [React.RefObject<T>, boolean];

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * useIntersectionObserver
+ * Returns true if the element is in the viewport.
+ * Usage: const [ref, inView] = useIntersectionObserver(options);
+ */
+function useIntersectionObserver(options) {
+    const [inView, setInView] = useState(false);
+    const ref = useState(() => ({ current: null }))[0];
+    useEffect(() => {
+        const node = ref.current;
+        if (!node || typeof window === "undefined" || !("IntersectionObserver" in window)) {
+            setInView(true); // Fallback: always load if no observer
+            return;
+        }
+        let frozen = false;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setInView(true);
+                if (options?.freezeOnceVisible) {
+                    frozen = true;
+                    observer.disconnect();
+                }
+            }
+            else if (!frozen) {
+                setInView(false);
+            }
+        }, options);
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, options]);
+    return [ref, inView];
+}
+
+export { useIntersectionObserver };
+//# sourceMappingURL=useIntersectionObserver.js.map

package/dist/hooks/useIntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\r\n\r\nexport interface IntersectionOptions extends IntersectionObserverInit {\r\n  freezeOnceVisible?: boolean;\r\n}\r\n\r\n/**\r\n * useIntersectionObserver\r\n * Returns true if the element is in the viewport.\r\n * Usage: const [ref, inView] = useIntersectionObserver(options);\r\n */\r\nexport function useIntersectionObserver<T extends HTMLElement = HTMLElement>(\r\n  options?: IntersectionOptions\r\n): [React.RefObject<T>, boolean] {\r\n  const [inView, setInView] = useState(false);\r\n  const ref = useState<React.RefObject<T>>(() => ({ current: null }))[0];\r\n\r\n  useEffect(() => {\r\n    const node = ref.current;\r\n    if (!node || typeof window === \"undefined\" || !(\"IntersectionObserver\" in window)) {\r\n      setInView(true); // Fallback: always load if no observer\r\n      return;\r\n    }\r\n\r\n    let frozen = false;\r\n    const observer = new IntersectionObserver(\r\n      ([entry]) => {\r\n        if (entry.isIntersecting) {\r\n          setInView(true);\r\n          if (options?.freezeOnceVisible) {\r\n            frozen = true;\r\n            observer.disconnect();\r\n          }\r\n        } else if (!frozen) {\r\n          setInView(false);\r\n        }\r\n      },\r\n      options\r\n    );\r\n\r\n    observer.observe(node);\r\n\r\n    return () => {\r\n      observer.disconnect();\r\n    };\r\n  }, [ref, options]);\r\n\r\n  return [ref, inView];\r\n}"],"names":[],"mappings":";;AAMA;;;;AAIG;AACG,SAAU,uBAAuB,CACrC,OAA6B,EAAA;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC3C,IAAA,MAAM,GAAG,GAAG,QAAQ,CAAqB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO;AACxB,QAAA,IAAI,CAAC,IAAI,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,EAAE,sBAAsB,IAAI,MAAM,CAAC,EAAE;AACjF,YAAA,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB;QACF;QAEA,IAAI,MAAM,GAAG,KAAK;QAClB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,CAAC,KAAK,CAAC,KAAI;AACV,YAAA,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,SAAS,CAAC,IAAI,CAAC;AACf,gBAAA,IAAI,OAAO,EAAE,iBAAiB,EAAE;oBAC9B,MAAM,GAAG,IAAI;oBACb,QAAQ,CAAC,UAAU,EAAE;gBACvB;YACF;iBAAO,IAAI,CAAC,MAAM,EAAE;gBAClB,SAAS,CAAC,KAAK,CAAC;YAClB;QACF,CAAC,EACD,OAAO,CACR;AAED,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;AAEtB,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,UAAU,EAAE;AACvB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAElB,IAAA,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC;AACtB;;;;"}

package/dist/index.d.ts

@@ -36,6 +36,7 @@ export * from './hooks/useDebounce';
 export * from './hooks/useLocalStorage';
 export * from './hooks/useToggle';
 export * from './hooks/useBreakpoint';
+export * from './hooks/useIntersectionObserver';
 export * from './utils/cn';
 export * from './theme/default';
 export * from './contexts/AuthContext';

package/dist/index.js

@@ -64,6 +64,7 @@ export { useDebounce } from './hooks/useDebounce.js';
 export { useLocalStorage } from './hooks/useLocalStorage.js';
 export { useToggle } from './hooks/useToggle.js';
 export { useBreakpoint } from './hooks/useBreakpoint.js';
+export { useIntersectionObserver } from './hooks/useIntersectionObserver.js';
 export { cn } from './utils/cn.js';
 export { defaultTheme } from './theme/default.js';
 export { AuthProvider, useAuth } from './contexts/AuthContext.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui",
-  "version": "1.2.67",
+  "version": "1.2.69",
   "description": "A comprehensive React UI component library built with TypeScript, TailwindCSS, and CVA",
   "type": "module",
   "main": "dist/index.js",