@solostylist/ui-kit 1.0.95 → 1.0.96

package/dist/s-lazy-image/s-lazy-image.d.ts

@@ -1,42 +1,75 @@
 import { default as React } from 'react';
 import { SkeletonProps } from '@mui/material';
 /**
- * Props interface for SLazyImage component
+ * Props interface for SLazyImage component with enhanced lazy loading capabilities
+ *
+ * Extends standard HTML image attributes while providing additional configuration
+ * for skeleton loading states, responsive dimensions, and performance optimizations.
  */
-export interface SLazyImageProps {
-    /** Image source URL */
+export interface SLazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Image source URL - triggers loading and skeleton-to-image transition */
     src: string;
-    /** Alt text for accessibility */
-    alt: string;
-    /** CSS class name */
-    className?: string;
-    /** Skeleton variant while loading */
+    /** Skeleton variant while loading - affects border radius and animation style */
     variant?: SkeletonProps['variant'];
-    /** Custom styles */
+    /** Custom styles applied to both skeleton and loaded image */
     style?: React.CSSProperties;
-    /** Image height */
+    /** Image height - supports responsive units, falls back to 'auto' if not provided */
     height?: number | string;
-    /** Image width */
+    /** Image width - supports responsive units, falls back to '100%' if not provided */
     width?: number | string;
-    /** Minimum width */
+    /** Minimum width constraint for skeleton and image */
     minWidth?: number | string;
-    /** Minimum height */
+    /** Minimum height constraint for skeleton and image */
     minHeight?: number | string;
 }
 /**
- * SLazyImage - An optimized image component with skeleton loading states.
+ * SLazyImage - An optimized lazy-loading image component with enhanced performance and UX.
+ *
+ * This component provides a seamless loading experience by displaying a Material-UI skeleton
+ * placeholder while the image loads, then smoothly transitioning to the loaded image.
+ * Built with performance optimizations and proper theme integration.
  *
  * Key features:
- * - Skeleton placeholder while image loads
- * - Smooth transition from skeleton to loaded image
- * - Responsive sizing with fallback dimensions
- * - Customizable skeleton variants
- * - Automatic dimension handling
- * - Accessibility support with alt text
- * - Performance optimization with display toggling
- *
- * @param props - SLazyImageProps with image configuration
- * @returns JSX.Element - Image with loading state management
+ * - **Performance Optimized**: Uses display toggling instead of opacity for better rendering performance
+ * - **Theme Integration**: Leverages useTheme hook for consistent border radius handling across variants
+ * - **Smooth Transitions**: Clean skeleton-to-image transition with proper dimension management
+ * - **Responsive Design**: Intelligent dimension handling with responsive fallbacks
+ * - **Customizable Variants**: Supports Material-UI skeleton variants (rectangular, rounded, circular)
+ * - **Memory Efficient**: Proper state management prevents unnecessary re-renders
+ * - **Accessibility Ready**: Maintains all standard HTML image attributes and behaviors
+ *
+ * Performance improvements:
+ * - Display toggling (display: none/block) instead of opacity transitions for better GPU performance
+ * - Direct prop usage eliminates unnecessary state and re-renders
+ * - Theme-aware border radius calculation reduces style recalculations
+ * - Simplified onLoad handler reduces execution overhead
+ *
+ * @param props - SLazyImageProps configuration object
+ * @returns JSX.Element - Optimized image component with loading state management
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with skeleton loading
+ * <SLazyImage src="/image.jpg" width={300} height={200} />
+ *
+ * // Circular avatar with custom dimensions
+ * <SLazyImage
+ *   src="/avatar.jpg"
+ *   variant="circular"
+ *   width={80}
+ *   height={80}
+ *   alt="User avatar"
+ * />
+ *
+ * // Responsive image with custom styling
+ * <SLazyImage
+ *   src="/hero.jpg"
+ *   variant="rounded"
+ *   style={{ objectFit: 'cover' }}
+ *   width="100%"
+ *   height={400}
+ * />
+ * ```
  */
