@luxfi/ui 8.0.0 → 8.2.0

package/src/android.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+import { VariantProps, css, variants } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+const androidVariants = variants("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      default: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+export interface AndroidProps
+  extends React.SVGAttributes<SVGSVGElement>,
+    VariantProps<typeof androidVariants> {
+  color?: string
+}
+
+const Android = React.forwardRef<SVGSVGElement, AndroidProps>(
+  ({ className, size, color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        className={cn(androidVariants({ size, className }))} style={css(cn(androidVariants({ size, className })))}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        {/* Android robot body */}
+        <path
+          d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10z"
+          fill={color}
+        />
+        {/* Android robot head */}
+        <path
+          d="M15.5 6.5C15.5 5.12 14.38 4 13 4h-2c-1.38 0-2.5 1.12-2.5 2.5S9.62 9 11 9h2c1.38 0 2.5-1.12 2.5-2.5z"
+          fill={color}
+        />
+        {/* Left antenna */}
+        <path
+          d="M7.5 2.5L9 4"
+          stroke={color}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+        {/* Right antenna */}
+        <path
+          d="M16.5 2.5L15 4"
+          stroke={color}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+        {/* Left arm */}
+        <path
+          d="M4 10.5c0-.83.67-1.5 1.5-1.5S7 9.67 7 10.5v3c0 .83-.67 1.5-1.5 1.5S4 14.33 4 13.5v-3z"
+          fill={color}
+        />
+        {/* Right arm */}
+        <path
+          d="M17 10.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v3c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5v-3z"
+          fill={color}
+        />
+        {/* Left eye */}
+        <circle
+          cx="10"
+          cy="6.5"
+          r="0.5"
+          fill={color === "currentColor" ? "#ffffff" : "#000000"}
+        />
+        {/* Right eye */}
+        <circle
+          cx="14"
+          cy="6.5"
+          r="0.5"
+          fill={color === "currentColor" ? "#ffffff" : "#000000"}
+        />
+      </svg>
+    )
+  }
+)
+
+Android.displayName = "Android"
+
+export { Android, androidVariants }

package/src/animated-background.tsx

@@ -0,0 +1,625 @@
+"use client"
+
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { Box } from '@hanzo/ui'
+import {
+  motion,
+  useAnimation,
+  useMotionValue,
+  useTransform,
+} 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 AnimatedBackgroundProps {
+  /**
+   * Background animation type
+   */
+  animation?: "gradient" | "blob" | "wave" | "mesh" | "parallax" | "particles"
+  /**
+   * Animation speed (0.1 - 2.0)
+   */
+  speed?: number
+  /**
+   * Color palette for the animation
+   */
+  colors?: string[]
+  /**
+   * Whether animation is paused
+   */
+  paused?: boolean
+  /**
+   * Custom CSS class
+   */
+  className?: string
+  /**
+   * Custom styling
+   */
+  style?: React.CSSProperties
+  /**
+   * Children to render on top
+   */
+  children?: React.ReactNode
+  /**
+   * Intensity of the animation (0-1)
+   */
+  intensity?: number
+  /**
+   * Whether to blur the background
+   */
+  blur?: boolean
+  /**
+   * Blur amount in pixels
+   */
+  blurAmount?: number
+  /**
+   * Opacity of the background
+   */
+  opacity?: number
+  /**
+   * Number of elements (for blob, particles, etc.)
+   */
+  elementCount?: number
+  /**
+   * Custom dimensions
+   */
+  width?: number | string
+  height?: number | string
+  /**
+   * Whether to cover entire viewport
+   */
+  fullscreen?: boolean
+  /**
+   * Parallax layers (for parallax animation)
+   */
+  parallaxLayers?: Array<{
+    speed: number
+    color: string
+    opacity: number
+  }>
+}
+
+/**
+ * Gradient shifting background
+ */
+function GradientBackground({
+  colors,
+  speed,
+  intensity,
+  paused,
+}: {
+  colors: string[]
+  speed: number
+  intensity: number
+  paused: boolean
+}) {
+  const gradientColors =
+    colors.length >= 2 ? colors : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"]
+
+  return (
+    <motion.div
+      className="absolute inset-0"
+      style={{
+        background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
+        backgroundSize: "400% 400%",
+      }}
+      animate={
+        paused
+          ? {}
+          : {
+              x: ["0%", "100%", "0%"],
+            }
+      }
+      transition={{
+        duration: 10 / speed,
+        repeat: Infinity,
+        ease: "linear",
+      }}
+    />
+  )
+}
+
+/**
+ * Blob animation background
+ */
+function BlobBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused,
+}: {
+  colors: string[]
+  speed: number
+  elementCount: number
+  intensity: number
+  paused: boolean
+}) {
+  const blobs = useMemo(
+    () =>
+      Array.from({ length: elementCount }, (_, i) => ({
+        id: i,
+        color: colors[i % colors.length],
+        size: Math.random() * 200 + 100,
+        x: Math.random() * 100,
+        y: Math.random() * 100,
+        duration: (Math.random() * 10 + 10) / speed,
+      })),
+    [elementCount, colors, speed]
+  )
+
+  return (
+    <Box className="absolute inset-0 overflow-hidden">
+      {blobs.map((blob) => (
+        <motion.div
+          key={blob.id}
+          className="absolute rounded-full"
+          style={{
+            background: `radial-gradient(circle, ${blob.color}40, transparent)`,
+            width: blob.size * intensity,
+            height: blob.size * intensity,
+            filter: "blur(40px)",
+          }}
+          initial={{
+            x: `${blob.x}%`,
+            y: `${blob.y}%`,
+          }}
+          animate={
+            paused
+              ? {}
+              : {
+                  x: [`${blob.x}%`, `${(blob.x + 50) % 100}%`, `${blob.x}%`],
+                  y: [`${blob.y}%`, `${(blob.y + 30) % 100}%`, `${blob.y}%`],
+                  scale: [1, 1.2, 1],
+                }
+          }
+          transition={{
+            duration: blob.duration,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+/**
+ * Wave pattern background
+ */
+function WaveBackground({
+  colors,
+  speed,
+  intensity,
+  paused,
+}: {
+  colors: string[]
+  speed: number
+  intensity: number
+  paused: boolean
+}) {
+  const waveColor = colors[0] || "#4ecdc4"
+
+  return (
+    <Box className="absolute inset-0 overflow-hidden">
+      {[0, 1, 2].map((index) => (
+        <motion.div
+          key={index}
+          className="absolute inset-0"
+          style={{
+            background: `radial-gradient(ellipse 100% 50% at center ${50 + index * 20}%, ${waveColor}${Math.round(
+              30 * intensity
+            )
+              .toString(16)
+              .padStart(2, "0")}, transparent)`,
+          }}
+          animate={
+            paused
+              ? {}
+              : {
+                  y: [index * 10, index * 10 + 20 * intensity, index * 10],
+                }
+          }
+          transition={{
+            duration: (3 + index) / speed,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+/**
+ * Mesh gradient background
+ */
+function MeshBackground({
+  colors,
+  speed,
+  intensity,
+  paused,
+}: {
+  colors: string[]
+  speed: number
+  intensity: number
+  paused: boolean
+}) {
+  const meshColors =
+    colors.length >= 4
+      ? colors.slice(0, 4)
+      : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"]
+
+  return (
+    <Box className="absolute inset-0 overflow-hidden">
+      {meshColors.map((color, index) => (
+        <motion.div
+          key={index}
+          className="absolute rounded-full"
+          style={{
+            background: `radial-gradient(circle, ${color}60, transparent)`,
+            width: `${60 + index * 20}%`,
+            height: `${60 + index * 20}%`,
+            filter: "blur(60px)",
+            mixBlendMode: "multiply",
+          }}
+          initial={{
+            x: `${25 + index * 15}%`,
+            y: `${25 + index * 15}%`,
+          }}
+          animate={
+            paused
+              ? {}
+              : {
+                  x: [
+                    `${25 + index * 15}%`,
+                    `${35 + index * 15}%`,
+                    `${25 + index * 15}%`,
+                  ],
+                  y: [
+                    `${25 + index * 15}%`,
+                    `${15 + index * 15}%`,
+                    `${25 + index * 15}%`,
+                  ],
+                  rotate: [0, 180, 360],
+                }
+          }
+          transition={{
+            duration: (8 + index * 2) / speed,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+/**
+ * Parallax layers background
+ */
+function ParallaxBackground({
+  layers,
+  speed,
+  paused,
+}: {
+  layers: Array<{ speed: number; color: string; opacity: number }>
+  speed: number
+  paused: boolean
+}) {
+  const mouseX = useMotionValue(0)
+  const mouseY = useMotionValue(0)
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const { clientX, clientY } = e
+      const { innerWidth, innerHeight } = window
+      mouseX.set((clientX / innerWidth - 0.5) * 100)
+      mouseY.set((clientY / innerHeight - 0.5) * 100)
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+    return () => window.removeEventListener("mousemove", handleMouseMove)
+  }, [mouseX, mouseY])
+
+  return (
+    <Box className="absolute inset-0 overflow-hidden">
+      {layers.map((layer, index) => {
+        const x = useTransform(
+          mouseX,
+          [-50, 50],
+          [-layer.speed * 10, layer.speed * 10]
+        )
+        const y = useTransform(
+          mouseY,
+          [-50, 50],
+          [-layer.speed * 10, layer.speed * 10]
+        )
+
+        return (
+          <motion.div
+            key={index}
+            className="absolute inset-0"
+            style={{
+              background: `radial-gradient(circle, ${layer.color}, transparent)`,
+              opacity: layer.opacity,
+              x: paused ? 0 : x,
+              y: paused ? 0 : y,
+            }}
+          />
+        )
+      })}
+    </Box>
+  )
+}
+
+/**
+ * Floating particles background
+ */
+function ParticlesBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused,
+}: {
+  colors: string[]
+  speed: number
+  elementCount: number
+  intensity: number
+  paused: boolean
+}) {
+  const particles = useMemo(
+    () =>
+      Array.from({ length: elementCount }, (_, i) => ({
+        id: i,
+        color: colors[i % colors.length],
+        size: Math.random() * 4 + 2,
+        x: Math.random() * 100,
+        y: Math.random() * 100,
+        duration: (Math.random() * 20 + 20) / speed,
+        delay: Math.random() * 5,
+      })),
+    [elementCount, colors, speed]
+  )
+
+  return (
+    <Box className="absolute inset-0 overflow-hidden">
+      {particles.map((particle) => (
+        <motion.div
+          key={particle.id}
+          className="absolute rounded-full"
+          style={{
+            backgroundColor: particle.color,
+            width: particle.size * intensity,
+            height: particle.size * intensity,
+            opacity: 0.6,
+          }}
+          initial={{
+            x: `${particle.x}%`,
+            y: `${particle.y}%`,
+          }}
+          animate={
+            paused
+              ? {}
+              : {
+                  y: [`${particle.y}%`, `${particle.y - 100}%`],
+                  opacity: [0, 0.6, 0],
+                }
+          }
+          transition={{
+            duration: particle.duration,
+            repeat: Infinity,
+            delay: particle.delay,
+            ease: "linear",
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+/**
+ * Animated background component with multiple animation types
+ */
+export function AnimatedBackground({
+  animation = "gradient",
+  speed = 1,
+  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
+  paused = false,
+  className,
+  style,
+  children,
+  intensity = 1,
+  blur = false,
+  blurAmount = 20,
+  opacity = 1,
+  elementCount = 5,
+  width = "100%",
+  height = "100%",
+  fullscreen = false,
+  parallaxLayers = [
+    { speed: 0.5, color: "#ff6b6b50", opacity: 0.3 },
+    { speed: 1, color: "#4ecdc450", opacity: 0.4 },
+    { speed: 1.5, color: "#45b7d150", opacity: 0.3 },
+  ],
+}: AnimatedBackgroundProps) {
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const isAnimationPaused = paused || prefersReducedMotion
+
+  const containerStyle = useMemo(
+    () => ({
+      width: fullscreen ? "100vw" : width,
+      height: fullscreen ? "100vh" : height,
+      opacity,
+      filter: blur ? `blur(${blurAmount}px)` : undefined,
+      ...style,
+    }),
+    [fullscreen, width, height, opacity, blur, blurAmount, style]
+  )
+
+  const renderAnimation = () => {
+    const props = { colors, speed, intensity, paused: isAnimationPaused }
+
+    switch (animation) {
+      case "blob":
+        return <BlobBackground {...props} elementCount={elementCount} />
+      case "wave":
+        return <WaveBackground {...props} />
+      case "mesh":
+        return <MeshBackground {...props} />
+      case "parallax":
+        return (
+          <ParallaxBackground
+            layers={parallaxLayers}
+            speed={speed}
+            paused={isAnimationPaused}
+          />
+        )
+      case "particles":
+        return <ParticlesBackground {...props} elementCount={elementCount} />
+      default:
+        return <GradientBackground {...props} />
+    }
+  }
+
+  return (
+    <Box
+      className={cn(
+        "relative overflow-hidden",
+        fullscreen && "fixed inset-0 z-0",
+        className
+      )}
+      style={containerStyle}
+    >
+      {renderAnimation()}
+
+      {children && (
+        <Box className="relative z-10 h-full w-full">{children}</Box>
+      )}
+    </Box>
+  )
+}
+
+/**
+ * Preset animated background variations
+ */
+export const AnimatedBackgroundPresets = {
+  /**
+   * Calm gradient flow
+   */
+  CalmGradient: (
+    props: Omit<AnimatedBackgroundProps, "animation" | "colors" | "speed">
+  ) => (
+    <AnimatedBackground
+      animation="gradient"
+      colors={["#667eea", "#764ba2", "#f093fb", "#f5576c"]}
+      speed={0.5}
+      {...props}
+    />
+  ),
+
+  /**
+   * Ocean waves
+   */
+  OceanWaves: (
+    props: Omit<AnimatedBackgroundProps, "animation" | "colors">
+  ) => (
+    <AnimatedBackground
+      animation="wave"
+      colors={["#0093E9", "#80D0C7"]}
+      {...props}
+    />
+  ),
+
+  /**
+   * Floating bubbles
+   */
+  FloatingBubbles: (
+    props: Omit<
+      AnimatedBackgroundProps,
+      "animation" | "colors" | "elementCount"
+    >
+  ) => (
+    <AnimatedBackground
+      animation="blob"
+      colors={["#667eea", "#764ba2", "#f093fb"]}
+      elementCount={8}
+      {...props}
+    />
+  ),
+
+  /**
+   * Cosmic mesh
+   */
+  CosmicMesh: (
+    props: Omit<AnimatedBackgroundProps, "animation" | "colors">
+  ) => (
+    <AnimatedBackground
+      animation="mesh"
+      colors={["#667eea", "#764ba2", "#f093fb", "#f5576c"]}
+      {...props}
+    />
+  ),
+
+  /**
+   * Starfield particles
+   */
+  Starfield: (
+    props: Omit<
+      AnimatedBackgroundProps,
+      "animation" | "colors" | "elementCount"
+    >
+  ) => (
+    <AnimatedBackground
+      animation="particles"
+      colors={["#ffffff", "#f0f0f0", "#e0e0e0"]}
+      elementCount={50}
+      intensity={0.5}
+      {...props}
+    />
+  ),
+
+  /**
+   * Aurora parallax
+   */
+  Aurora: (
+    props: Omit<AnimatedBackgroundProps, "animation" | "parallaxLayers">
+  ) => (
+    <AnimatedBackground
+      animation="parallax"
+      parallaxLayers={[
+        { speed: 0.3, color: "#00ff8850", opacity: 0.4 },
+        { speed: 0.6, color: "#0080ff50", opacity: 0.3 },
+        { speed: 0.9, color: "#8000ff50", opacity: 0.3 },
+        { speed: 1.2, color: "#ff008050", opacity: 0.2 },
+      ]}
+      {...props}
+    />
+  ),
+}
+
+export default AnimatedBackground