@axos-web-dev/shared-components 1.0.6 → 1.0.8

package/dist/assets/globals.css

@@ -148,7 +148,7 @@ h1, h2, h3, h4, h5, h6, es_font {
 }
 .header_2 {
   font-size: 34px;
-  line-height: 1.25;
+  line-height: 1.35;
 }
 .header_3 {
   font-size: 28px;
@@ -282,7 +282,6 @@ p:empty, ul:empty {
   }
   .header_2 {
     font-size: 24px;
-    line-height: 1.29;
   }
   .header_3 {
     font-size: 24px;

package/dist/main.js

@@ -136,7 +136,7 @@ import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { RadioButton, RadioButtonSet } from "./Input/RadioButton.js";
 import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
-import { featured_center_vertical, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";
+import { featured_center_vertical, featured_grid, featured_hero, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";
 import { BreadcumbHeader } from "./Insight/Featured/Header.js";
 import { footnotes, insight_header, insight_header_2, insight_header_3, insight_header_4, insight_info_row, insight_list_item, insight_p } from "./Insight/Insight.css.js";
 import { Interstitial } from "./Interstitial/Interstitial.js";
@@ -437,6 +437,7 @@ export {
   feature_title,
   featured_center_vertical,
   featured_grid,
+  featured_hero,
   featured_maingrid,
   featured_maingrid_img,
   featured_maingrid_item,

package/dist/utils/lazyImage/imageObserver.d.ts

@@ -0,0 +1,9 @@
+export interface UseLazyImageProps {
+    src: string;
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+export declare const useLazyImage: ({ src, rootMargin, threshold, }: UseLazyImageProps) => {
+    imageSrc: string;
+    imgRef: import('react').MutableRefObject<HTMLImageElement | null>;
+};

package/dist/utils/lazyImage/imageObserver.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+const useLazyImage = ({
+  src,
+  rootMargin = "200px",
+  threshold = 0
+}) => {
+  const [imageSrc, setImageSrc] = useState("");
+  const imgRef = useRef(null);
+  useEffect(() => {
+    const imgElement = imgRef.current;
+    if (!imgElement) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setImageSrc(src);
+          observer.disconnect();
+        }
+      },
+      { rootMargin, threshold }
+    );
+    observer.observe(imgElement);
+    return () => observer.disconnect();
+  }, [src, rootMargin, threshold]);
+  return { imageSrc, imgRef };
+};
+export {
+  useLazyImage
+};

package/dist/utils/lazyImage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './imageObserver';
+export * from './lazyImage';

package/dist/utils/lazyImage/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { useLazyImage } from "./imageObserver.js";
+import { LazyImage } from "./lazyImage.js";
+export {
+  LazyImage,
+  useLazyImage
+};

package/dist/utils/lazyImage/lazyImage.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+export interface LazyImageProps {
+    src: string;
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    className?: string;
+}
+export declare const LazyImage: FC<LazyImageProps>;

package/dist/utils/lazyImage/lazyImage.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useLazyImage } from "./imageObserver.js";
+const LazyImage = ({
+  src,
+  alt = "",
+  height,
+  width,
+  className
+}) => {
+  const { imageSrc, imgRef } = useLazyImage({ src });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref: imgRef,
+      src: imageSrc,
+      alt,
+      className,
+      height,
+      width
+    }
+  );
+};
+export {
+  LazyImage
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",