-declare const SLazyImage: ({ src, variant, alt, height, width, className, style, minWidth, minHeight, }: SLazyImageProps) => React.JSX.Element;
+declare const SLazyImage: ({ src, variant, height, width, style, minWidth, minHeight, ...props }: SLazyImageProps) => React.JSX.Element;
 export default SLazyImage;

package/dist/s-lazy-image/s-lazy-image.js

@@ -1,59 +1,63 @@
-import { j as s } from "../jsx-runtime-DywqP_6a.js";
-import { useId as w, useState as n, useEffect as x } from "react";
-import { useTheme as j, Box as L, Skeleton as b } from "@mui/material";
-const R = ({
+import { j as a } from "../jsx-runtime-DywqP_6a.js";
+import { useId as x, useState as f } from "react";
+import { useTheme as j, Box as d, Skeleton as L } from "@mui/material";
+const y = ({
   src: u,
-  variant: o = "rounded",
-  alt: r,
-  height: t,
-  width: i,
-  className: m,
-  style: d,
-  minWidth: g = "auto",
-  minHeight: c = "auto"
+  variant: e = "rounded",
+  height: o = "auto",
+  width: s = "100%",
+  style: t,
+  minWidth: m = "auto",
+  minHeight: n = "auto",
+  ...i
 }) => {
-  const l = w(), f = j(), [e, h] = n({
-    width: i || "100%",
-    height: t || "auto"
-  }), [a, p] = n(!1);
-  return x(() => {
-    h({
-      width: i || "100%",
-      height: t || "auto"
-    });
-  }, [i, t]), /* @__PURE__ */ s.jsxs(L, { height: e.height, width: e.width, children: [
-    !a && /* @__PURE__ */ s.jsx(
-      b,
-      {
-        variant: o,
-        id: `image-skeleton-${l}`,
-        animation: "wave",
-        style: { height: e.height, width: e.width, minWidth: g, minHeight: c, ...d }
-      }
-    ),
-    /* @__PURE__ */ s.jsx(
-      "img",
-      {
-        src: u,
-        alt: r,
-        style: {
-          height: e.height,
-          width: e.width,
-          display: a ? "block" : "none",
-          borderRadius: o === "circular" ? "50%" : o === "rounded" ? f.shape.borderRadius : "0px",
-          ...d
-        },
-        className: m,
-        onLoad: () => {
-          (!t || !i) && h({
-            width: e.width,
-            height: e.height
-          }), p(!0);
+  const c = x(), l = j(), [r, p] = f(!1);
+  return (
+    // Container box maintains consistent dimensions throughout the loading process
+    // This prevents layout shifts and provides stable positioning for both skeleton and image
+    /* @__PURE__ */ a.jsxs(d, { height: o, width: s, children: [
+      !r && /* @__PURE__ */ a.jsx(
+        L,
+        {
+          variant: e,
+          id: `image-skeleton-${c}`,
+          animation: "wave",
+          style: {
+            height: o,
+            width: s,
+            minWidth: m,
+            minHeight: n,
+            ...t
+            // User styles applied to skeleton for consistency
+          }
         }
-      }
-    )
-  ] });
+      ),
+      /* @__PURE__ */ a.jsx(
+        d,
+        {
+          component: "img",
+          src: u,
+          style: {
+            height: o,
+            width: s,
+            // Performance optimization: display toggling instead of opacity transitions
+            // This approach reduces GPU usage and improves rendering performance
+            display: r ? "block" : "none",
+            // Theme-aware border radius calculation for consistent styling
+            // Matches Material-UI skeleton variants with proper theme integration
+            borderRadius: e === "circular" ? "50%" : e === "rounded" ? l.shape.borderRadius : "0px",
+            ...t
+            // User-provided styles override defaults
+          },
+          onLoad: () => {
+            p(!0);
+          },
+          ...i
+        }
+      )
+    ] })
+  );
 };
 export {
-  R as default
+  y as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.95",
+  "version": "1.0.96",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",