@luxfi/ui 8.0.0 → 8.2.0

package/src/3d-text.tsx

@@ -0,0 +1,442 @@
+"use client"
+
+import * as React from "react"
+import { Box, VariantProps, variants } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+const text3DVariants = variants(
+  [
+    "relative inline-block font-bold transform-gpu will-change-transform",
+    "before:absolute before:inset-0 before:z-[-1]",
+    "after:absolute after:inset-0 after:z-[-2]",
+  ],
+  {
+    variants: {
+      variant: {
+        extruded: [
+          "text-white",
+          "before:content-[attr(data-text)] before:text-[var(--color-text-secondary)] before:translate-x-1 before:translate-y-1",
+          "after:content-[attr(data-text)] after:text-[var(--color-text-primary)] before:translate-x-2 after:translate-y-2",
+        ],
+        neon: [
+          "text-white",
+          "before:content-[attr(data-text)] before:text-[var(--color-link-primary)] before:blur-sm before:animate-pulse",
+          "after:content-[attr(data-text)] after:text-[var(--color-link-primary)] after:blur-md after:animate-pulse after:animation-delay-150",
+        ],
+        metallic: [
+          "bg-gradient-to-b from-[var(--color-border-divider)] via-[var(--color-border-divider)] to-[var(--color-border-divider)] bg-clip-text text-transparent",
+          "before:content-[attr(data-text)] before:bg-gradient-to-b before:from-[var(--color-border-divider)] before:to-[var(--color-border-divider)] before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5",
+          "after:content-[attr(data-text)] after:bg-gradient-to-b after:from-[var(--color-border-divider)] after:to-[var(--color-border-divider)] after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1",
+        ],
+        rainbow: [
+          "bg-gradient-to-r from-[var(--lux-state-error)] via-[var(--lux-state-notice)] via-[var(--lux-state-success)] via-[var(--color-link-primary)] to-[var(--color-link-primary)] bg-clip-text text-transparent",
+          "before:content-[attr(data-text)] before:bg-gradient-to-r before:from-[var(--lux-state-error)] before:via-[var(--lux-state-notice)] before:via-[var(--lux-state-success)] before:via-[var(--color-link-primary)] before:to-[var(--color-link-primary)] before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5",
+          "after:content-[attr(data-text)] after:bg-gradient-to-r after:from-[var(--lux-state-error)] after:via-[var(--lux-state-notice)] after:via-[var(--lux-state-success)] after:via-[var(--color-link-primary)] after:to-[var(--color-link-primary)] after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1",
+        ],
+        fire: [
+          "bg-gradient-to-t from-[var(--lux-state-error)] via-[var(--lux-state-notice)] to-[var(--lux-state-notice)] bg-clip-text text-transparent",
+          "before:content-[attr(data-text)] before:bg-gradient-to-t before:from-[var(--lux-state-error)] before:via-[var(--lux-state-notice)] before:to-[var(--lux-state-notice)] before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5",
+          "after:content-[attr(data-text)] after:bg-gradient-to-t after:from-[var(--lux-state-error)] after:via-[var(--lux-state-notice)] after:to-[var(--lux-state-notice)] after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1",
+        ],
+        ice: [
+          "bg-gradient-to-b from-[var(--color-link-primary)] via-[var(--color-link-primary)] to-[var(--color-link-primary)] bg-clip-text text-transparent",
+          "before:content-[attr(data-text)] before:bg-gradient-to-b before:from-[var(--color-link-primary)] before:via-[var(--color-link-primary)] before:to-[var(--color-link-primary)] before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5",
+          "after:content-[attr(data-text)] after:bg-gradient-to-b after:from-[var(--color-link-primary)] after:via-[var(--color-link-primary)] after:to-[var(--color-link-primary)] after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1",
+        ],
+        gold: [
+          "bg-gradient-to-b from-[var(--lux-state-notice)] via-[var(--lux-state-notice)] to-[var(--lux-state-notice)] bg-clip-text text-transparent",
+          "before:content-[attr(data-text)] before:bg-gradient-to-b before:from-[var(--lux-state-notice)] before:via-[var(--lux-state-notice)] before:to-[var(--lux-state-notice)] before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5",
+          "after:content-[attr(data-text)] after:bg-gradient-to-b after:from-[var(--lux-state-notice)] after:via-[var(--lux-state-notice)] after:to-[var(--lux-state-notice)] after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1",
+        ],
+        glass: [
+          "text-white/90 backdrop-blur-sm",
+          "before:content-[attr(data-text)] before:text-white/60 before:blur-[0.5px] before:translate-x-0.5 before:translate-y-0.5",
+          "after:content-[attr(data-text)] after:text-white/30 after:blur-[1px] after:translate-x-1 after:translate-y-1",
+        ],
+      },
+      size: {
+        sm: "text-sm",
+        default: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        "6xl": "text-6xl",
+      },
+      depth: {
+        none: "before:translate-x-0 before:translate-y-0 after:translate-x-0 after:translate-y-0",
+        sm: "before:translate-x-0.5 before:translate-y-0.5 after:translate-x-1 after:translate-y-1",
+        default:
+          "before:translate-x-1 before:translate-y-1 after:translate-x-2 after:translate-y-2",
+        lg: "before:translate-x-1.5 before:translate-y-1.5 after:translate-x-3 after:translate-y-3",
+        xl: "before:translate-x-2 before:translate-y-2 after:translate-x-4 after:translate-y-4",
+      },
+    },
+    defaultVariants: {
+      variant: "extruded",
+      size: "default",
+      depth: "default",
+    },
+  }
+)
+
+interface Text3DProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof text3DVariants> {
+  children: React.ReactNode
+  animate?: boolean
+  rotateOnHover?: boolean
+  glowOnHover?: boolean
+  pulseAnimation?: boolean
+  perspective?: number
+}
+
+const Text3D = React.forwardRef<HTMLSpanElement, Text3DProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      depth,
+      children,
+      animate = false,
+      rotateOnHover = false,
+      glowOnHover = false,
+      pulseAnimation = false,
+      perspective = 1000,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseMove,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const textRef = React.useRef<HTMLSpanElement>(null)
+    const [isHovered, setIsHovered] = React.useState(false)
+    const [rotateTransform, setRotateTransform] = React.useState({ x: 0, y: 0 })
+
+    const updateRotation = React.useCallback(
+      (e: React.MouseEvent<HTMLSpanElement>) => {
+        if (!rotateOnHover || !textRef.current) return
+
+        const rect = textRef.current.getBoundingClientRect()
+        const centerX = rect.left + rect.width / 2
+        const centerY = rect.top + rect.height / 2
+
+        const deltaX = (e.clientX - centerX) / (rect.width / 2)
+        const deltaY = (e.clientY - centerY) / (rect.height / 2)
+
+        setRotateTransform({
+          x: deltaY * -15,
+          y: deltaX * 15,
+        })
+      },
+      [rotateOnHover]
+    )
+
+    const resetRotation = React.useCallback(() => {
+      setRotateTransform({ x: 0, y: 0 })
+    }, [])
+
+    const handleMouseEnter = React.useCallback(
+      (e: React.MouseEvent<HTMLSpanElement>) => {
+        setIsHovered(true)
+        onMouseEnter?.(e)
+      },
+      [onMouseEnter]
+    )
+
+    const handleMouseLeave = React.useCallback(
+      (e: React.MouseEvent<HTMLSpanElement>) => {
+        setIsHovered(false)
+        resetRotation()
+        onMouseLeave?.(e)
+      },
+      [onMouseLeave, resetRotation]
+    )
+
+    const handleMouseMove = React.useCallback(
+      (e: React.MouseEvent<HTMLSpanElement>) => {
+        if (rotateOnHover) {
+          updateRotation(e)
+        }
+        onMouseMove?.(e)
+      },
+      [onMouseMove, rotateOnHover, updateRotation]
+    )
+
+    React.useImperativeHandle(ref, () => textRef.current!)
+
+    const textString = typeof children === "string" ? children : ""
+
+    const textStyle: React.CSSProperties = {
+      ...style,
+      perspective: `${perspective}px`,
+      transform: rotateOnHover
+        ? `perspective(${perspective}px) rotateX(${rotateTransform.x}deg) rotateY(${rotateTransform.y}deg)`
+        : undefined,
+      transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+      filter:
+        glowOnHover && isHovered
+          ? "drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor)"
+          : undefined,
+    }
+
+    return (
+      <Box tag="span"
+        ref={textRef as never}
+        className={cn(
+          text3DVariants({ variant, size, depth }),
+          animate && "animate-bounce",
+          pulseAnimation && "animate-pulse",
+          glowOnHover && "transition-all duration-300",
+          className
+        )}
+        style={textStyle}
+        data-text={textString}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onMouseMove={handleMouseMove}
+        {...props}
+      >
+        {children}
+      </Box>
+    )
+  }
+)
+Text3D.displayName = "Text3D"
+
+// Animated text variants
+const Text3DAnimated = React.forwardRef<
+  HTMLSpanElement,
+  Text3DProps & {
+    animationType?: "typewriter" | "wave" | "flip" | "slide"
+    duration?: number
+    delay?: number
+  }
+>(
+  (
+    {
+      children,
+      animationType = "typewriter",
+      duration = 2000,
+      delay = 0,
+      ...props
+    },
+    ref
+  ) => {
+    const [displayText, setDisplayText] = React.useState("")
+    const [currentIndex, setCurrentIndex] = React.useState(0)
+    const text = typeof children === "string" ? children : ""
+
+    React.useEffect(() => {
+      if (animationType === "typewriter") {
+        const timer = setTimeout(
+          () => {
+            if (currentIndex < text.length) {
+              setDisplayText((prev) => prev + text[currentIndex])
+              setCurrentIndex((prev) => prev + 1)
+            }
+          },
+          delay + (currentIndex * duration) / text.length
+        )
+
+        return () => clearTimeout(timer)
+      } else {
+        setDisplayText(text)
+      }
+    }, [currentIndex, text, animationType, duration, delay])
+
+    if (animationType === "typewriter") {
+      return (
+        <Text3D ref={ref} {...props}>
+          {displayText}
+          <Box tag="span" className="animate-pulse">|</Box>
+        </Text3D>
+      )
+    }
+
+    if (animationType === "wave") {
+      return (
+        <Text3D ref={ref} {...props}>
+          {text.split("").map((char, index) => (
+            <Box tag="span"
+              key={index}
+              className="inline-block animate-bounce"
+              style={{
+                animationDelay: `${delay + index * 100}ms`,
+                animationDuration: `${duration}ms`,
+              }}
+            >
+              {char === " " ? "\u00A0" : char}
+            </Box>
+          ))}
+        </Text3D>
+      )
+    }
+
+    if (animationType === "flip") {
+      return (
+        <Text3D ref={ref} {...props}>
+          {text.split("").map((char, index) => (
+            <Box tag="span"
+              key={index}
+              className="inline-block transition-transform duration-300 hover:rotate-y-180"
+              style={{
+                transformStyle: "preserve-3d",
+                animationDelay: `${delay + index * 50}ms`,
+              }}
+            >
+              {char === " " ? "\u00A0" : char}
+            </Box>
+          ))}
+        </Text3D>
+      )
+    }
+
+    return (
+      <Text3D ref={ref} {...props}>
+        {children}
+      </Text3D>
+    )
+  }
+)
+Text3DAnimated.displayName = "Text3DAnimated"
+
+// Preset text variants
+const Text3DPreset = {
+  Hero: React.forwardRef<
+    HTMLSpanElement,
+    Omit<Text3DProps, "variant" | "size" | "depth">
+  >((props, ref) => (
+    <Text3D
+      ref={ref}
+      variant="rainbow"
+      size="6xl"
+      depth="lg"
+      rotateOnHover
+      glowOnHover
+      {...props}
+    />
+  )),
+
+  Neon: React.forwardRef<
+    HTMLSpanElement,
+    Omit<Text3DProps, "variant" | "size" | "depth">
+  >((props, ref) => (
+    <Text3D
+      ref={ref}
+      variant="neon"
+      size="3xl"
+      depth="default"
+      glowOnHover
+      pulseAnimation
+      {...props}
+    />
+  )),
+
+  Metallic: React.forwardRef<
+    HTMLSpanElement,
+    Omit<Text3DProps, "variant" | "size" | "depth">
+  >((props, ref) => (
+    <Text3D
+      ref={ref}
+      variant="metallic"
+      size="2xl"
+      depth="default"
+      rotateOnHover
+      {...props}
+    />
+  )),
+
+  Fire: React.forwardRef<
+    HTMLSpanElement,
+    Omit<Text3DProps, "variant" | "size" | "depth">
+  >((props, ref) => (
+    <Text3D
+      ref={ref}
+      variant="fire"
+      size="xl"
+      depth="sm"
+      glowOnHover
+      {...props}
+    />
+  )),
+
+  Glass: React.forwardRef<
+    HTMLSpanElement,
+    Omit<Text3DProps, "variant" | "size" | "depth">
+  >((props, ref) => (
+    <Text3D
+      ref={ref}
+      variant="glass"
+      size="lg"
+      depth="sm"
+      rotateOnHover
+      {...props}
+    />
+  )),
+}
+
+// Assign display names
+Text3DPreset.Hero.displayName = "Text3DPreset.Hero"
+Text3DPreset.Neon.displayName = "Text3DPreset.Neon"
+Text3DPreset.Metallic.displayName = "Text3DPreset.Metallic"
+Text3DPreset.Fire.displayName = "Text3DPreset.Fire"
+Text3DPreset.Glass.displayName = "Text3DPreset.Glass"
+
+// Text with floating letters effect
+const Text3DFloating = React.forwardRef<
+  HTMLSpanElement,
+  Text3DProps & {
+    floatIntensity?: number
+    floatSpeed?: number
+  }
+>(({ children, floatIntensity = 5, floatSpeed = 2, ...props }, ref) => {
+  const text = typeof children === "string" ? children : ""
+
+  return (
+    <Text3D ref={ref} {...props}>
+      {text.split("").map((char, index) => (
+        <Box tag="span"
+          key={index}
+          className="inline-block"
+          style={
+            {
+              animation: `float ${floatSpeed}s ease-in-out infinite`,
+              animationDelay: `${index * 0.1}s`,
+              "--float-y": `${floatIntensity}px`,
+            } as React.CSSProperties
+          }
+        >
+          {char === " " ? "\u00A0" : char}
+        </Box>
+      ))}
+      <style>{`
+        @keyframes float {
+          0%,
+          100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(var(--float-y, -10px));
+          }
+        }
+      `}</style>
+    </Text3D>
+  )
+})
+Text3DFloating.displayName = "Text3DFloating"
+
+export {
+  Text3D,
+  Text3DAnimated,
+  Text3DPreset,
+  Text3DFloating,
+  text3DVariants,
+  type Text3DProps,
+}

