"use client";
'use strict';

var framerMotion = require('framer-motion');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var jsxRuntime = require('react/jsx-runtime');

// components/blocks/gallery/blur-vignette-grid.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var defaultImages = [
  {
    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
    alt: "Gallery image 1",
    colSpan: 2,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
    alt: "Gallery image 2",
    colSpan: 3,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
    alt: "Gallery image 3",
    colSpan: 5,
    height: "h-100"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
    alt: "Gallery image 4",
    colSpan: 2,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
    alt: "Gallery image 5",
    colSpan: 3,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
    alt: "Gallery image 6",
    colSpan: 3,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
    alt: "Gallery image 7",
    colSpan: 2,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
    alt: "Gallery image 8",
    colSpan: 5,
    height: "h-100"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
    alt: "Gallery image 9",
    colSpan: 2,
    height: "h-82"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
    alt: "Gallery image 10",
    colSpan: 3,
    height: "h-82"
  }
];
function BlurVignette({
  children,
  className = "",
  radius = "24px",
  inset = "16px",
  transitionLength = "32px",
  blur = "21px"
}) {
  return /* @__PURE__ */ jsxRuntime.jsxs(
    framerMotion.motion.div,
    {
      initial: {
        opacity: 0,
        scale: 0.9,
        y: -50
      },
      whileInView: {
        opacity: 1,
        scale: 1,
        y: 0
      },
      viewport: { once: true, amount: 0.2 },
      className: `group relative cursor-pointer overflow-hidden ${className}`,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
          .blur-vignette {
            --radius: ${radius};
            --inset: ${inset};
            --transition-length: ${transitionLength};
            --blur: ${blur};
            position: absolute;
            inset: 0;
            -webkit-backdrop-filter: blur(var(--blur));
            backdrop-filter: blur(var(--blur));
            --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
            --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
            --corner-gradient: transparent 0px,
              transparent calc(var(--r) - var(--transition-length)), 
              black var(--r);
            --fill-gradient: black, 
              black var(--inset),
              transparent calc(var(--inset) + var(--transition-length)),
              transparent calc(100% - var(--transition-length) - var(--inset)),
              black calc(100% - var(--inset));
            --fill-narrow-size: calc(100% - (var(--inset) + var(--r)) * 2);
            --fill-farther-position: calc(var(--inset) + var(--r));
            -webkit-mask-image: linear-gradient(to right, var(--fill-gradient)),
              linear-gradient(to bottom, var(--fill-gradient)),
              radial-gradient(at bottom right, var(--corner-gradient)),
              radial-gradient(at bottom left, var(--corner-gradient)),
              radial-gradient(at top left, var(--corner-gradient)),
              radial-gradient(at top right, var(--corner-gradient));
            -webkit-mask-size: 100% var(--fill-narrow-size), 
              var(--fill-narrow-size) 100%,
              var(--corner-size), 
              var(--corner-size), 
              var(--corner-size),
              var(--corner-size);
            -webkit-mask-position: 0 var(--fill-farther-position), 
              var(--fill-farther-position) 0,
              0 0, 
              100% 0, 
              100% 100%, 
              0 100%;
            -webkit-mask-repeat: no-repeat;
            opacity: 0;
            transition: opacity 0.3s ease;    
        }

        .blur-vignette.active {
        opacity: 1;
        }

        .group:hover .blur-vignette {
        opacity: 0;
        }
        ` }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "blur-vignette active" }),
        children
      ]
    }
  );
}
function BlurVignetteGrid({
  images = defaultImages,
  className,
  optixFlowConfig
}) {
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-4", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
    BlurVignette,
    {
      radius: "24px",
      inset: "10px",
      transitionLength: "100px",
      blur: "15px",
      className: cn(
        `col-span-${image.colSpan}`,
        image.height,
        "rounded-[2.5rem]"
      ),
      children: /* @__PURE__ */ jsxRuntime.jsx(
        img.Img,
        {
          width: 200,
          height: 200,
          className: "size-full rounded-[2.5rem] object-cover",
          src: image.src,
          alt: image.alt,
          loading: "lazy",
          optixFlowConfig
        }
      )
    },
    index
  )) }) }) });
}

exports.BlurVignetteGrid = BlurVignetteGrid;
//# sourceMappingURL=blur-vignette-grid.cjs.map
//# sourceMappingURL=blur-vignette-grid.cjs.map