@dododog/ui 0.1.0

package/dist/chunk-CNWUOKCY.mjs

@@ -0,0 +1,342 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function startOfDay(d) {
+  const r = new Date(d);
+  r.setHours(0, 0, 0, 0);
+  return r;
+}
+function addMonths(d, n) {
+  const r = new Date(d);
+  r.setMonth(r.getMonth() + n);
+  return r;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isBefore(a, b) {
+  return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+function isAfter(a, b) {
+  return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+var MONTH_NAMES = [
+  "janvier",
+  "f\xE9vrier",
+  "mars",
+  "avril",
+  "mai",
+  "juin",
+  "juillet",
+  "ao\xFBt",
+  "septembre",
+  "octobre",
+  "novembre",
+  "d\xE9cembre"
+];
+var SHORT_MONTHS = [
+  "janv.",
+  "f\xE9vr.",
+  "mars",
+  "avr.",
+  "mai",
+  "juin",
+  "juil.",
+  "ao\xFBt",
+  "sept.",
+  "oct.",
+  "nov.",
+  "d\xE9c."
+];
+var WEEK_DAYS = ["lu", "ma", "me", "je", "ve", "sa", "di"];
+function formatMonthYear(d) {
+  return `${MONTH_NAMES[d.getMonth()]} ${d.getFullYear()}`;
+}
+function formatShortDate(d) {
+  return `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]}`;
+}
+function getCalendarDays(month) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const dayOfWeek = (first.getDay() + 6) % 7;
+  const start = new Date(first);
+  start.setDate(start.getDate() - dayOfWeek);
+  const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
+  const dayOfWeekEnd = (last.getDay() + 6) % 7;
+  const end = new Date(last);
+  end.setDate(end.getDate() + (6 - dayOfWeekEnd));
+  const days = [];
+  const cursor = new Date(start);
+  while (cursor <= end) {
+    days.push(new Date(cursor));
+    cursor.setDate(cursor.getDate() + 1);
+  }
+  return days;
+}
+function DatePickerInput({
+  label,
+  value,
+  placeholder = "Quand ?",
+  isActive,
+  onClick,
+  onClear,
+  showClear = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative flex-1 px-4 py-2 border-b md:border-b-0 md:border-r border-gray-200 transition-all text-left cursor-pointer",
+      onClick,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-500 mb-0.5", children: label }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-base font-medium text-primary whitespace-nowrap",
+                isActive && value && "underline decoration-secondary decoration-2 underline-offset-4"
+              ),
+              children: value ? formatShortDate(value) : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: placeholder })
+            }
+          )
+        ] }),
+        showClear && value && isActive && onClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClear();
+            },
+            className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
+            children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-400", children: [
+              /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+}
+var DateRangePicker = React.forwardRef(
+  ({
+    checkIn,
+    checkOut,
+    onCheckInChange,
+    onCheckOutChange,
+    isOpen,
+    onClose,
+    position = "center",
+    minWidth = 800
+  }, forwardedRef) => {
+    const [calendarMonth, setCalendarMonth] = React.useState(() => checkIn || /* @__PURE__ */ new Date());
+    const [activeDateField, setActiveDateField] = React.useState("arrival");
+    const [isMobile, setIsMobile] = React.useState(false);
+    const internalRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React.useEffect(() => {
+      const mq = window.matchMedia("(max-width: 767px)");
+      setIsMobile(mq.matches);
+      const handler = (e) => setIsMobile(e.matches);
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }, []);
+    React.useEffect(() => {
+      if (isOpen) {
+        setActiveDateField("arrival");
+        if (checkIn) setCalendarMonth(checkIn);
+      }
+    }, [isOpen]);
+    React.useEffect(() => {
+      if (isOpen && isMobile) {
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = prev;
+        };
+      }
+    }, [isOpen, isMobile]);
+    React.useEffect(() => {
+      if (isMobile || !isOpen) return;
+      const handleClickOutside = (event) => {
+        if (internalRef.current && !internalRef.current.contains(event.target)) {
+          onClose();
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, onClose, isMobile]);
+    const handleDateClick = (date) => {
+      if (activeDateField === "arrival") {
+        onCheckInChange(date);
+        if (checkOut && isBefore(checkOut, date)) onCheckOutChange(null);
+        setActiveDateField("departure");
+      } else {
+        if (checkIn && isBefore(date, checkIn)) {
+          onCheckInChange(date);
+          onCheckOutChange(null);
+          setActiveDateField("departure");
+        } else {
+          onCheckOutChange(date);
+          if (isMobile) onClose();
+        }
+      }
+    };
+    const clearDates = () => {
+      onCheckInChange(null);
+      onCheckOutChange(null);
+      setActiveDateField("arrival");
+    };
+    const isDateInRange = (date) => {
+      if (!checkIn || !checkOut) return false;
+      return isAfter(date, checkIn) && isBefore(date, checkOut);
+    };
+    const isDateDisabled = (date) => {
+      const today = startOfDay(/* @__PURE__ */ new Date());
+      return isBefore(date, today);
+    };
+    const renderMonth = (monthDate, compact = false) => {
+      const days = getCalendarDays(monthDate);
+      return /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        !compact && /* @__PURE__ */ jsx("h3", { className: "text-center font-semibold text-2xl text-primary mb-6 capitalize", children: formatMonthYear(monthDate) }),
+        /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-7", compact ? "mb-2" : "mb-3"), children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-center font-medium text-gray-500 py-2",
+              compact ? "text-xs" : "text-base"
+            ),
+            children: day
+          },
+          day
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => {
+          const isCurrentMonth = isSameMonth(day, monthDate);
+          const isSelected = checkIn && isSameDay(day, checkIn) || checkOut && isSameDay(day, checkOut);
+          const isStart = checkIn && isSameDay(day, checkIn);
+          const isEnd = checkOut && isSameDay(day, checkOut);
+          const inRange = isDateInRange(day) && isCurrentMonth;
+          const disabled = isDateDisabled(day) || !isCurrentMonth;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => !disabled && handleDateClick(day),
+              disabled,
+              className: cn(
+                "relative font-medium transition-all",
+                compact ? "h-10 text-sm" : "h-12 text-base",
+                !isCurrentMonth && "text-gray-300",
+                disabled && isCurrentMonth && "text-gray-300 cursor-not-allowed",
+                inRange && "bg-orange-100",
+                isSelected && "bg-secondary text-white z-10",
+                isStart && checkOut && "rounded-l-lg",
+                isEnd && checkIn && "rounded-r-lg",
+                isSelected && (!checkOut || !checkIn) && "rounded-lg",
+                isSelected && checkIn && checkOut && isSameDay(checkIn, checkOut) && "rounded-lg",
+                !disabled && !isSelected && !inRange && isCurrentMonth && "text-primary hover:bg-gray-100 hover:rounded-lg"
+              ),
+              children: isCurrentMonth && day.getDate()
+            },
+            index
+          );
+        }) })
+      ] });
+    };
+    if (!isOpen) return null;
+    if (isMobile) {
+      return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[60] bg-white flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsx("h2", { className: "font-heading font-bold text-lg text-primary", children: "S\xE9lectionnez vos dates" }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: [
+            /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 px-4 py-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveDateField("arrival"),
+              className: cn(
+                "flex-1 px-3 py-2 rounded-xl text-left transition-all",
+                activeDateField === "arrival" ? "ring-2 ring-secondary bg-secondary/5" : "bg-gray-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-500", children: "Arriv\xE9e" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-primary", children: checkIn ? `${checkIn.getDate()} ${SHORT_MONTHS[checkIn.getMonth()]} ${checkIn.getFullYear()}` : "S\xE9lectionner" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveDateField("departure"),
+              className: cn(
+                "flex-1 px-3 py-2 rounded-xl text-left transition-all",
+                activeDateField === "departure" ? "ring-2 ring-secondary bg-secondary/5" : "bg-gray-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-500", children: "D\xE9part" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-primary", children: checkOut ? `${checkOut.getDate()} ${SHORT_MONTHS[checkOut.getMonth()]} ${checkOut.getFullYear()}` : "S\xE9lectionner" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, -1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg text-primary capitalize", children: formatMonthYear(calendarMonth) }),
+            /* @__PURE__ */ jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, 1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
+          ] }),
+          renderMonth(calendarMonth, true)
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-100 px-4 py-3 flex items-center justify-between bg-white", children: [
+          checkIn || checkOut ? /* @__PURE__ */ jsx("button", { onClick: clearDates, className: "text-sm text-primary underline hover:text-secondary transition-colors", children: "Effacer" }) : /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "px-6 py-2.5 bg-secondary text-white rounded-xl font-semibold text-sm hover:bg-secondary-dark transition-colors", children: "Valider" })
+        ] })
+      ] });
+    }
+    const positionClasses = {
+      left: "left-0",
+      center: "left-1/2 -translate-x-1/2",
+      right: "right-0"
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRefs,
+        className: cn(
+          "absolute top-full mt-2 bg-white rounded-3xl shadow-2xl border z-[60] p-8 pb-10",
+          positionClasses[position]
+        ),
+        style: { minWidth: `${minWidth}px` },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, -1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx("button", { onClick: () => setCalendarMonth(addMonths(calendarMonth, 1)), className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-12", children: [
+            renderMonth(calendarMonth),
+            renderMonth(addMonths(calendarMonth, 1))
+          ] }),
+          (checkIn || checkOut) && /* @__PURE__ */ jsx("div", { className: "text-right mt-4 pt-4 border-t border-gray-100", children: /* @__PURE__ */ jsx("button", { onClick: clearDates, className: "text-sm text-primary underline hover:text-secondary transition-colors", children: "Effacer les dates" }) })
+        ]
+      }
+    );
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DatePickerInput, DateRangePicker };

