@luxfi/ui 8.0.0 → 8.2.0

package/dist/orders-history.js

@@ -0,0 +1,78 @@
+"use client";
+import { Box } from '@hanzo/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function OrdersHistory({
+  orders = [],
+  onCancelOrder,
+  onOrderClick
+}) {
+  const getTickerFromSymbol = (symbol) => {
+    return symbol.split(":")[1] || symbol;
+  };
+  if (orders.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { className: "p-4 text-center py-8 text-white/40", children: /* @__PURE__ */ jsx(Box, { tag: "p", className: "text-sm", children: "No orders yet" }) });
+  }
+  return /* @__PURE__ */ jsx(Box, { className: "p-4 space-y-2", children: orders.map((order) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `bg-white/5 rounded-lg p-3 ${onOrderClick ? "cursor-pointer hover:bg-white/10 transition-colors" : ""}`,
+      onClick: () => onOrderClick?.(order),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "flex items-start justify-between mb-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Box, { className: "font-semibold text-white", children: getTickerFromSymbol(order.symbol) }),
+            /* @__PURE__ */ jsx(Box, { className: "text-xs text-white/60", children: new Date(order.timestamp).toLocaleString() })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: `text-xs px-2 py-1 rounded ${order.status === "filled" ? "bg-success/20 text-success" : order.status === "cancelled" ? "bg-white/10 text-white/60" : order.status === "pending" ? "bg-[var(--lux-state-notice)]/20 text-[var(--lux-state-notice)]" : "bg-[var(--color-link-primary)]/20 text-[var(--color-link-primary)]"}`,
+              children: order.status.charAt(0).toUpperCase() + order.status.slice(1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { className: "grid grid-cols-3 gap-2 text-xs", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Box, { className: "text-white/60", children: "Side" }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: `font-medium ${order.type === "buy" ? "text-success" : "text-danger"}`,
+                children: order.type.toUpperCase()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Box, { className: "text-white/60", children: "Shares" }),
+            /* @__PURE__ */ jsx(Box, { className: "text-white font-medium", children: order.shares })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Box, { className: "text-white/60", children: "Price" }),
+            /* @__PURE__ */ jsx(Box, { className: "text-white font-medium", children: order.price > 0 ? `$${order.price.toFixed(2)}` : "Market" })
+          ] })
+        ] }),
+        order.orderType && /* @__PURE__ */ jsxs(Box, { className: "mt-2 text-xs", children: [
+          /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-white/60", children: "Type: " }),
+          /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-white font-medium", children: order.orderType.charAt(0).toUpperCase() + order.orderType.slice(1) })
+        ] }),
+        order.status === "open" && onCancelOrder && /* @__PURE__ */ jsx(
+          Box,
+          {
+            tag: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onCancelOrder(order.id);
+            },
+            className: "w-full mt-2 py-1.5 text-xs bg-white/5 hover:bg-white/10 text-white/80 rounded transition-colors",
+            children: "Cancel Order"
+          }
+        )
+      ]
+    },
+    order.id
+  )) });
+}
+var orders_history_default = OrdersHistory;
+
+export { OrdersHistory, orders_history_default as default };

package/dist/pagination.cjs

@@ -0,0 +1,132 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+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);
+
+// src/pagination.tsx
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    tag: "nav",
+    role: "navigation",
+    "aria-label": "pagination",
+    className: ui.cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    tag: "ul",
+    ref,
+    className: ui.cn("flex flex-row items-center gap-1", className),
+    ...props
+  }
+));
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "li", ref, className: ui.cn("", className), ...props }));
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    tag: "a",
+    "aria-current": isActive ? "page" : void 0,
+    className: ui.cn(
+      ui.buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size
+      }),
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    size: "default",
+    className: ui.cn("gap-1 pl-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { style: ui.css("h-4 w-4") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Previous" })
+    ]
+  }
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    size: "default",
+    className: ui.cn("gap-1 pr-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Next" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { style: ui.css("h-4 w-4") })
+    ]
+  }
+);
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ui.Box,
+  {
+    tag: "span",
+    "aria-hidden": true,
+    className: ui.cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { style: ui.css("h-4 w-4") }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "sr-only", children: "More pages" })
+    ]
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;

