@hanzo/ui 5.3.26 → 5.3.28

package/dist/pattern/grid-pattern.js

@@ -1,333 +0,0 @@
-"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(${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
-  }
-};
-
-exports.GridPattern = GridPattern;
-exports.GridPatternPresets = GridPatternPresets;

package/dist/pattern/grid-pattern.mjs

@@ -1,310 +0,0 @@
-"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 };