@luxfi/ui 7.4.15 → 8.1.0

package/src/positions-list.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Box } from '@hanzo/ui'
+
+export interface Position {
+  symbol: string
+  shares: number
+  avgPrice: number
+  currentPrice: number
+}
+
+export interface PositionsListProps {
+  positions: Position[]
+  onPositionClick?: (position: Position) => void
+}
+
+export function PositionsList({
+  positions = [],
+  onPositionClick,
+}: Partial<PositionsListProps>) {
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(":")[1] || symbol
+  }
+
+  if (positions.length === 0) {
+    return (
+      <Box className="p-4 text-center py-8 text-white/40">
+        <Box tag="p" className="text-sm">No open positions</Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box className="p-4 space-y-2">
+      {positions.map((position) => {
+        const pl = (position.currentPrice - position.avgPrice) * position.shares
+        const plPercent =
+          ((position.currentPrice - position.avgPrice) / position.avgPrice) *
+          100
+        const totalValue = position.currentPrice * position.shares
+
+        return (
+          <Box
+            key={position.symbol}
+            className={`bg-white/5 rounded-lg p-3 ${onPositionClick ? "cursor-pointer hover:bg-white/10 transition-colors" : ""}`}
+            onClick={() => onPositionClick?.(position)}
+          >
+            <Box className="flex items-center justify-between mb-2">
+              <Box className="font-semibold text-white">
+                {getTickerFromSymbol(position.symbol)}
+              </Box>
+              <Box
+                className={`flex items-center gap-1 text-sm ${pl >= 0 ? "text-success" : "text-danger"}`}
+              >
+                {pl >= 0 ? (
+                  <TrendingUp size={14} />
+                ) : (
+                  <TrendingDown size={14} />
+                )}
+                {pl >= 0 ? "+" : ""}
+                {plPercent.toFixed(2)}%
+              </Box>
+            </Box>
+            <Box className="grid grid-cols-2 gap-2 text-xs">
+              <div>
+                <Box className="text-white/60">Shares</Box>
+                <Box className="text-white font-medium">{position.shares}</Box>
+              </div>
+              <div>
+                <Box className="text-white/60">Avg Price</Box>
+                <Box className="text-white font-medium">
+                  ${position.avgPrice.toFixed(2)}
+                </Box>
+              </div>
+            </Box>
+            <Box className="grid grid-cols-2 gap-2 text-xs mt-2 pt-2 border-t border-white/10">
+              <div>
+                <Box className="text-white/60">Current Price</Box>
+                <Box className="text-white font-medium">
+                  ${position.currentPrice.toFixed(2)}
+                </Box>
+              </div>
+              <div>
+                <Box className="text-white/60">Total Value</Box>
+                <Box className="text-white font-medium">
+                  ${totalValue.toFixed(2)}
+                </Box>
+              </div>
+            </Box>
+            <Box className="mt-2 pt-2 border-t border-white/10">
+              <Box className="flex justify-between items-center text-xs">
+                <Box tag="span" className="text-white/60">P&L</Box>
+                <Box tag="span"
+                  className={`font-semibold ${pl >= 0 ? "text-success" : "text-danger"}`}
+                >
+                  {pl >= 0 ? "+" : ""}${pl.toFixed(2)}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+
+export default PositionsList

package/src/progress-circle.tsx

@@ -1,4 +1,5 @@
 import { View } from '@hanzo/gui';
+import { css } from '@hanzo/ui'
 import * as React from 'react';
 
 import { ink } from './ink';
@@ -116,7 +117,7 @@ export const ProgressCircleRing = React.forwardRef<
       width={ size }
       height={ size }
       viewBox={ `0 0 ${ size } ${ size }` }
-      className={ value === null ? cn('lux-spin', className) : className }
+      className={ value === null ? cn('lux-spin', className) : className } style={css( value === null ? cn('lux-spin', className) : className )}
       { ...rest }
     >
       { /* Track */ }

package/src/pulse-animation.tsx

@@ -0,0 +1,606 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+import { Box } from '@hanzo/ui'
+import { motion, Variants } from "motion/react"
+
+import { cn } from "./utils"
+
+/**
+ * Custom hook to detect prefers-reduced-motion
+ */
+function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setPrefersReducedMotion(mediaQuery.matches)
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches)
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  return prefersReducedMotion
+}
+
+export interface PulseAnimationProps {
+  /**
+   * Children to animate
+   */
+  children?: React.ReactNode
+  /**
+   * Pulse intensity (0.1 - 2.0)
+   */
+  intensity?: number
+  /**
+   * Pulse duration in milliseconds
+   */
+  duration?: number
+  /**
+   * Number of pulse repetitions (0 for infinite)
+   */
+  repeat?: number
+  /**
+   * Delay between pulses in milliseconds
+   */
+  repeatDelay?: number
+  /**
+   * Pulse color variations
+   */
+  color?: string
+  /**
+   * Background color for pulse effect
+   */
+  backgroundColor?: string
+  /**
+   * Size scaling during pulse
+   */
+  scale?: number
+  /**
+   * Whether to show ring effect
+   */
+  showRing?: boolean
+  /**
+   * Number of ring layers
+   */
+  ringLayers?: number
+  /**
+   * Ring opacity
+   */
+  ringOpacity?: number
+  /**
+   * Whether animation is active
+   */
+  active?: boolean
+  /**
+   * Pulse shape
+   */
+  shape?: "circle" | "square" | "rounded"
+  /**
+   * Custom CSS class
+   */
+  className?: string
+  /**
+   * Custom styling
+   */
+  style?: React.CSSProperties
+  /**
+   * Whether to pulse on hover
+   */
+  pulseOnHover?: boolean
+  /**
+   * Whether to pulse on click
+   */
+  pulseOnClick?: boolean
+  /**
+   * Animation easing
+   */
+  easing?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "bounce"
+  /**
+   * Callback when pulse completes
+   */
+  onPulseComplete?: () => void
+  /**
+   * Callback when clicked (if pulseOnClick is true)
+   */
+  onClick?: () => void
+  /**
+   * Size of the pulse container
+   */
+  size?: number | string
+  /**
+   * Whether to show glow effect
+   */
+  showGlow?: boolean
+  /**
+   * Glow intensity
+   */
+  glowIntensity?: number
+  /**
+   * Custom variants for complex animations
+   */
+  customVariants?: Variants
+  /**
+   * Pulse pattern type
+   */
+  pattern?: "steady" | "heartbeat" | "notification" | "breathing" | "rapid"
+}
+
+const easingFunctions = {
+  linear: "linear",
+  easeIn: "easeIn",
+  easeOut: "easeOut",
+  easeInOut: "easeInOut",
+  bounce: "easeOut",
+} as const
+
+const pulsePatterns = {
+  steady: {
+    scale: [1, 1.1, 1],
+    opacity: [0.7, 1, 0.7],
+    duration: 1.5,
+    repeatType: "loop" as const,
+  },
+  heartbeat: {
+    scale: [1, 1.05, 1, 1.15, 1],
+    opacity: [0.7, 0.9, 0.8, 1, 0.7],
+    duration: 1.2,
+    repeatType: "loop" as const,
+  },
+  notification: {
+    scale: [1, 1.2, 1.1, 1.3, 1],
+    opacity: [0.8, 1, 0.9, 1, 0.8],
+    duration: 0.8,
+    repeatType: "loop" as const,
+  },
+  breathing: {
+    scale: [1, 1.05, 1],
+    opacity: [0.5, 1, 0.5],
+    duration: 3,
+    repeatType: "loop" as const,
+  },
+  rapid: {
+    scale: [1, 1.08, 1],
+    opacity: [0.8, 1, 0.8],
+    duration: 0.5,
+    repeatType: "loop" as const,
+  },
+}
+
+/**
+ * Ring pulse effect component
+ */
+function PulseRings({
+  layers,
+  color,
+  opacity,
+  size,
+  shape,
+  duration,
+  active,
+  easing,
+}: {
+  layers: number
+  color: string
+  opacity: number
+  size: number | string
+  shape: "circle" | "square" | "rounded"
+  duration: number
+  active: boolean
+  easing: keyof typeof easingFunctions
+}) {
+  const getShapeClasses = () => {
+    switch (shape) {
+      case "circle":
+        return "rounded-full"
+      case "square":
+        return "rounded-none"
+      case "rounded":
+        return "rounded-lg"
+      default:
+        return "rounded-full"
+    }
+  }
+
+  return (
+    <Box className="absolute inset-0 pointer-events-none">
+      {Array.from({ length: layers }, (_, i) => (
+        <motion.div
+          key={i}
+          className={cn("absolute border-2", getShapeClasses())}
+          style={{
+            borderColor: color,
+            width: size,
+            height: size,
+            left: "50%",
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+          animate={
+            active
+              ? {
+                  scale: [1, 1.5 + i * 0.2],
+                  opacity: [opacity, 0],
+                }
+              : {}
+          }
+          transition={{
+            duration: duration / 1000,
+            delay: i * 0.1,
+            repeat: Infinity,
+            ease: easingFunctions[easing],
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+/**
+ * Glow effect component
+ */
+function PulseGlow({
+  color,
+  intensity,
+  size,
+  shape,
+  active,
+  duration,
+  easing,
+}: {
+  color: string
+  intensity: number
+  size: number | string
+  shape: "circle" | "square" | "rounded"
+  active: boolean
+  duration: number
+  easing: keyof typeof easingFunctions
+}) {
+  const getShapeClasses = () => {
+    switch (shape) {
+      case "circle":
+        return "rounded-full"
+      case "square":
+        return "rounded-none"
+      case "rounded":
+        return "rounded-lg"
+      default:
+        return "rounded-full"
+    }
+  }
+
+  return (
+    <motion.div
+      className={cn("absolute inset-0 pointer-events-none", getShapeClasses())}
+      style={{
+        background: `radial-gradient(circle, ${color}40, transparent)`,
+        filter: `blur(${intensity * 10}px)`,
+        width: size,
+        height: size,
+      }}
+      animate={
+        active
+          ? {
+              scale: [1, 1.3, 1],
+              opacity: [0.3, 0.7, 0.3],
+            }
+          : {}
+      }
+      transition={{
+        duration: duration / 1000,
+        repeat: Infinity,
+        ease: easingFunctions[easing],
+      }}
+    />
+  )
+}
+
+/**
+ * Pulse animation component with customizable effects
+ */
+export function PulseAnimation({
+  children,
+  intensity = 1,
+  duration = 1500,
+  repeat = 0,
+  repeatDelay = 0,
+  color = "#3b82f6",
+  backgroundColor,
+  scale = 1.1,
+  showRing = true,
+  ringLayers = 3,
+  ringOpacity = 0.6,
+  active = true,
+  shape = "circle",
+  className,
+  style,
+  pulseOnHover = false,
+  pulseOnClick = false,
+  easing = "easeOut",
+  onPulseComplete,
+  onClick,
+  size = "100%",
+  showGlow = false,
+  glowIntensity = 1,
+  customVariants,
+  pattern = "steady",
+}: PulseAnimationProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isClicked, setIsClicked] = useState(false)
+  const [pulseCount, setPulseCount] = useState(0)
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const isActive =
+    active &&
+    (!pulseOnHover || isHovered) &&
+    (!pulseOnClick || isClicked) &&
+    !prefersReducedMotion
+
+  const patternConfig = pulsePatterns[pattern]
+  const variants: Variants = customVariants || {
+    pulse: {
+      scale: patternConfig.scale.map(
+        (s) => s * (1 + (intensity - 1) * (scale - 1))
+      ),
+      opacity: patternConfig.opacity,
+      transition: {
+        duration: (duration / 1000) * (patternConfig.duration / 1.5),
+        repeat: repeat === 0 ? Infinity : repeat - 1,
+        repeatType: patternConfig.repeatType,
+        repeatDelay: repeatDelay / 1000,
+        ease: easingFunctions[easing],
+      },
+    },
+    idle: {
+      scale: 1,
+      opacity: 1,
+    },
+  }
+
+  useEffect(() => {
+    if (repeat > 0 && isActive) {
+      const timer = setTimeout(() => {
+        setPulseCount((prev) => prev + 1)
+        if (pulseCount + 1 >= repeat) {
+          onPulseComplete?.()
+        }
+      }, duration + repeatDelay)
+
+      return () => clearTimeout(timer)
+    }
+  }, [pulseCount, repeat, duration, repeatDelay, isActive, onPulseComplete])
+
+  const handleClick = () => {
+    if (pulseOnClick) {
+      setIsClicked(true)
+      setTimeout(() => setIsClicked(false), duration)
+    }
+    onClick?.()
+  }
+
+  const getShapeClasses = () => {
+    switch (shape) {
+      case "circle":
+        return "rounded-full"
+      case "square":
+        return "rounded-none"
+      case "rounded":
+        return "rounded-lg"
+      default:
+        return "rounded-full"
+    }
+  }
+
+  return (
+    <motion.div
+      className={cn(
+        "relative inline-flex items-center justify-center",
+        pulseOnHover && "cursor-pointer",
+        pulseOnClick && "cursor-pointer",
+        getShapeClasses(),
+        className
+      )}
+      style={{
+        width: size,
+        height: size,
+        backgroundColor,
+        ...style,
+      }}
+      variants={variants}
+      animate={isActive ? "pulse" : "idle"}
+      onHoverStart={() => setIsHovered(true)}
+      onHoverEnd={() => setIsHovered(false)}
+      onClick={handleClick}
+      onAnimationComplete={() => {
+        if (repeat > 0 && pulseCount >= repeat - 1) {
+          onPulseComplete?.()
+        }
+      }}
+    >
+      {/* Glow effect */}
+      {showGlow && isActive && (
+        <PulseGlow
+          color={color}
+          intensity={glowIntensity}
+          size={size}
+          shape={shape}
+          active={isActive}
+          duration={duration}
+          easing={easing}
+        />
+      )}
+
+      {/* Ring effects */}
+      {showRing && isActive && (
+        <PulseRings
+          layers={ringLayers}
+          color={color}
+          opacity={ringOpacity}
+          size={size}
+          shape={shape}
+          duration={duration}
+          active={isActive}
+          easing={easing}
+        />
+      )}
+
+      {/* Content */}
+      <Box className="relative z-10">{children}</Box>
+    </motion.div>
+  )
+}
+
+/**
+ * Attention-grabbing dot pulse
+ */
+export function PulseDot({
+  color = "#ef4444",
+  size = 12,
+  ...props
+}: Omit<PulseAnimationProps, "children" | "size"> & {
+  size?: number
+}) {
+  return (
+    <PulseAnimation
+      size={size}
+      color={color}
+      shape="circle"
+      pattern="notification"
+      showRing
+      ringLayers={2}
+      {...props}
+    >
+      <Box
+        className="w-2 h-2 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+    </PulseAnimation>
+  )
+}
+
+/**
+ * Heartbeat pulse indicator
+ */
+export function HeartbeatPulse({
+  color = "#ef4444",
+  ...props
+}: Omit<PulseAnimationProps, "pattern">) {
+  return (
+    <PulseAnimation
+      pattern="heartbeat"
+      color={color}
+      showGlow
+      glowIntensity={0.8}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Breathing pulse effect
+ */
+export function BreathingPulse({
+  color = "#3b82f6",
+  ...props
+}: Omit<PulseAnimationProps, "pattern">) {
+  return (
+    <PulseAnimation
+      pattern="breathing"
+      color={color}
+      intensity={0.7}
+      showGlow
+      glowIntensity={1.2}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Preset pulse animation variations
+ */
+export const PulsePresets = {
+  /**
+   * Notification indicator
+   */
+  Notification: (
+    props: Omit<
+      PulseAnimationProps,
+      "children" | "pattern" | "showRing" | "size"
+    > & {
+      size?: number
+    }
+  ) => <PulseDot {...props} />,
+
+  /**
+   * Loading pulse
+   */
+  Loading: (props: Omit<PulseAnimationProps, "pattern" | "shape">) => (
+    <PulseAnimation pattern="steady" shape="circle" showGlow {...props} />
+  ),
+
+  /**
+   * Alert pulse
+   */
+  Alert: (
+    props: Omit<PulseAnimationProps, "color" | "pattern" | "intensity">
+  ) => (
+    <PulseAnimation
+      color="#ef4444"
+      pattern="rapid"
+      intensity={1.5}
+      showRing
+      showGlow
+      {...props}
+    />
+  ),
+
+  /**
+   * Success pulse
+   */
+  Success: (props: Omit<PulseAnimationProps, "color" | "pattern">) => (
+    <PulseAnimation
+      color="#10b981"
+      pattern="breathing"
+      showGlow
+      glowIntensity={0.8}
+      repeat={3}
+      {...props}
+    />
+  ),
+
+  /**
+   * Interactive button pulse
+   */
+  Button: (props: Omit<PulseAnimationProps, "pulseOnHover" | "shape">) => (
+    <PulseAnimation
+      pulseOnHover
+      shape="rounded"
+      pattern="steady"
+      intensity={1.2}
+      {...props}
+    />
+  ),
+
+  /**
+   * Avatar status pulse
+   */
+  Status: (
+    props: Omit<PulseAnimationProps, "shape" | "showRing" | "ringLayers">
+  ) => (
+    <PulseAnimation
+      shape="circle"
+      showRing
+      ringLayers={2}
+      pattern="breathing"
+      {...props}
+    />
+  ),
+}
+
+export default PulseAnimation