koval-ui/dist/src/lib/Picture/Picture.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),L=require("classnames"),t=require("./Picture.module.css.cjs"),$=require("../Skeleton/SkeletonShape.cjs"),i=s.forwardRef(({className:l,alt:o,src:n,sources:d,width:a,height:r,loading:m="lazy",...p},f)=>{const[c,h]=s.useState(!1),S=s.useCallback(()=>{h(!0)},[]);return e.jsxs("div",{className:t.default.wrapper,children:[e.jsxs("picture",{...p,className:L(t.default.picture,{[t.default.loading]:!c},l),ref:f,onLoad:S,children:[d?.map(({src:u,mediaCondition:j,density:x="1x",intrinsicWidth:P,slotWidth:g="",type:q,width:N,height:k})=>{const y=P??x;return e.jsx("source",{type:q,srcSet:`${u} ${y}`,media:`${j} ${g}`,width:N,height:k},u)}),e.jsx("img",{width:a,height:r,loading:m,src:n,alt:o})]}),!c&&e.jsx($.SkeletonShape,{width:a,height:r,className:t.default.skeleton})]})});i.displayName="Picture";exports.Picture=i;
//# sourceMappingURL=Picture.cjs.map