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

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

"use client";
import { jsxs as m, jsx as r } from "react/jsx-runtime";
import { forwardRef as k, useState as w, useCallback as j } from "react";
import y from "classnames";
import e from "./Picture.module.css.js";
import { SkeletonShape as b } from "../Skeleton/SkeletonShape.js";
const v = k(
  ({ className: c, alt: l, src: d, sources: a, width: t, height: s, loading: n = "lazy", ...p }, f) => {
    const [o, h] = w(!1), u = j(() => {
      h(!0);
    }, []);
    return /* @__PURE__ */ m("div", { className: e.wrapper, children: [
      /* @__PURE__ */ m(
        "picture",
        {
          ...p,
          className: y(
            e.picture,
            { [e.loading]: !o },
            c
          ),
          ref: f,
          onLoad: u,
          children: [
            a == null ? void 0 : a.map(
              ({
                src: i,
                mediaCondition: N,
                density: x = "1x",
                intrinsicWidth: L,
                slotWidth: P = "",
                type: S,
                width: $,
                height: g
              }) => /* @__PURE__ */ r(
                "source",
                {
                  type: S,
                  srcSet: `${i} ${L ?? x}`,
                  media: `${N} ${P}`,
                  width: $,
                  height: g
                },
                i
              )
            ),
            /* @__PURE__ */ r("img", { width: t, height: s, loading: n, src: d, alt: l })
          ]
        }
      ),
      !o && /* @__PURE__ */ r(b, { width: t, height: s, className: e.skeleton })
    ] });
  }
);
v.displayName = "Picture";
export {
  v as Picture
};
//# sourceMappingURL=Picture.js.map