package/src/advanced-chart.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function AdvancedChart({ symbol = "NASDAQ:AAPL" }: { symbol?: string }) {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === "true") {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = "true"
+
+    const script = document.createElement("script")
+    script.src =
+      "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"
+    script.type = "text/javascript"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      width: "100%",
+      height: "600",
+      symbol,
+      interval: "D",
+      timezone: "Etc/UTC",
+      theme: "dark",
+      style: "1",
+      locale: "en",
+      allow_symbol_change: true,
+      calendar: false,
+      support_host: "https://www.tradingview.com",
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll("script")
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol])
+
+  return (
+    <Box
+      className="tradingview-widget-container w-full h-[600px]"
+      ref={container}
+    >
+      <Box className="tradingview-widget-container__widget h-full"></Box>
+    </Box>
+  )
+}
+
+export default memo(AdvancedChart)

package/src/advanced-navigation-bar.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Box, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@hanzo/ui'
+interface NavItem {
+  title: string
+  href?: string
+  description?: string
+  children?: NavItem[]
+}
+
+interface AdvancedNavigationBarProps extends React.HTMLAttributes<HTMLElement> {
+  items: NavItem[]
+  logo?: React.ReactNode
+}
+
+const AdvancedNavigationBar = React.forwardRef<
+  HTMLElement,
+  AdvancedNavigationBarProps
+>(({ className, items, logo, ...props }, ref) => {
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn(
+        "flex items-center justify-between border-b px-6 py-3",
+        className
+      )}
+      {...props}
+    >
+      {logo && <Box className="flex-shrink-0">{logo}</Box>}
+
+      <NavigationMenu>
+        <NavigationMenuList>
+          {items.map((item, index) => (
+            <NavigationMenuItem key={index}>
+              {item.children ? (
+                <>
+                  <NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <Box tag="ul" className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
+                      {item.children.map((child, childIndex) => (
+                        <li key={childIndex}>
+                          <NavigationMenuLink asChild>
+                            <Box tag="a"
+                              href={child.href}
+                              className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                            >
+                              <Box className="text-sm font-medium leading-none">
+                                {child.title}
+                              </Box>
+                              {child.description && (
+                                <Box tag="p" className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                  {child.description}
+                                </Box>
+                              )}
+                            </Box>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </Box>
+                  </NavigationMenuContent>
+                </>
+              ) : (
+                <NavigationMenuLink asChild>
+                  <Button variant="ghost" asChild>
+                    <a href={item.href}>{item.title}</a>
+                  </Button>
+                </NavigationMenuLink>
+              )}
+            </NavigationMenuItem>
+          ))}
+        </NavigationMenuList>
+      </NavigationMenu>
+    </Box>
+  )
+})
+
+AdvancedNavigationBar.displayName = "AdvancedNavigationBar"
+
+export { AdvancedNavigationBar, type NavItem }

package/src/ai-actions.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Box, Card, sx } from '@hanzo/ui'
+interface AIAction {
+  id: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  onClick?: () => void
+}
+
+interface AIActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  actions: AIAction[]
+}
+
+const AIActions = React.forwardRef<HTMLDivElement, AIActionsProps>(
+  ({ className, actions, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn("grid gap-2 sm:grid-cols-2 lg:grid-cols-3", className)}
+        {...props}
+      >
+        {actions.map((action) => (
+          <Card
+            key={action.id}
+            {...sx('p-4 cursor-pointer hover:bg-accent transition-colors')}
+            onClick={action.onClick}
+          >
+            <Box className="flex items-start space-x-3">
+              {action.icon && (
+                <Box className="flex-shrink-0 text-muted-foreground">
+                  {action.icon}
+                </Box>
+              )}
+              <Box className="flex-1 space-y-1">
+                <Box tag="p" className="text-sm font-medium leading-none">
+                  {action.label}
+                </Box>
+                {action.description && (
+                  <Box tag="p" className="text-sm text-muted-foreground">
+                    {action.description}
+                  </Box>
+                )}
+              </Box>
+            </Box>
+          </Card>
+        ))}
+      </Box>
+    )
+  }
+)
+
+AIActions.displayName = "AIActions"
+
+export { AIActions, type AIAction }