"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
__name(cn, "cn");
var GridPattern = React.forwardRef(
  ({
    variant = "dots",
    size = 4,
    gap = 20,
    color = "currentColor",
    opacity = 0.4,
    strokeWidth = 1,
    fade = false,
    gradient,
    animation,
    offset,
    maxArea,
    className,
    style,
    ...props
  }, ref) => {
    const patternId = React.useId();
    const maskId = React.useId();
    const gradientId = React.useId();
    const normalizedSize = typeof size === "number" ? { width: size, height: size } : { width: size.width ?? 4, height: size.height ?? 4 };
    const normalizedGap = typeof gap === "number" ? { x: gap, y: gap } : { x: gap.x ?? 20, y: gap.y ?? 20 };
    const normalizedOffset = {
      x: offset?.x ?? 0,
      y: offset?.y ?? 0
    };
    const renderPattern = /* @__PURE__ */ __name(() => {
      switch (variant) {
        case "dots":
          return /* @__PURE__ */ jsx(
            "circle",
            {
              cx: normalizedSize.width / 2,
              cy: normalizedSize.height / 2,
              r: normalizedSize.width / 2,
              fill: color,
              opacity
            }
          );
        case "lines":
          return /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              "line",
              {
                x1: "0",
                y1: "0",
                x2: "0",
                y2: normalizedGap.y,
                stroke: color,
                strokeWidth,
                opacity
              }
            ),
            /* @__PURE__ */ jsx(
              "line",
              {
                x1: "0",
                y1: "0",
                x2: normalizedGap.x,
                y2: "0",
                stroke: color,
                strokeWidth,
                opacity
              }
            )
          ] });
        case "crosses":
          return /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              "line",
              {
                x1: normalizedSize.width / 2,
                y1: "0",
                x2: normalizedSize.width / 2,
                y2: normalizedSize.height,
                stroke: color,
                strokeWidth,
                opacity
              }
            ),
            /* @__PURE__ */ jsx(
              "line",
              {
                x1: "0",
                y1: normalizedSize.height / 2,
                x2: normalizedSize.width,
                y2: normalizedSize.height / 2,
                stroke: color,
                strokeWidth,
                opacity
              }
            )
          ] });
        case "plus":
          return /* @__PURE__ */ jsx(
            "path",
            {
              d: `M ${normalizedSize.width / 2} 0 L ${normalizedSize.width / 2} ${normalizedSize.height} M 0 ${normalizedSize.height / 2} L ${normalizedSize.width} ${normalizedSize.height / 2}`,
              stroke: color,
              strokeWidth,
              opacity,
              fill: "none",
              strokeLinecap: "round"
            }
          );
        case "squares":
          return /* @__PURE__ */ jsx(
            "rect",
            {
              width: normalizedSize.width,
              height: normalizedSize.height,
              fill: "none",
              stroke: color,
              strokeWidth,
              opacity
            }
          );
        default:
          return null;
      }
    }, "renderPattern");
    const renderFadeMask = /* @__PURE__ */ __name(() => {
      if (!fade) return null;
      switch (fade) {
        case "edges":
        case true:
          return /* @__PURE__ */ jsxs("linearGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
            /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: "white", stopOpacity: "1" }),
            /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: "white", stopOpacity: "1" }),
            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
          ] });
        case "center":
          return /* @__PURE__ */ jsxs("radialGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "1" }),
            /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "white", stopOpacity: "1" }),
            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
          ] });
        case "radial":
          return /* @__PURE__ */ jsxs("radialGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
            /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "white", stopOpacity: "1" }),
            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "1" })
          ] });
        default:
          return null;
      }
    }, "renderFadeMask");
    const animationStyle = animation ? {
      animation: `grid-pattern-move ${animation.duration ?? 10}s ${animation.timing ?? "linear"} infinite ${animation.direction ?? "normal"}`
    } : {};
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn(
          "pointer-events-none absolute inset-0 overflow-hidden",
          className
        ),
        style: {
          ...style,
          ...animationStyle
        },
        ...props,
        children: [
          /* @__PURE__ */ jsxs(
            "svg",
            {
              className: "absolute h-full w-full",
              style: {
                transform: `translate(${normalizedOffset.x}px, ${normalizedOffset.y}px)`
              },
              children: [
                /* @__PURE__ */ jsxs("defs", { children: [
                  /* @__PURE__ */ jsx(
                    "pattern",
                    {
                      id: patternId,
                      x: "0",
                      y: "0",
                      width: normalizedGap.x,
                      height: normalizedGap.y,
                      patternUnits: "userSpaceOnUse",
                      children: renderPattern()
                    }
                  ),
                  renderFadeMask(),
                  gradient && /* @__PURE__ */ jsxs(
                    "linearGradient",
                    {
                      id: gradientId,
                      x1: "0%",
                      y1: "0%",
                      x2: "100%",
                      y2: "100%",
                      children: [
                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradient.from ?? "transparent" }),
                        gradient.via && /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: gradient.via }),
                        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradient.to ?? "transparent" })
                      ]
                    }
                  )
                ] }),
                /* @__PURE__ */ jsx(
                  "rect",
                  {
                    width: maxArea?.width ?? "100%",
                    height: maxArea?.height ?? "100%",
                    fill: `url(#${patternId})`,
                    mask: fade ? `url(#${maskId})` : void 0
                  }
                ),
                gradient && /* @__PURE__ */ jsx(
                  "rect",
                  {
                    width: maxArea?.width ?? "100%",
                    height: maxArea?.height ?? "100%",
                    fill: `url(#${gradientId})`,
                    opacity: gradient.opacity ?? 0.5,
                    className: "mix-blend-multiply dark:mix-blend-screen"
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx("style", { children: `
          @keyframes grid-pattern-move {
            0% {
              transform: translate(0, 0);
            }
            100% {
              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
            }
          }
        ` })
        ]
      }
    );
  }
);
GridPattern.displayName = "GridPattern";
var GridPatternPresets = {
  dotMatrix: {
    variant: "dots",
    size: 3,
    gap: 30,
    opacity: 0.3
  },
  fineDots: {
    variant: "dots",
    size: 1,
    gap: 10,
    opacity: 0.4
  },
  gridLines: {
    variant: "lines",
    gap: 40,
    strokeWidth: 1,
    opacity: 0.2
  },
  crosshatch: {
    variant: "crosses",
    size: 10,
    gap: 20,
    strokeWidth: 1,
    opacity: 0.3
  },
  blueprint: {
    variant: "lines",
    gap: 20,
    strokeWidth: 0.5,
    color: "#3b82f6",
    opacity: 0.3
  },
  graph: {
    variant: "lines",
    gap: { x: 50, y: 50 },
    strokeWidth: 1,
    opacity: 0.15,
    fade: "edges"
  },
  isometric: {
    variant: "lines",
    gap: { x: 30, y: 17.32 },
    // 30deg isometric
    strokeWidth: 0.5,
    opacity: 0.2
  },
  hexagon: {
    variant: "dots",
    size: 2,
    gap: { x: 30, y: 26 },
    // Hexagonal pattern
    opacity: 0.3
  }
};

export { GridPattern, GridPatternPresets };
