@prass/betterimage/dist/components.mjs

BetterImage is a Next.js-focused library for building optimized image components with advanced features, including fallback animations. It enhances Next.js's built-in Image component, offering seamless optimization and an improved user experience for your

"use client";
import {
  Fallback,
  Image,
  Root
} from "./chunk-DH3OE7Z4.mjs";
import {
  pras
} from "./chunk-A5XWXIQE.mjs";
import "./chunk-PAWJFY3S.mjs";

// src/components/ui/BetterImage.ts
import * as React2 from "react";
import { jsx as jsx2 } from "react/jsx-runtime";

// src/components/ui/svg/Loader.tsx
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Loader = React.forwardRef(({ size, ...props }, ref) => {
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...props,
      xmlns: "http://www.w3.org/2000/svg",
      width: size || 24,
      height: size || 24,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      children: [
        /* @__PURE__ */ jsx("path", { d: "M12 2v4" }),
        /* @__PURE__ */ jsx("path", { d: "m16.2 7.8 2.9-2.9" }),
        /* @__PURE__ */ jsx("path", { d: "M18 12h4" }),
        /* @__PURE__ */ jsx("path", { d: "m16.2 16.2 2.9 2.9" }),
        /* @__PURE__ */ jsx("path", { d: "M12 18v4" }),
        /* @__PURE__ */ jsx("path", { d: "m4.9 19.1 2.9-2.9" }),
        /* @__PURE__ */ jsx("path", { d: "M2 12h4" }),
        /* @__PURE__ */ jsx("path", { d: "m4.9 4.9 2.9 2.9" })
      ]
    }
  );
});
var Loader_default = Loader;

// src/components/ui/BetterImage.ts
var BetterVersion = React2.forwardRef(({ className, ...props }, ref) => {
  return jsx2(Root, {
    ...props,
    ref,
    className: pras("relative flex h-full w-full", className)
  });
});
BetterVersion.displayName = Root.displayName;
var Img = React2.forwardRef(({ className, ...props }, ref) => {
  return jsx2(Image, {
    ...props,
    ref,
    className: pras("h-full w-full", className)
  });
});
Img.displayName = Image.displayName;
var Fallback2 = React2.forwardRef(({ className, ...props }, ref) => {
  return jsx2(Fallback, {
    ...props,
    ref,
    className: pras(
      "flex h-full w-full items-center justify-center",
      className
    ),
    children: jsx2(Loader_default, { className: "h-4 w-4 animate-spin", size: 24 })
  });
});
Fallback2.displayName = Fallback.displayName;
var BetterImage = React2.forwardRef(({ src, alt, className, onFailString, delay, ...props }, ref) => {
  return jsx2(BetterVersion, {
    ref,
    children: [
      jsx2(Img, { src, alt, className, ...props }, "image"),
      jsx2(Fallback2, { onFailString, delay }, "fallback")
    ]
  });
});
BetterImage.displayName = "BetterImage";
export {
  BetterImage,
  BetterVersion,
  Fallback2 as Fallback,
  Img
};
//# sourceMappingURL=components.mjs.map