@luxfi/ui 7.4.15 → 8.1.0

package/src/animated-text.tsx

@@ -0,0 +1,481 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { Box } from '@hanzo/ui'
+import { AnimatePresence, 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 AnimatedTextProps {
+  /**
+   * Text to animate
+   */
+  text: string
+  /**
+   * Animation type
+   */
+  animation?:
+    | "typewriter"
+    | "wordReveal"
+    | "letterShuffle"
+    | "gradient"
+    | "glitch"
+  /**
+   * Animation duration in milliseconds
+   */
+  duration?: number
+  /**
+   * Delay between characters/words in milliseconds
+   */
+  delay?: number
+  /**
+   * Whether to repeat the animation
+   */
+  repeat?: boolean
+  /**
+   * Repeat delay in milliseconds
+   */
+  repeatDelay?: number
+  /**
+   * Whether to start animation automatically
+   */
+  autoStart?: boolean
+  /**
+   * Callback when animation completes
+   */
+  onComplete?: () => void
+  /**
+   * Custom CSS class
+   */
+  className?: string
+  /**
+   * Custom styling
+   */
+  style?: React.CSSProperties
+  /**
+   * Gradient colors for gradient animation
+   */
+  gradientColors?: string[]
+  /**
+   * Glitch intensity (0-1)
+   */
+  glitchIntensity?: number
+  /**
+   * Cursor character for typewriter
+   */
+  cursor?: string
+  /**
+   * Whether to show cursor
+   */
+  showCursor?: boolean
+}
+
+const letterVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: (i: number) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.05,
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  }),
+}
+
+const wordVariants: Variants = {
+  hidden: { opacity: 0, scale: 0.8, y: 20 },
+  visible: (i: number) => ({
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut",
+    },
+  }),
+}
+
+const glitchVariants: Variants = {
+  glitch: {
+    x: [0, -2, 2, -1, 1, 0],
+    filter: [
+      "hue-rotate(0deg)",
+      "hue-rotate(90deg)",
+      "hue-rotate(180deg)",
+      "hue-rotate(270deg)",
+      "hue-rotate(0deg)",
+    ],
+    transition: {
+      duration: 0.2,
+      repeat: Infinity,
+      repeatType: "reverse",
+    },
+  },
+}
+
+/**
+ * Generate random characters for shuffle effect
+ */
+function getRandomChar(): string {
+  const chars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*"
+  return chars[Math.floor(Math.random() * chars.length)]
+}
+
+/**
+ * Typewriter animation hook
+ */
+function useTypewriter(text: string, speed: number, autoStart: boolean) {
+  const [displayText, setDisplayText] = useState("")
+  const [isComplete, setIsComplete] = useState(false)
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const startAnimation = useCallback(() => {
+    setDisplayText("")
+    setCurrentIndex(0)
+    setIsComplete(false)
+  }, [])
+
+  useEffect(() => {
+    if (!autoStart) return
+    startAnimation()
+  }, [text, autoStart, startAnimation])
+
+  useEffect(() => {
+    if (currentIndex < text.length && !isComplete) {
+      const timer = setTimeout(() => {
+        setDisplayText((prev) => prev + text[currentIndex])
+        setCurrentIndex((prev) => prev + 1)
+      }, speed)
+
+      return () => clearTimeout(timer)
+    } else if (currentIndex >= text.length) {
+      setIsComplete(true)
+    }
+  }, [currentIndex, text, speed, isComplete])
+
+  return { displayText, isComplete, startAnimation }
+}
+
+/**
+ * Letter shuffle animation hook
+ */
+function useLetterShuffle(text: string, duration: number, autoStart: boolean) {
+  const [displayText, setDisplayText] = useState(text)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  const startAnimation = useCallback(() => {
+    setIsAnimating(true)
+    let iterations = 0
+    const maxIterations = text.length
+
+    const interval = setInterval(() => {
+      setDisplayText(() =>
+        text
+          .split("")
+          .map((char, index) => {
+            if (index < iterations) {
+              return text[index]
+            }
+            return char === " " ? " " : getRandomChar()
+          })
+          .join("")
+      )
+
+      if (iterations >= maxIterations) {
+        clearInterval(interval)
+        setDisplayText(text)
+        setIsAnimating(false)
+      }
+
+      iterations += 1 / 3
+    }, duration / maxIterations)
+
+    // Store interval ref for cleanup
+    const currentInterval = interval
+    return () => clearInterval(currentInterval)
+  }, [text, duration])
+
+  useEffect(() => {
+    if (autoStart) {
+      startAnimation()
+    }
+  }, [autoStart, startAnimation])
+
+  return { displayText, isAnimating, startAnimation }
+}
+
+/**
+ * Animated text component with multiple animation types
+ */
+export function AnimatedText({
+  text,
+  animation = "typewriter",
+  duration = 2000,
+  delay = 50,
+  repeat = false,
+  repeatDelay = 1000,
+  autoStart = true,
+  onComplete,
+  className,
+  style,
+  gradientColors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
+  glitchIntensity = 0.5,
+  cursor = "|",
+  showCursor = true,
+}: AnimatedTextProps) {
+  const [animationKey, setAnimationKey] = useState(0)
+  const [showGradient, setShowGradient] = useState(false)
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  // Disable animations if user prefers reduced motion
+  const shouldAnimate = !prefersReducedMotion && autoStart
+
+  const {
+    displayText: typewriterText,
+    isComplete: typewriterComplete,
+    startAnimation: startTypewriter,
+  } = useTypewriter(text, delay, shouldAnimate && animation === "typewriter")
+  const {
+    displayText: shuffleText,
+    isAnimating: shuffleAnimating,
+    startAnimation: startShuffle,
+  } = useLetterShuffle(
+    text,
+    duration,
+    shouldAnimate && animation === "letterShuffle"
+  )
+
+  // Handle repeat animation
+  useEffect(() => {
+    if (!repeat) return
+
+    let timer: NodeJS.Timeout
+
+    if (animation === "typewriter" && typewriterComplete) {
+      timer = setTimeout(() => {
+        startTypewriter()
+      }, repeatDelay)
+    } else if (animation === "letterShuffle" && !shuffleAnimating) {
+      timer = setTimeout(() => {
+        startShuffle()
+      }, repeatDelay)
+    } else if (["wordReveal", "gradient", "glitch"].includes(animation)) {
+      timer = setTimeout(() => {
+        setAnimationKey((prev) => prev + 1)
+      }, duration + repeatDelay)
+    }
+
+    return () => clearTimeout(timer)
+  }, [
+    animation,
+    typewriterComplete,
+    shuffleAnimating,
+    repeat,
+    repeatDelay,
+    duration,
+    startTypewriter,
+    startShuffle,
+  ])
+
+  // Handle completion callback
+  useEffect(() => {
+    if (!onComplete) return
+
+    if (animation === "typewriter" && typewriterComplete) {
+      onComplete()
+    } else if (
+      animation === "letterShuffle" &&
+      !shuffleAnimating &&
+      shuffleText === text
+    ) {
+      onComplete()
+    }
+  }, [
+    animation,
+    typewriterComplete,
+    shuffleAnimating,
+    onComplete,
+    shuffleText,
+    text,
+  ])
+
+  // Gradient animation effect
+  useEffect(() => {
+    if (animation === "gradient") {
+      setShowGradient(true)
+      const timer = setTimeout(() => setShowGradient(false), duration)
+      return () => clearTimeout(timer)
+    }
+  }, [animation, duration, animationKey])
+
+  const gradientStyle = useMemo(() => {
+    if (animation !== "gradient" || !showGradient) return {}
+
+    return {
+      background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
+      backgroundSize: "400% 400%",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      animation: `gradientShift ${duration}ms ease-in-out infinite`,
+    }
+  }, [animation, showGradient, gradientColors, duration])
+
+  const renderContent = () => {
+    // Show final text immediately if reduced motion is preferred
+    if (prefersReducedMotion) {
+      return <span>{text}</span>
+    }
+
+    switch (animation) {
+      case "typewriter":
+        return (
+          <Box tag="span" className="relative">
+            {typewriterText}
+            {showCursor && (
+              <motion.span
+                animate={{ opacity: [0, 1, 0] }}
+                transition={{ duration: 1, repeat: Infinity }}
+                className="ml-1"
+              >
+                {cursor}
+              </motion.span>
+            )}
+          </Box>
+        )
+
+      case "wordReveal":
+        return (
+          <motion.div
+            key={animationKey}
+            className="flex flex-wrap gap-1"
+            initial="hidden"
+            animate="visible"
+            onAnimationComplete={() => onComplete?.()}
+          >
+            {text.split(" ").map((word, i) => (
+              <motion.span
+                key={i}
+                custom={i}
+                variants={wordVariants}
+                className="inline-block"
+              >
+                {word}
+              </motion.span>
+            ))}
+          </motion.div>
+        )
+
+      case "letterShuffle":
+        return <span>{shuffleText}</span>
+
+      case "gradient":
+        return (
+          <motion.span
+            key={animationKey}
+            style={gradientStyle}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            onAnimationComplete={() => onComplete?.()}
+          >
+            {text}
+          </motion.span>
+        )
+
+      case "glitch":
+        return (
+          <motion.div
+            key={animationKey}
+            className="relative"
+            onAnimationComplete={() => onComplete?.()}
+          >
+            <motion.span
+              variants={glitchVariants}
+              animate="glitch"
+              style={{
+                textShadow: `${glitchIntensity * 2}px 0 #ff0000, ${-glitchIntensity * 2}px 0 #00ffff`,
+              }}
+            >
+              {text}
+            </motion.span>
+            <motion.span
+              className="absolute inset-0 opacity-80"
+              variants={glitchVariants}
+              animate="glitch"
+              style={{
+                color: "#ff0000",
+                left: `${glitchIntensity}px`,
+                mixBlendMode: "multiply",
+              }}
+            >
+              {text}
+            </motion.span>
+            <motion.span
+              className="absolute inset-0 opacity-80"
+              variants={glitchVariants}
+              animate="glitch"
+              style={{
+                color: "#00ffff",
+                left: `${-glitchIntensity}px`,
+                mixBlendMode: "multiply",
+              }}
+            >
+              {text}
+            </motion.span>
+          </motion.div>
+        )
+
+      default:
+        return text
+    }
+  }
+
+  return (
+    <>
+      {animation === "gradient" && (
+        <style>{`
+          @keyframes gradientShift {
+            0%,
+            100% {
+              background-position: 0% 50%;
+            }
+            50% {
+              background-position: 100% 50%;
+            }
+          }
+        `}</style>
+      )}
+      <Box className={cn("inline-block", className)} style={style}>
+        <AnimatePresence mode="wait">{renderContent()}</AnimatePresence>
+      </Box>
+    </>
+  )
+}
+
+export default AnimatedText

