@hanzo/ui 5.3.19 → 5.3.22

package/dist/pattern/grid-pattern.mjs

@@ -1,10 +1,310 @@
-import*as d from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var M=Object.defineProperty;var h=(l,r)=>M(l,"name",{value:r,configurable:true});function v(...l){return twMerge(clsx(l))}h(v,"cn");var I=d.forwardRef(({variant:l="dots",size:r=4,gap:c=20,color:i="currentColor",opacity:o=.4,strokeWidth:a=1,fade:m=false,gradient:n,animation:u,offset:g,maxArea:f,className:$,style:C,...O},G)=>{let x=d.useId(),y=d.useId(),w=d.useId(),e=typeof r=="number"?{width:r,height:r}:{width:r.width??4,height:r.height??4},p=typeof c=="number"?{x:c,y:c}:{x:c.x??20,y:c.y??20},b={x:g?.x??0,y:g?.y??0},P=h(()=>{switch(l){case "dots":return jsx("circle",{cx:e.width/2,cy:e.height/2,r:e.width/2,fill:i,opacity:o});case "lines":return jsxs(Fragment,{children:[jsx("line",{x1:"0",y1:"0",x2:"0",y2:p.y,stroke:i,strokeWidth:a,opacity:o}),jsx("line",{x1:"0",y1:"0",x2:p.x,y2:"0",stroke:i,strokeWidth:a,opacity:o})]});case "crosses":return jsxs(Fragment,{children:[jsx("line",{x1:e.width/2,y1:"0",x2:e.width/2,y2:e.height,stroke:i,strokeWidth:a,opacity:o}),jsx("line",{x1:"0",y1:e.height/2,x2:e.width,y2:e.height/2,stroke:i,strokeWidth:a,opacity:o})]});case "plus":return jsx("path",{d:`M ${e.width/2} 0 L ${e.width/2} ${e.height} M 0 ${e.height/2} L ${e.width} ${e.height/2}`,stroke:i,strokeWidth:a,opacity:o,fill:"none",strokeLinecap:"round"});case "squares":return jsx("rect",{width:e.width,height:e.height,fill:"none",stroke:i,strokeWidth:a,opacity:o});default:return null}},"renderPattern"),U=h(()=>{if(!m)return null;switch(m){case "edges":case  true:return jsxs("linearGradient",{id:y,gradientUnits:"userSpaceOnUse",children:[jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"0"}),jsx("stop",{offset:"10%",stopColor:"white",stopOpacity:"1"}),jsx("stop",{offset:"90%",stopColor:"white",stopOpacity:"1"}),jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"0"})]});case "center":return jsxs("radialGradient",{id:y,gradientUnits:"userSpaceOnUse",children:[jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"1"}),jsx("stop",{offset:"70%",stopColor:"white",stopOpacity:"1"}),jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"0"})]});case "radial":return jsxs("radialGradient",{id:y,gradientUnits:"userSpaceOnUse",children:[jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"0"}),jsx("stop",{offset:"30%",stopColor:"white",stopOpacity:"1"}),jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"1"})]});default:return null}},"renderFadeMask"),L=u?{animation:`grid-pattern-move ${u.duration??10}s ${u.timing??"linear"} infinite ${u.direction??"normal"}`}:{};return jsxs("div",{ref:G,className:v("pointer-events-none absolute inset-0 overflow-hidden",$),style:{...C,...L},...O,children:[jsxs("svg",{className:"absolute h-full w-full",style:{transform:`translate(${b.x}px, ${b.y}px)`},children:[jsxs("defs",{children:[jsx("pattern",{id:x,x:"0",y:"0",width:p.x,height:p.y,patternUnits:"userSpaceOnUse",children:P()}),U(),n&&jsxs("linearGradient",{id:w,x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[jsx("stop",{offset:"0%",stopColor:n.from??"transparent"}),n.via&&jsx("stop",{offset:"50%",stopColor:n.via}),jsx("stop",{offset:"100%",stopColor:n.to??"transparent"})]})]}),jsx("rect",{width:f?.width??"100%",height:f?.height??"100%",fill:`url(#${x})`,mask:m?`url(#${y})`:void 0}),n&&jsx("rect",{width:f?.width??"100%",height:f?.height??"100%",fill:`url(#${w})`,opacity:n.opacity??.5,className:"mix-blend-multiply dark:mix-blend-screen"})]}),jsx("style",{children:`
+"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(${p.x}px, ${p.y}px);
+              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
             }
           }
-        `})]})});I.displayName="GridPattern";var H={dotMatrix:{variant:"dots",size:3,gap:30,opacity:.3},fineDots:{variant:"dots",size:1,gap:10,opacity:.4},gridLines:{variant:"lines",gap:40,strokeWidth:1,opacity:.2},crosshatch:{variant:"crosses",size:10,gap:20,strokeWidth:1,opacity:.3},blueprint:{variant:"lines",gap:20,strokeWidth:.5,color:"#3b82f6",opacity:.3},graph:{variant:"lines",gap:{x:50,y:50},strokeWidth:1,opacity:.15,fade:"edges"},isometric:{variant:"lines",gap:{x:30,y:17.32},strokeWidth:.5,opacity:.2},hexagon:{variant:"dots",size:2,gap:{x:30,y:26},opacity:.3}};export{I as GridPattern,H as GridPatternPresets};
+        ` })
+        ]
+      }
+    );
+  }
+);
+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 };

package/dist/pattern/index.js

@@ -1,10 +1,333 @@
-'use strict';var d=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),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 d__namespace=/*#__PURE__*/_interopNamespace(d);var R=Object.defineProperty;var h=(l,s)=>R(l,"name",{value:s,configurable:true});function v(...l){return tailwindMerge.twMerge(clsx.clsx(l))}h(v,"cn");var $=d__namespace.forwardRef(({variant:l="dots",size:s=4,gap:c=20,color:i="currentColor",opacity:o=.4,strokeWidth:a=1,fade:m=false,gradient:n,animation:u,offset:g,maxArea:f,className:C,style:G,...P},O)=>{let x=d__namespace.useId(),y=d__namespace.useId(),w=d__namespace.useId(),e=typeof s=="number"?{width:s,height:s}:{width:s.width??4,height:s.height??4},p=typeof c=="number"?{x:c,y:c}:{x:c.x??20,y:c.y??20},b={x:g?.x??0,y:g?.y??0},U=h(()=>{switch(l){case "dots":return jsxRuntime.jsx("circle",{cx:e.width/2,cy:e.height/2,r:e.width/2,fill:i,opacity:o});case "lines":return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("line",{x1:"0",y1:"0",x2:"0",y2:p.y,stroke:i,strokeWidth:a,opacity:o}),jsxRuntime.jsx("line",{x1:"0",y1:"0",x2:p.x,y2:"0",stroke:i,strokeWidth:a,opacity:o})]});case "crosses":return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("line",{x1:e.width/2,y1:"0",x2:e.width/2,y2:e.height,stroke:i,strokeWidth:a,opacity:o}),jsxRuntime.jsx("line",{x1:"0",y1:e.height/2,x2:e.width,y2:e.height/2,stroke:i,strokeWidth:a,opacity:o})]});case "plus":return jsxRuntime.jsx("path",{d:`M ${e.width/2} 0 L ${e.width/2} ${e.height} M 0 ${e.height/2} L ${e.width} ${e.height/2}`,stroke:i,strokeWidth:a,opacity:o,fill:"none",strokeLinecap:"round"});case "squares":return jsxRuntime.jsx("rect",{width:e.width,height:e.height,fill:"none",stroke:i,strokeWidth:a,opacity:o});default:return null}},"renderPattern"),L=h(()=>{if(!m)return null;switch(m){case "edges":case  true:return jsxRuntime.jsxs("linearGradient",{id:y,gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"0"}),jsxRuntime.jsx("stop",{offset:"10%",stopColor:"white",stopOpacity:"1"}),jsxRuntime.jsx("stop",{offset:"90%",stopColor:"white",stopOpacity:"1"}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"0"})]});case "center":return jsxRuntime.jsxs("radialGradient",{id:y,gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"1"}),jsxRuntime.jsx("stop",{offset:"70%",stopColor:"white",stopOpacity:"1"}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"0"})]});case "radial":return jsxRuntime.jsxs("radialGradient",{id:y,gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"0"}),jsxRuntime.jsx("stop",{offset:"30%",stopColor:"white",stopOpacity:"1"}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"1"})]});default:return null}},"renderFadeMask"),M=u?{animation:`grid-pattern-move ${u.duration??10}s ${u.timing??"linear"} infinite ${u.direction??"normal"}`}:{};return jsxRuntime.jsxs("div",{ref:O,className:v("pointer-events-none absolute inset-0 overflow-hidden",C),style:{...G,...M},...P,children:[jsxRuntime.jsxs("svg",{className:"absolute h-full w-full",style:{transform:`translate(${b.x}px, ${b.y}px)`},children:[jsxRuntime.jsxs("defs",{children:[jsxRuntime.jsx("pattern",{id:x,x:"0",y:"0",width:p.x,height:p.y,patternUnits:"userSpaceOnUse",children:U()}),L(),n&&jsxRuntime.jsxs("linearGradient",{id:w,x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:n.from??"transparent"}),n.via&&jsxRuntime.jsx("stop",{offset:"50%",stopColor:n.via}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:n.to??"transparent"})]})]}),jsxRuntime.jsx("rect",{width:f?.width??"100%",height:f?.height??"100%",fill:`url(#${x})`,mask:m?`url(#${y})`:void 0}),n&&jsxRuntime.jsx("rect",{width:f?.width??"100%",height:f?.height??"100%",fill:`url(#${w})`,opacity:n.opacity??.5,className:"mix-blend-multiply dark:mix-blend-screen"})]}),jsxRuntime.jsx("style",{children:`
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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 __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var GridPattern = React__namespace.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__namespace.useId();
+    const maskId = React__namespace.useId();
+    const gradientId = React__namespace.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__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: normalizedSize.width / 2,
+              cy: normalizedSize.height / 2,
+              r: normalizedSize.width / 2,
+              fill: color,
+              opacity
+            }
+          );
+        case "lines":
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: normalizedGap.y,
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "0",
+                x2: normalizedGap.x,
+                y2: "0",
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            )
+          ] });
+        case "crosses":
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: normalizedSize.width / 2,
+                y1: "0",
+                x2: normalizedSize.width / 2,
+                y2: normalizedSize.height,
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: "0",
+                y1: normalizedSize.height / 2,
+                x2: normalizedSize.width,
+                y2: normalizedSize.height / 2,
+                stroke: color,
+                strokeWidth,
+                opacity
+              }
+            )
+          ] });
+        case "plus":
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("linearGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "10%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "90%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
+          ] });
+        case "center":
+          return /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
+          ] });
+        case "radial":
+          return /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: maskId, gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "30%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "pointer-events-none absolute inset-0 overflow-hidden",
+          className
+        ),
+        style: {
+          ...style,
+          ...animationStyle
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: "absolute h-full w-full",
+              style: {
+                transform: `translate(${normalizedOffset.x}px, ${normalizedOffset.y}px)`
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "pattern",
+                    {
+                      id: patternId,
+                      x: "0",
+                      y: "0",
+                      width: normalizedGap.x,
+                      height: normalizedGap.y,
+                      patternUnits: "userSpaceOnUse",
+                      children: renderPattern()
+                    }
+                  ),
+                  renderFadeMask(),
+                  gradient && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "linearGradient",
+                    {
+                      id: gradientId,
+                      x1: "0%",
+                      y1: "0%",
+                      x2: "100%",
+                      y2: "100%",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: gradient.from ?? "transparent" }),
+                        gradient.via && /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: gradient.via }),
+                        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: gradient.to ?? "transparent" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    width: maxArea?.width ?? "100%",
+                    height: maxArea?.height ?? "100%",
+                    fill: `url(#${patternId})`,
+                    mask: fade ? `url(#${maskId})` : void 0
+                  }
+                ),
+                gradient && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("style", { children: `
           @keyframes grid-pattern-move {
             0% {
               transform: translate(0, 0);
             }
             100% {
-              transform: translate(${p.x}px, ${p.y}px);
+              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
             }
           }
-        `})]})});$.displayName="GridPattern";var W={dotMatrix:{variant:"dots",size:3,gap:30,opacity:.3},fineDots:{variant:"dots",size:1,gap:10,opacity:.4},gridLines:{variant:"lines",gap:40,strokeWidth:1,opacity:.2},crosshatch:{variant:"crosses",size:10,gap:20,strokeWidth:1,opacity:.3},blueprint:{variant:"lines",gap:20,strokeWidth:.5,color:"#3b82f6",opacity:.3},graph:{variant:"lines",gap:{x:50,y:50},strokeWidth:1,opacity:.15,fade:"edges"},isometric:{variant:"lines",gap:{x:30,y:17.32},strokeWidth:.5,opacity:.2},hexagon:{variant:"dots",size:2,gap:{x:30,y:26},opacity:.3}};exports.GridPattern=$;exports.GridPatternPresets=W;
+        ` })
+        ]
+      }
+    );
+  }
+);
+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
+  }
+};
+
+exports.GridPattern = GridPattern;
+exports.GridPatternPresets = GridPatternPresets;