@hanzo/ui 5.3.35 → 5.3.36

package/dist/pattern/index.js

@@ -1,333 +1,11 @@
 "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: `
+'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:`
           @keyframes grid-pattern-move {
             0% {
               transform: translate(0, 0);
             }
             100% {
-              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
+              transform: translate(${p.x}px, ${p.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
-  }
-};
-
-exports.GridPattern = GridPattern;
-exports.GridPatternPresets = GridPatternPresets;
+        `})]})});$.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;

package/dist/pattern/index.mjs

@@ -1,310 +1,11 @@
 "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: `
+import*as d from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var R=Object.defineProperty;var h=(l,s)=>R(l,"name",{value:s,configurable:true});function v(...l){return twMerge(clsx(l))}h(v,"cn");var $=d.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.useId(),y=d.useId(),w=d.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 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"),L=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"),M=u?{animation:`grid-pattern-move ${u.duration??10}s ${u.timing??"linear"} infinite ${u.direction??"normal"}`}:{};return jsxs("div",{ref:O,className:v("pointer-events-none absolute inset-0 overflow-hidden",C),style:{...G,...M},...P,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:U()}),L(),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:`
           @keyframes grid-pattern-move {
             0% {
               transform: translate(0, 0);
             }
             100% {
-              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
+              transform: translate(${p.x}px, ${p.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 };
+        `})]})});$.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}};export{$ as GridPattern,W as GridPatternPresets};