package/src/animated-tooltip.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+import { AnimatePresence, motion } from "motion/react"
+
+import { cn } from "./utils"
+
+interface AnimatedTooltipProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
+  content: React.ReactNode
+  children: React.ReactNode
+  delay?: number
+}
+
+const AnimatedTooltip = React.forwardRef<HTMLDivElement, AnimatedTooltipProps>(
+  ({ className, content, children, delay = 0, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false)
+
+    return (
+      <Box
+        ref={ref}
+        className={cn("relative inline-block", className)}
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        {...props}
+      >
+        {children}
+        <AnimatePresence>
+          {isVisible && (
+            <motion.div
+              initial={{ opacity: 0, y: 10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 10, scale: 0.95 }}
+              transition={{
+                duration: 0.2,
+                delay: delay / 1000,
+                ease: "easeOut",
+              }}
+              className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1.5 bg-popover text-popover-foreground text-sm rounded-md shadow-md whitespace-nowrap z-50"
+            >
+              {content}
+              <Box className="absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </Box>
+    )
+  }
+)
+
+AnimatedTooltip.displayName = "AnimatedTooltip"
+
+export { AnimatedTooltip }

package/src/announcement.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { X } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+interface AnnouncementProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+  dismissible?: boolean
+  onDismiss?: () => void
+}
+
+const Announcement = React.forwardRef<HTMLDivElement, AnnouncementProps>(
+  ({ className, children, dismissible = true, onDismiss, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(true)
+
+    const handleDismiss = () => {
+      setIsVisible(false)
+      onDismiss?.()
+    }
+
+    if (!isVisible) return null
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "relative flex items-center gap-4 rounded-lg border bg-background px-4 py-3 text-sm",
+          className
+        )}
+        {...props}
+      >
+        <Box className="flex-1">{children}</Box>
+        {dismissible && (
+          <Button
+            variant="ghost"
+            size="icon"
+            {...sx('h-6 w-6')}
+            onClick={handleDismiss}
+          >
+            <X style={css('h-4 w-4')} />
+            <Box tag="span" className="sr-only">Dismiss</Box>
+          </Button>
+        )}
+      </Box>
+    )
+  }
+)
+
+Announcement.displayName = "Announcement"
+
+export { Announcement }