package/dist/pagination.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { ButtonProps } from "@hanzo/ui";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<ButtonProps, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare namespace PaginationLink {
+    var displayName: string;
+}
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../src/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,WAAW,EAAkB,MAAM,WAAW,CAAA;4BAEnC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;;;;AAUxE,QAAA,MAAM,iBAAiB,yKASrB,CAAA;AAGF,QAAA,MAAM,cAAc,kKAKlB,CAAA;AAGF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;gCAEH,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB;;;;oCAeM,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC;;;;gCAatB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC;;;;oCAalB,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;;;AAY/B,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAA"}

package/dist/pagination.js

@@ -0,0 +1,104 @@
+"use client";
+import * as React from 'react';
+import { Box, cn, buttonVariants, css } from '@hanzo/ui';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/pagination.tsx
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "nav",
+    role: "navigation",
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "ul",
+    ref,
+    className: cn("flex flex-row items-center gap-1", className),
+    ...props
+  }
+));
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { tag: "li", ref, className: cn("", className), ...props }));
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "a",
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size
+      }),
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    size: "default",
+    className: cn("gap-1 pl-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ChevronLeft, { style: css("h-4 w-4") }),
+      /* @__PURE__ */ jsx("span", { children: "Previous" })
+    ]
+  }
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    size: "default",
+    className: cn("gap-1 pr-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { children: "Next" }),
+      /* @__PURE__ */ jsx(ChevronRight, { style: css("h-4 w-4") })
+    ]
+  }
+);
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    tag: "span",
+    "aria-hidden": true,
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(MoreHorizontal, { style: css("h-4 w-4") }),
+      /* @__PURE__ */ jsx(Box, { tag: "span", className: "sr-only", children: "More pages" })
+    ]
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/particles-background.cjs

