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"),r=require("react"),L=require("classnames"),t=require("./Picture.module.css.cjs"),$=require("../Skeleton/SkeletonShape.cjs"),n=r.forwardRef(({className:u,alt:d,src:o,sources:a,width:s,height:i,loading:m="lazy",...p},f)=>{const[c,h]=r.useState(!1),S=r.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},u),ref:f,onLoad:S,children:[a==null?void 0:a.map(({src:l,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:`${l} ${y}`,media:`${j} ${g}`,width:N,height:k},l)}),e.jsx("img",{width:s,height:i,loading:m,src:o,alt:d})]}),!c&&e.jsx($.SkeletonShape,{width:s,height:i,className:t.default.skeleton})]})});n.displayName="Picture";exports.Picture=n;
//# sourceMappingURL=Picture.cjs.map