@luxfi/ui 8.0.0 → 8.2.0

package/src/orders-history.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { Box } from '@hanzo/ui'
+export interface Order {
+  id: string
+  symbol: string
+  type: "buy" | "sell"
+  shares: number
+  price: number
+  status: "open" | "filled" | "cancelled" | "pending"
+  timestamp: number
+  orderType?: "market" | "limit"
+}
+
+export interface OrdersHistoryProps {
+  orders: Order[]
+  onCancelOrder?: (orderId: string) => void
+  onOrderClick?: (order: Order) => void
+}
+
+export function OrdersHistory({
+  orders = [],
+  onCancelOrder,
+  onOrderClick,
+}: Partial<OrdersHistoryProps>) {
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(":")[1] || symbol
+  }
+
+  if (orders.length === 0) {
+    return (
+      <Box className="p-4 text-center py-8 text-white/40">
+        <Box tag="p" className="text-sm">No orders yet</Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box className="p-4 space-y-2">
+      {orders.map((order) => (
+        <Box
+          key={order.id}
+          className={`bg-white/5 rounded-lg p-3 ${onOrderClick ? "cursor-pointer hover:bg-white/10 transition-colors" : ""}`}
+          onClick={() => onOrderClick?.(order)}
+        >
+          <Box className="flex items-start justify-between mb-2">
+            <div>
+              <Box className="font-semibold text-white">
+                {getTickerFromSymbol(order.symbol)}
+              </Box>
+              <Box className="text-xs text-white/60">
+                {new Date(order.timestamp).toLocaleString()}
+              </Box>
+            </div>
+            <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)]"
+              }`}
+            >
+              {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+            </Box>
+          </Box>
+          <Box className="grid grid-cols-3 gap-2 text-xs">
+            <div>
+              <Box className="text-white/60">Side</Box>
+              <Box
+                className={`font-medium ${order.type === "buy" ? "text-success" : "text-danger"}`}
+              >
+                {order.type.toUpperCase()}
+              </Box>
+            </div>
+            <div>
+              <Box className="text-white/60">Shares</Box>
+              <Box className="text-white font-medium">{order.shares}</Box>
+            </div>
+            <div>
+              <Box className="text-white/60">Price</Box>
+              <Box className="text-white font-medium">
+                {order.price > 0 ? `$${order.price.toFixed(2)}` : "Market"}
+              </Box>
+            </div>
+          </Box>
+          {order.orderType && (
+            <Box className="mt-2 text-xs">
+              <Box tag="span" className="text-white/60">Type: </Box>
+              <Box tag="span" className="text-white font-medium">
+                {order.orderType.charAt(0).toUpperCase() +
+                  order.orderType.slice(1)}
+              </Box>
+            </Box>
+          )}
+          {order.status === "open" && onCancelOrder && (
+            <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"
+            >
+              Cancel Order
+            </Box>
+          )}
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+export default OrdersHistory

package/src/pagination.tsx

@@ -0,0 +1,118 @@
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "./utils"
+import { ButtonProps, buttonVariants } from "@hanzo/ui"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <Box tag="nav"
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <Box tag="ul"
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <Box tag="li" ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <Box tag="a"
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft style={css('h-4 w-4')} />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight style={css('h-4 w-4')} />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <Box tag="span"
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal style={css('h-4 w-4')} />
+    <Box tag="span" className="sr-only">More pages</Box>
+  </Box>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/src/particles-background.tsx

@@ -0,0 +1,225 @@
+"use client"
+
+import React, { useCallback, useEffect, useRef } from "react"
+
+import { cn } from "./utils"
+
+interface Particle {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  size: number
+}
+
+interface ParticlesBackgroundProps {
+  className?: string
+  particleCount?: number
+  particleColor?: string
+  lineColor?: string
+  particleSize?: number
+  speed?: number
+  connectionDistance?: number
+  opacity?: number
+  enableMouseInteraction?: boolean
+  mouseRadius?: number
+}
+
+export 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,
+}: ParticlesBackgroundProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const particlesRef = useRef<Particle[]>([])
+  const mouseRef = useRef({ x: 0, y: 0 })
+  const rafRef = useRef<number | undefined>(undefined)
+
+  const initializeParticles = useCallback(
+    (width: number, height: number) => {
+      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: CanvasRenderingContext2D, particle: 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: CanvasRenderingContext2D,
+      p1: Particle,
+      p2: Particle,
+      distance: number
+    ) => {
+      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: Particle,
+      width: number,
+      height: number,
+      mouseX: number,
+      mouseY: number
+    ) => {
+      // Update position
+      particle.x += particle.vx
+      particle.y += particle.vy
+
+      // Bounce off edges
+      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))
+      }
+
+      // Mouse interaction
+      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
+        }
+      }
+
+      // Damping to prevent excessive speeds
+      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
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height)
+
+    // Update and draw particles
+    particles.forEach((particle) => {
+      updateParticle(particle, width, height, mouseX, mouseY)
+      drawParticle(ctx, particle)
+    })
+
+    // Draw connections
+    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: MouseEvent) => {
+    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
+
+    // Set initial canvas size
+    handleResize()
+
+    // Start animation
+    rafRef.current = requestAnimationFrame(animate)
+
+    // Event listeners
+    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 (
+    <canvas
+      ref={canvasRef as never}
+      className={cn("fixed inset-0 pointer-events-none", className)}
+      style={{ zIndex: -1 }}
+    />
+  )
+}
+
+ParticlesBackground.displayName = "ParticlesBackground"

package/src/pill.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { Box, VariantProps, css, variants } from '@hanzo/ui'
+import { X } from "lucide-react"
+
+import { cn } from "./utils"
+
+const pillVariants = variants(
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary hover:bg-primary/20",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        success:
+          "bg-[var(--lux-state-success)] text-[var(--lux-state-success)] dark:bg-[var(--lux-state-success)]/30 dark:text-[var(--lux-state-success)]",
+        warning:
+          "bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]/30 dark:text-[var(--lux-state-notice)]",
+        error: "bg-[var(--lux-state-error)] text-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)]/30 dark:text-[var(--lux-state-error)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface PillProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof pillVariants> {
+  onRemove?: () => void
+}
+
+const Pill = React.forwardRef<HTMLSpanElement, PillProps>(
+  ({ className, variant, onRemove, children, ...props }, ref) => {
+    return (
+      <Box tag="span"
+        ref={ref}
+        className={cn(pillVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {onRemove && (
+          <Box tag="button"
+            type="button"
+            onClick={onRemove}
+            className="ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+          >
+            <X style={css('h-3 w-3')} />
+            <Box tag="span" className="sr-only">Remove</Box>
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+Pill.displayName = "Pill"
+
+export { Pill, pillVariants }

package/src/pixel-image.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "./utils"
+
+export interface PixelImageProps
+  extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+  src: string
+  pixelSize?: number
+}
+
+const PixelImage = React.forwardRef<HTMLCanvasElement, PixelImageProps>(
+  ({ className, src, pixelSize = 10, ...props }, ref) => {
+    const canvasRef = React.useRef<HTMLCanvasElement>(null)
+
+    React.useEffect(() => {
+      const canvas = canvasRef.current
+      if (!canvas) return
+
+      const ctx = canvas.getContext("2d")
+      if (!ctx) return
+
+      const img = new Image()
+      img.crossOrigin = "anonymous"
+      img.src = src
+
+      img.onload = () => {
+        canvas.width = img.width
+        canvas.height = img.height
+
+        ctx.imageSmoothingEnabled = false
+        ctx.drawImage(img, 0, 0)
+
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+        for (let y = 0; y < canvas.height; y += pixelSize) {
+          for (let x = 0; x < canvas.width; x += pixelSize) {
+            const pixelIndex = (y * canvas.width + x) * 4
+            const r = imageData.data[pixelIndex]
+            const g = imageData.data[pixelIndex + 1]
+            const b = imageData.data[pixelIndex + 2]
+            const a = imageData.data[pixelIndex + 3] / 255
+
+            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`
+            ctx.fillRect(x, y, pixelSize, pixelSize)
+          }
+        }
+      }
+    }, [src, pixelSize])
+
+    return (
+      <canvas
+        ref={canvasRef}
+        className={cn("max-w-full", className)}
+        {...props}
+      />
+    )
+  }
+)
+PixelImage.displayName = "PixelImage"
+
+export { PixelImage }

