nextuiq/dist/index16.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import React__default from 'react';
import { cn } from './index38.mjs';

const ResponsiveImageComponent = React__default.forwardRef(
  ({
    src,
    alt,
    fallback = "/images/placeholder.png",
    aspectRatio = "16/9",
    className,
    containerClassName,
    loading = "lazy",
    objectFit = "cover",
    ...props
  }, ref) => {
    const [error, setError] = React__default.useState(false);
    const [isLoading, setIsLoading] = React__default.useState(true);
    const handleError = () => {
      setError(true);
      setIsLoading(false);
    };
    const handleLoad = () => {
      setIsLoading(false);
    };
    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "div",
      {
        className: cn(
          "relative overflow-hidden bg-[oklch(var(--theme-muted))]",
          containerClassName
        ),
        style: { aspectRatio },
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "img",
            {
              ref,
              src: error ? fallback : src,
              alt,
              className: cn(
                "h-full w-full transition-[var(--image-transition)]",
                isLoading ? "opacity-[var(--image-loading-opacity)]" : "opacity-[var(--image-loaded-opacity)]",
                objectFit === "contain" && "object-contain",
                objectFit === "cover" && "object-cover",
                objectFit === "fill" && "object-fill",
                objectFit === "none" && "object-none",
                objectFit === "scale-down" && "object-scale-down",
                className
              ),
              onError: handleError,
              onLoad: handleLoad,
              loading,
              ...props
            }
          ),
          isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              className: "h-8 w-8 animate-spin rounded-full \r\n              border-[var(--image-loader-border-width)] \r\n              border-[oklch(var(--theme-muted))] \r\n              border-t-[oklch(var(--theme-primary))]"
            }
          ) })
        ]
      }
    );
  }
);
ResponsiveImageComponent.displayName = "ResponsiveImage";
const ResponsiveImage = ResponsiveImageComponent;

export { ResponsiveImage };