@hanzo/ui 5.3.19 → 5.3.22

package/dist/navigation-menu.mjs

@@ -1 +1,116 @@
-import r from'react';import*as e from'@radix-ui/react-navigation-menu';import {cva}from'class-variance-authority';import {ChevronDown}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';var s=Object.defineProperty;var u=(t,o)=>s(t,"name",{value:o,configurable:true});function n(...t){return twMerge(clsx(t))}u(n,"cn");var v=r.forwardRef(({className:t,children:o,...i},m)=>jsx(e.Root,{ref:m,className:n("relative z-10 flex max-w-max flex-1 items-center justify-center",t),...i,children:o}));v.displayName=e.Root.displayName;var l=r.forwardRef(({className:t,...o},i)=>jsx(e.List,{ref:i,className:n("group flex flex-1 list-none items-center justify-center space-x-1",t),...o}));l.displayName=e.List.displayName;var g=r.forwardRef(({className:t,...o},i)=>jsx(e.Item,{ref:i,className:n("relative",t),...o}));g.displayName="NavigationMenuItem";var N=cva("group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent  focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50"),b=r.forwardRef(({className:t,children:o,...i},m)=>jsxs(e.Trigger,{ref:m,className:n(N(),"group",t),...i,children:[o," ",jsx(ChevronDown,{className:"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180","aria-hidden":"true"})]}));b.displayName=e.Trigger.displayName;var x=r.forwardRef(({className:t,...o},i)=>jsx(e.Content,{ref:i,className:n("right-0  absolute","absolute top-full w-fit bg-popover mt-[5px]","data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 bg-background overflow-hidden rounded-md border",t),...o}));x.displayName=e.Content.displayName;var Z=e.Link,y=r.forwardRef(({className:t,...o},i)=>jsx("div",{className:n("absolute left-0 top-full flex justify-center"),children:jsx(e.Viewport,{className:n("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border ","bg-background text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",t),ref:i,...o})}));y.displayName=e.Viewport.displayName;var h=r.forwardRef(({className:t,...o},i)=>jsx(e.Indicator,{ref:i,className:n("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden","data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",t),...o,children:jsx("div",{className:"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md"})}));h.displayName=e.Indicator.displayName;export{v as NavigationMenu,x as NavigationMenuContent,h as NavigationMenuIndicator,g as NavigationMenuItem,Z as NavigationMenuLink,l as NavigationMenuList,b as NavigationMenuTrigger,y as NavigationMenuViewport,N as navigationMenuTriggerStyle};
+"use client";
+import React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } 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 NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+var NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+var NavigationMenuItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Item,
+  {
+    ref,
+    className: cn("relative", className),
+    ...props
+  }
+));
+NavigationMenuItem.displayName = "NavigationMenuItem";
+var navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent  focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50"
+);
+var NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  NavigationMenuPrimitive.Trigger,
+  {
+    ref,
+    className: cn(navigationMenuTriggerStyle(), "group", className),
+    ...props,
+    children: [
+      children,
+      " ",
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+          "aria-hidden": "true"
+        }
+      )
+    ]
+  }
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "right-0  absolute",
+      "absolute top-full w-fit bg-popover mt-[5px]",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 bg-background overflow-hidden rounded-md border",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+var NavigationMenuLink = NavigationMenuPrimitive.Link;
+var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Viewport,
+  {
+    className: cn(
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border ",
+      "bg-background text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      className
+    ),
+    ref,
+    ...props
+  }
+) }));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+var NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Indicator,
+  {
+    ref,
+    className: cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+  }
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };

package/dist/pattern/grid-pattern.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 M=Object.defineProperty;var h=(l,r)=>M(l,"name",{value:r,configurable:true});function v(...l){return tailwindMerge.twMerge(clsx.clsx(l))}h(v,"cn");var I=d__namespace.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__namespace.useId(),y=d__namespace.useId(),w=d__namespace.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 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"),U=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"),L=u?{animation:`grid-pattern-move ${u.duration??10}s ${u.timing??"linear"} infinite ${u.direction??"normal"}`}:{};return jsxRuntime.jsxs("div",{ref:G,className:v("pointer-events-none absolute inset-0 overflow-hidden",$),style:{...C,...L},...O,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:P()}),U(),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);
             }
           }
-        `})]})});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}};exports.GridPattern=I;exports.GridPatternPresets=H;
+        ` })
+        ]
+      }
+    );
+  }
+);
+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;