nextuiq
Version:
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
2 lines (1 loc) • 1.35 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),a=require("react"),t=require("./index38.js"),r=a.forwardRef((({src:r,alt:o,fallback:s="/images/placeholder.png",aspectRatio:i="16/9",className:n,containerClassName:l,loading:c="lazy",objectFit:d="cover",...m},u)=>{const[p,j]=a.useState(!1),[v,x]=a.useState(!0);return e.jsxRuntimeExports.jsxs("div",{className:t.cn("relative overflow-hidden bg-[oklch(var(--theme-muted))]",l),style:{aspectRatio:i},children:[e.jsxRuntimeExports.jsx("img",{ref:u,src:p?s:r,alt:o,className:t.cn("h-full w-full transition-[var(--image-transition)]",v?"opacity-[var(--image-loading-opacity)]":"opacity-[var(--image-loaded-opacity)]","contain"===d&&"object-contain","cover"===d&&"object-cover","fill"===d&&"object-fill","none"===d&&"object-none","scale-down"===d&&"object-scale-down",n),onError(){j(!0),x(!1)},onLoad(){x(!1)},loading:c,...m}),v&&e.jsxRuntimeExports.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.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))]"})})]})}));r.displayName="ResponsiveImage",exports.ResponsiveImage=r;