@@ -0,0 +1,159 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ParticlesBackground({
+  className,
+  particleCount = 50,
+  particleColor = "rgba(255, 255, 255, 0.6)",
+  lineColor = "rgba(255, 255, 255, 0.2)",
+  particleSize = 2,
+  speed = 0.5,
+  connectionDistance = 100,
+  opacity = 1,
+  enableMouseInteraction = true,
+  mouseRadius = 150
+}) {
+  const canvasRef = react.useRef(null);
+  const particlesRef = react.useRef([]);
+  const mouseRef = react.useRef({ x: 0, y: 0 });
+  const rafRef = react.useRef(void 0);
+  const initializeParticles = react.useCallback(
+    (width, height) => {
+      particlesRef.current = Array.from({ length: particleCount }, () => ({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        vx: (Math.random() - 0.5) * speed,
+        vy: (Math.random() - 0.5) * speed,
+        size: Math.random() * particleSize + 1
+      }));
+    },
+    [particleCount, speed, particleSize]
+  );
+  const drawParticle = react.useCallback(
+    (ctx, particle) => {
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = particleColor;
+      ctx.beginPath();
+      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+      ctx.fill();
+    },
+    [particleColor, opacity]
+  );
+  const drawConnection = react.useCallback(
+    (ctx, p1, p2, distance) => {
+      const alpha = Math.max(0, 1 - distance / connectionDistance);
+      ctx.globalAlpha = alpha * opacity;
+      ctx.strokeStyle = lineColor;
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+      ctx.stroke();
+    },
+    [lineColor, connectionDistance, opacity]
+  );
+  const updateParticle = react.useCallback(
+    (particle, width, height, mouseX, mouseY) => {
+      particle.x += particle.vx;
+      particle.y += particle.vy;
+      if (particle.x < 0 || particle.x > width) {
+        particle.vx *= -1;
+        particle.x = Math.max(0, Math.min(width, particle.x));
+      }
+      if (particle.y < 0 || particle.y > height) {
+        particle.vy *= -1;
+        particle.y = Math.max(0, Math.min(height, particle.y));
+      }
+      if (enableMouseInteraction) {
+        const dx = mouseX - particle.x;
+        const dy = mouseY - particle.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < mouseRadius) {
+          const force = (mouseRadius - distance) / mouseRadius;
+          const angle = Math.atan2(dy, dx);
+          particle.vx -= Math.cos(angle) * force * 0.2;
+          particle.vy -= Math.sin(angle) * force * 0.2;
+        }
+      }
+      particle.vx *= 0.99;
+      particle.vy *= 0.99;
+    },
+    [enableMouseInteraction, mouseRadius]
+  );
+  const animate = react.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height } = canvas;
+    const particles = particlesRef.current;
+    const { x: mouseX, y: mouseY } = mouseRef.current;
+    ctx.clearRect(0, 0, width, height);
+    particles.forEach((particle) => {
+      updateParticle(particle, width, height, mouseX, mouseY);
+      drawParticle(ctx, particle);
+    });
+    for (let i = 0; i < particles.length; i++) {
+      for (let j = i + 1; j < particles.length; j++) {
+        const dx = particles[i].x - particles[j].x;
+        const dy = particles[i].y - particles[j].y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < connectionDistance) {
+          drawConnection(ctx, particles[i], particles[j], distance);
+        }
+      }
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  }, [updateParticle, drawParticle, drawConnection, connectionDistance]);
+  const handleMouseMove = react.useCallback((event) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    mouseRef.current = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }, []);
+  const handleResize = react.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+    initializeParticles(canvas.width, canvas.height);
+  }, [initializeParticles]);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    handleResize();
+    rafRef.current = requestAnimationFrame(animate);
+    window.addEventListener("resize", handleResize);
+    if (enableMouseInteraction) {
+      canvas.addEventListener("mousemove", handleMouseMove);
+    }
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      window.removeEventListener("resize", handleResize);
+      if (enableMouseInteraction) {
+        canvas.removeEventListener("mousemove", handleMouseMove);
+      }
+    };
+  }, [animate, handleResize, handleMouseMove, enableMouseInteraction]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: ui.cn("fixed inset-0 pointer-events-none", className),
+      style: { zIndex: -1 }
+    }
+  );
+}
+ParticlesBackground.displayName = "ParticlesBackground";
+
+exports.ParticlesBackground = ParticlesBackground;

