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 c, 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: i, alt: m, src: l, sources: d, width: a, height: s, loading: n = "lazy", ...p }, u) => {
    const [t, f] = w(!1), h = j(() => {
      f(!0);
    }, []);
    return /* @__PURE__ */ c("div", { className: e.wrapper, children: [
      /* @__PURE__ */ c(
        "picture",
        {
          ...p,
          className: y(
            e.picture,
            { [e.loading]: !t },
            i
          ),
          ref: u,
          onLoad: h,
          children: [
            d?.map(
              ({
                src: o,
                mediaCondition: N,
                density: x = "1x",
                intrinsicWidth: L,
                slotWidth: P = "",
                type: S,
                width: $,
                height: g
              }) => /* @__PURE__ */ r(
                "source",
                {
                  type: S,
                  srcSet: `${o} ${L ?? x}`,
                  media: `${N} ${P}`,
                  width: $,
                  height: g
                },
                o
              )
            ),
            /* @__PURE__ */ r("img", { width: a, height: s, loading: n, src: l, alt: m })
          ]
        }
      ),
      !t && /* @__PURE__ */ r(b, { width: a, height: s, className: e.skeleton })
    ] });
  }
);
v.displayName = "Picture";
export {
  v as Picture
};
//# sourceMappingURL=Picture.js.map