package/src/app-switcher-navigation-bar.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, css, sx } from '@hanzo/ui'
+interface App {
+  id: string
+  name: string
+  icon?: React.ReactNode
+  href?: string
+}
+
+interface AppSwitcherNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  apps: App[]
+  currentApp?: string
+  onAppSwitch?: (appId: string) => void
+}
+
+const AppSwitcherNavigationBar = React.forwardRef<
+  HTMLElement,
+  AppSwitcherNavigationBarProps
+>(({ className, apps, currentApp, onAppSwitch, children, ...props }, ref) => {
+  const current = apps.find((app) => app.id === currentApp) || apps[0]
+
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn(
+        "flex items-center justify-between border-b px-6 py-3",
+        className
+      )}
+      {...props}
+    >
+      <Box className="flex items-center gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" {...sx('flex items-center gap-2')}>
+              {current?.icon}
+              <span>{current?.name}</span>
+              <ChevronDown style={css('h-4 w-4')} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {apps.map((app) => (
+              <DropdownMenuItem
+                key={app.id}
+                onClick={() => {
+                  if (app.href) {
+                    window.location.href = app.href
+                  } else {
+                    onAppSwitch?.(app.id)
+                  }
+                }}
+              >
+                <Box className="flex items-center gap-2">
+                  {app.icon}
+                  <span>{app.name}</span>
+                </Box>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Box className="flex items-center gap-2">{children}</Box>
+      </Box>
+    </Box>
+  )
+})
+
+AppSwitcherNavigationBar.displayName = "AppSwitcherNavigationBar"
+
+export { AppSwitcherNavigationBar, type App }