package/dist/particles-background.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface ParticlesBackgroundProps {
+    className?: string;
+    particleCount?: number;
+    particleColor?: string;
+    lineColor?: string;
+    particleSize?: number;
+    speed?: number;
+    connectionDistance?: number;
+    opacity?: number;
+    enableMouseInteraction?: boolean;
+    mouseRadius?: number;
+}
+export declare function ParticlesBackground({ className, particleCount, particleColor, lineColor, particleSize, speed, connectionDistance, opacity, enableMouseInteraction, mouseRadius, }: ParticlesBackgroundProps): React.JSX.Element;
+export declare namespace ParticlesBackground {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=particles-background.d.ts.map

package/dist/particles-background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"particles-background.d.ts","sourceRoot":"","sources":["../src/particles-background.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAY7D,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,aAAkB,EAClB,aAA0C,EAC1C,SAAsC,EACtC,YAAgB,EAChB,KAAW,EACX,kBAAwB,EACxB,OAAW,EACX,sBAA6B,EAC7B,WAAiB,GAClB,EAAE,wBAAwB,qBAwL1B;yBAnMe,mBAAmB"}

package/dist/particles-background.js

@@ -0,0 +1,157 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import { cn } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+function ParticlesBackground({
+  className,
+  particleCount = 50,
+  particleColor = "rgba(255, 255, 255, 0.6)",
+  lineColor = "rgba(255, 255, 255, 0.2)",
+  particleSize = 2,
+  speed = 0.5,
+  connectionDistance = 100,
+  opacity = 1,
+  enableMouseInteraction = true,
+  mouseRadius = 150
+}) {
+  const canvasRef = useRef(null);
+  const particlesRef = useRef([]);
+  const mouseRef = useRef({ x: 0, y: 0 });
+  const rafRef = useRef(void 0);
+  const initializeParticles = useCallback(
+    (width, height) => {
+      particlesRef.current = Array.from({ length: particleCount }, () => ({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        vx: (Math.random() - 0.5) * speed,
+        vy: (Math.random() - 0.5) * speed,
+        size: Math.random() * particleSize + 1
+      }));
+    },
+    [particleCount, speed, particleSize]
+  );
+  const drawParticle = useCallback(
+    (ctx, particle) => {
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = particleColor;
+      ctx.beginPath();
+      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+      ctx.fill();
+    },
+    [particleColor, opacity]
+  );
+  const drawConnection = useCallback(
+    (ctx, p1, p2, distance) => {
+      const alpha = Math.max(0, 1 - distance / connectionDistance);
+      ctx.globalAlpha = alpha * opacity;
+      ctx.strokeStyle = lineColor;
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+      ctx.stroke();
+    },
+    [lineColor, connectionDistance, opacity]
+  );
+  const updateParticle = useCallback(
+    (particle, width, height, mouseX, mouseY) => {
+      particle.x += particle.vx;
+      particle.y += particle.vy;
+      if (particle.x < 0 || particle.x > width) {
+        particle.vx *= -1;
+        particle.x = Math.max(0, Math.min(width, particle.x));
+      }
+      if (particle.y < 0 || particle.y > height) {
+        particle.vy *= -1;
+        particle.y = Math.max(0, Math.min(height, particle.y));
+      }
+      if (enableMouseInteraction) {
+        const dx = mouseX - particle.x;
+        const dy = mouseY - particle.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < mouseRadius) {
+          const force = (mouseRadius - distance) / mouseRadius;
+          const angle = Math.atan2(dy, dx);
+          particle.vx -= Math.cos(angle) * force * 0.2;
+          particle.vy -= Math.sin(angle) * force * 0.2;
+        }
+      }
+      particle.vx *= 0.99;
+      particle.vy *= 0.99;
+    },
+    [enableMouseInteraction, mouseRadius]
+  );
+  const animate = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height } = canvas;
+    const particles = particlesRef.current;
+    const { x: mouseX, y: mouseY } = mouseRef.current;
+    ctx.clearRect(0, 0, width, height);
+    particles.forEach((particle) => {
+      updateParticle(particle, width, height, mouseX, mouseY);
+      drawParticle(ctx, particle);
+    });
+    for (let i = 0; i < particles.length; i++) {
+      for (let j = i + 1; j < particles.length; j++) {
+        const dx = particles[i].x - particles[j].x;
+        const dy = particles[i].y - particles[j].y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < connectionDistance) {
+          drawConnection(ctx, particles[i], particles[j], distance);
+        }
+      }
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  }, [updateParticle, drawParticle, drawConnection, connectionDistance]);
+  const handleMouseMove = useCallback((event) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    mouseRef.current = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }, []);
+  const handleResize = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+    initializeParticles(canvas.width, canvas.height);
+  }, [initializeParticles]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    handleResize();
+    rafRef.current = requestAnimationFrame(animate);
+    window.addEventListener("resize", handleResize);
+    if (enableMouseInteraction) {
+      canvas.addEventListener("mousemove", handleMouseMove);
+    }
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      window.removeEventListener("resize", handleResize);
+      if (enableMouseInteraction) {
+        canvas.removeEventListener("mousemove", handleMouseMove);
+      }
+    };
+  }, [animate, handleResize, handleMouseMove, enableMouseInteraction]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: cn("fixed inset-0 pointer-events-none", className),
+      style: { zIndex: -1 }
+    }
+  );
+}
+ParticlesBackground.displayName = "ParticlesBackground";
+
+export { ParticlesBackground };