package/dist/chunk-DFXXGKMI.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var statusBadgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1.5 font-medium rounded-full",
+  {
+    variants: {
+      status: {
+        success: "bg-green-50 text-green-700",
+        warning: "bg-amber-50 text-amber-700",
+        error: "bg-red-50 text-red-700",
+        info: "bg-blue-50 text-blue-700",
+        neutral: "bg-gray-100 text-gray-600"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-1 text-sm",
+        lg: "px-3 py-1.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      status: "neutral",
+      size: "md"
+    }
+  }
+);
+var dotVariants = classVarianceAuthority.cva("rounded-full flex-shrink-0", {
+  variants: {
+    status: {
+      success: "bg-green-500",
+      warning: "bg-amber-500",
+      error: "bg-red-500",
+      info: "bg-blue-500",
+      neutral: "bg-gray-400"
+    },
+    size: {
+      sm: "w-1.5 h-1.5",
+      md: "w-2 h-2",
+      lg: "w-2 h-2"
+    }
+  },
+  defaultVariants: {
+    status: "neutral",
+    size: "md"
+  }
+});
+var StatusBadge = React__namespace.forwardRef(
+  ({ status, size, icon, showDot = true, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: chunkADIDI7AJ_js.cn(statusBadgeVariants({ status, size }), className),
+        ...props,
+        children: [
+          icon || showDot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkADIDI7AJ_js.cn(dotVariants({ status, size })), "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+
+exports.StatusBadge = StatusBadge;
+exports.statusBadgeVariants = statusBadgeVariants;

package/dist/chunk-DGEXT7PN.mjs

@@ -0,0 +1,85 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function formatPrice(price, currency) {
+  return new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(price);
+}
+var PriceDisplay = React.forwardRef(
+  ({
+    price,
+    originalPrice,
+    currency = "EUR",
+    period,
+    showDiscount = true,
+    size = "md",
+    className,
+    ...props
+  }, ref) => {
+    const hasDiscount = originalPrice && originalPrice > price;
+    const discountPercent = hasDiscount ? Math.round((originalPrice - price) / originalPrice * 100) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex items-baseline gap-2 flex-wrap", className),
+        ...props,
+        children: [
+          hasDiscount && showDiscount && discountPercent > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1.5 py-0.5 bg-red-500 text-white text-xs font-bold rounded", children: [
+            "-",
+            discountPercent,
+            "%"
+          ] }),
+          hasDiscount && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "line-through text-gray-400",
+                size === "sm" && "text-xs",
+                size === "md" && "text-sm",
+                size === "lg" && "text-base"
+              ),
+              children: formatPrice(originalPrice, currency)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-bold",
+                hasDiscount ? "text-red-600" : "text-primary",
+                size === "sm" && "text-base",
+                size === "md" && "text-xl",
+                size === "lg" && "text-3xl"
+              ),
+              children: formatPrice(price, currency)
+            }
+          ),
+          period && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "text-text-secondary",
+                size === "sm" && "text-xs",
+                size === "md" && "text-sm",
+                size === "lg" && "text-base"
+              ),
+              children: [
+                "/ ",
+                period
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PriceDisplay.displayName = "PriceDisplay";
+
+export { PriceDisplay };

package/dist/chunk-DLOHAW74.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var DEFAULT_BLUR_DATA_URL = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNFOEUzREIiLz48L3N2Zz4=";
+var ImageWithFallback = React__namespace.forwardRef(
+  ({
+    src,
+    alt,
+    fallbackSrc,
+    className,
+    useBlur = true,
+    blurDataURL,
+    renderImage,
+    ...props
+  }, ref) => {
+    const [status, setStatus] = React__namespace.useState("loading");
+    const [imgSrc, setImgSrc] = React__namespace.useState(src);
+    React__namespace.useEffect(() => {
+      if (src !== imgSrc) {
+        setImgSrc(src);
+        setStatus("loading");
+      }
+    }, [src]);
+    const handleLoad = () => setStatus("loaded");
+    const handleError = () => {
+      setStatus("error");
+      if (fallbackSrc) {
+        setImgSrc(fallbackSrc);
+      }
+    };
+    const imgProps = {
+      ...props,
+      src: imgSrc,
+      alt: alt ?? "",
+      className: chunkADIDI7AJ_js.cn(
+        "object-cover transition-all duration-500 ease-out w-full h-full",
+        status === "loaded" ? "opacity-100 blur-0 scale-100" : "opacity-0 blur-sm scale-105"
+      ),
+      onLoad: handleLoad,
+      onError: handleError
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: chunkADIDI7AJ_js.cn(
+          "relative overflow-hidden bg-[#F5F0E8] w-full h-full",
+          className
+        ),
+        children: [
+          status === "loading" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunkADIDI7AJ_js.cn(
+                "absolute inset-0 z-10 transition-opacity duration-500",
+                useBlur ? "blur-lg scale-110" : ""
+              ),
+              children: useBlur ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 bg-cover bg-center",
+                  style: {
+                    backgroundImage: `url(${blurDataURL || DEFAULT_BLUR_DATA_URL})`,
+                    backgroundColor: "#E8E3DB"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-shimmer bg-gradient-to-r from-[#E8E3DB] via-[#F5F0E8] to-[#E8E3DB] bg-[length:200%_100%] motion-reduce:animate-none" })
+            }
+          ),
+          renderImage ? renderImage(imgProps) : /* @__PURE__ */ jsxRuntime.jsx("img", { ...imgProps })
+        ]
+      }
+    );
+  }
+);
+ImageWithFallback.displayName = "ImageWithFallback";
+
+exports.ImageWithFallback = ImageWithFallback;