package/src/popover.tsx

@@ -1,4 +1,5 @@
 import { Popover as GuiPopover } from '@hanzo/gui';
+import { Box, sx } from '@hanzo/ui'
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -192,7 +193,7 @@ export const PopoverContent = React.forwardRef<
     <GuiPopover.Content
       ref={ ref }
       unstyled
-      className={ cn(
+      {...sx(
         'z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]',
         'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
         'shadow-[var(--shadow-popover)]',
@@ -202,7 +203,7 @@ export const PopoverContent = React.forwardRef<
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
         'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
-      ) }
+      )}
       style={ Object.keys(contentStyle).length > 0 ? contentStyle : undefined }
       { ...rest as any }
     />
@@ -222,7 +223,7 @@ export const PopoverArrow = React.forwardRef<
     <GuiPopover.Arrow
       ref={ ref }
       unstyled
-      className={ cn('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className) }
+      {...sx('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className)}
       { ...rest as any }
     />
   );
@@ -240,7 +241,7 @@ export const PopoverCloseTrigger = React.forwardRef<
   return (
     <GuiPopover.Close
       unstyled
-      className={ cn('absolute top-1 right-1', className) }
+      {...sx('absolute top-1 right-1', className)}
       { ...rest as any }
       asChild
       ref={ ref }
@@ -312,7 +313,7 @@ export const PopoverBody = React.forwardRef<
     ...(_alignItems ? { alignItems: _alignItems } : {}),
   };
   return (
-    <div
+    <Box
       ref={ ref }
       className={ cn('p-4', className) }
       style={ Object.keys(bodyStyle).length > 0 ? bodyStyle : undefined }
@@ -329,7 +330,7 @@ export const PopoverHeader = React.forwardRef<
 >(function PopoverHeader(props, ref) {
   const { className, ...rest } = props;
   return (
-    <div
+    <Box
       ref={ ref }
       className={ cn('px-4 pt-4 pb-0 font-semibold', className) }
       { ...rest }
@@ -345,7 +346,7 @@ export const PopoverFooter = React.forwardRef<
 >(function PopoverFooter(props, ref) {
   const { className, ...rest } = props;
   return (
-    <div
+    <Box
       ref={ ref }
       className={ cn('px-4 pb-4 pt-0', className) }
       { ...rest }
@@ -361,7 +362,7 @@ export const PopoverTitle = React.forwardRef<
 >(function PopoverTitle(props, ref) {
   const { className, ...rest } = props;
   return (
-    <h3
+    <Box tag="h3"
       ref={ ref }
       className={ cn('text-base font-semibold', className) }
       { ...rest }
@@ -377,7 +378,7 @@ export const PopoverDescription = React.forwardRef<
 >(function PopoverDescription(props, ref) {
   const { className, ...rest } = props;
   return (
-    <p
+    <Box tag="p"
       ref={ ref }
       className={ cn('text-sm', className) }
       { ...rest }