@luxfi/ui 8.0.0 → 8.1.0

package/src/music-player.tsx

@@ -0,0 +1,413 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import {
+  ChevronDown,
+  ChevronUp,
+  ListMusic,
+  Pause,
+  Play,
+  Repeat,
+  Shuffle,
+  SkipBack,
+  SkipForward,
+  Volume2,
+  VolumeX,
+} from "lucide-react"
+
+import { cn } from "./utils"
+
+import { Button } from "./button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@hanzo/ui"
+import { ScrollArea } from "@hanzo/ui"
+import { Slider } from "./slider"
+
+export interface Track {
+  id: string
+  title: string
+  artist: string
+  album?: string
+  duration: number
+  src: string
+  artwork?: string
+}
+
+interface MusicPlayerProps {
+  tracks: Track[]
+  className?: string
+  autoPlay?: boolean
+  showWaveform?: boolean
+}
+
+function formatTime(seconds: number): string {
+  if (isNaN(seconds)) return "0:00"
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, "0")}`
+}
+
+export function MusicPlayer({
+  tracks,
+  className,
+  autoPlay = false,
+  showWaveform = true,
+}: MusicPlayerProps) {
+  const [currentTrackIndex, setCurrentTrackIndex] = React.useState(0)
+  const [isPlaying, setIsPlaying] = React.useState(false)
+  const [currentTime, setCurrentTime] = React.useState(0)
+  const [duration, setDuration] = React.useState(0)
+  const [volume, setVolume] = React.useState(0.7)
+  const [isMuted, setIsMuted] = React.useState(false)
+  const [isRepeat, setIsRepeat] = React.useState(false)
+  const [isShuffle, setIsShuffle] = React.useState(false)
+  const [showPlaylist, setShowPlaylist] = React.useState(false)
+  const [waveformData, setWaveformData] = React.useState<number[]>([])
+
+  const audioRef = React.useRef<HTMLAudioElement | null>(null)
+  const canvasRef = React.useRef<HTMLCanvasElement | null>(null)
+  const animationRef = React.useRef<number | undefined>(undefined)
+
+  const currentTrack = tracks[currentTrackIndex]
+
+  // Initialize audio element
+  React.useEffect(() => {
+    const audio = new Audio()
+    audioRef.current = audio
+    audio.volume = volume
+
+    const handleTimeUpdate = () => {
+      setCurrentTime(audio.currentTime)
+    }
+
+    const handleLoadedMetadata = () => {
+      setDuration(audio.duration)
+      if (showWaveform) {
+        generateWaveform()
+      }
+    }
+
+    const handleEnded = () => {
+      if (isRepeat) {
+        audio.currentTime = 0
+        audio.play()
+      } else {
+        handleNext()
+      }
+    }
+
+    audio.addEventListener("timeupdate", handleTimeUpdate)
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata)
+    audio.addEventListener("ended", handleEnded)
+
+    return () => {
+      audio.removeEventListener("timeupdate", handleTimeUpdate)
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata)
+      audio.removeEventListener("ended", handleEnded)
+      audio.pause()
+      audio.src = ""
+    }
+  }, [])
+
+  // Update audio source when track changes
+  React.useEffect(() => {
+    if (!audioRef.current || !currentTrack) return
+
+    audioRef.current.src = currentTrack.src
+    setCurrentTime(0)
+
+    if (isPlaying || autoPlay) {
+      audioRef.current.play().catch(console.error)
+      setIsPlaying(true)
+    }
+  }, [currentTrackIndex, currentTrack])
+
+  // Update volume
+  React.useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = isMuted ? 0 : volume
+    }
+  }, [volume, isMuted])
+
+  // Generate waveform data
+  const generateWaveform = () => {
+    const bars = 64
+    const data = []
+    for (let i = 0; i < bars; i++) {
+      data.push(Math.random() * 0.7 + 0.3)
+    }
+    setWaveformData(data)
+  }
+
+  // Animate waveform
+  React.useEffect(() => {
+    if (!showWaveform || !canvasRef.current || !isPlaying) {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+      return
+    }
+
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      const barWidth = canvas.width / waveformData.length
+      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
+      gradient.addColorStop(0, "hsl(var(--primary))")
+      gradient.addColorStop(1, "hsl(var(--primary) / 0.3)")
+
+      waveformData.forEach((height, i) => {
+        const x = i * barWidth
+        const barHeight =
+          height *
+          canvas.height *
+          (0.5 + Math.sin(Date.now() * 0.001 + i * 0.2) * 0.5)
+
+        ctx.fillStyle = gradient
+        ctx.fillRect(x, canvas.height - barHeight, barWidth - 2, barHeight)
+      })
+
+      animationRef.current = requestAnimationFrame(draw)
+    }
+
+    draw()
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [isPlaying, waveformData, showWaveform])
+
+  const handlePlayPause = () => {
+    if (!audioRef.current) return
+
+    if (isPlaying) {
+      audioRef.current.pause()
+      setIsPlaying(false)
+    } else {
+      audioRef.current.play().catch(console.error)
+      setIsPlaying(true)
+    }
+  }
+
+  const handleNext = () => {
+    if (isShuffle) {
+      const nextIndex = Math.floor(Math.random() * tracks.length)
+      setCurrentTrackIndex(nextIndex)
+    } else {
+      setCurrentTrackIndex((prev) => (prev + 1) % tracks.length)
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentTime > 3) {
+      if (audioRef.current) {
+        audioRef.current.currentTime = 0
+      }
+    } else {
+      setCurrentTrackIndex((prev) => (prev - 1 + tracks.length) % tracks.length)
+    }
+  }
+
+  const handleSeek = (value: number[]) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = value[0]
+      setCurrentTime(value[0])
+    }
+  }
+
+  const handleVolumeChange = (value: number[]) => {
+    setVolume(value[0])
+    setIsMuted(false)
+  }
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted)
+  }
+
+  const selectTrack = (index: number) => {
+    setCurrentTrackIndex(index)
+  }
+
+  return (
+    <Box
+      className={cn(
+        "relative w-full rounded-lg border bg-background p-4 shadow-lg",
+        className
+      )}
+    >
+      {/* Album Art and Track Info */}
+      <Box className="mb-4 flex items-center gap-4">
+        <Box className="relative h-20 w-20 overflow-hidden rounded-md bg-muted">
+          {currentTrack?.artwork ? (
+            <Box tag="img"
+              src={currentTrack.artwork}
+              alt={`${currentTrack.title} artwork`}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <Box className="flex h-full w-full items-center justify-center">
+              <ListMusic style={css('h-8 w-8 text-muted-foreground')} />
+            </Box>
+          )}
+        </Box>
+        <Box className="flex-1 space-y-1">
+          <Box tag="h3" className="font-semibold">{currentTrack?.title || "No track"}</Box>
+          <Box tag="p" className="text-sm text-muted-foreground">
+            {currentTrack?.artist || "Unknown artist"}
+          </Box>
+          {currentTrack?.album && (
+            <Box tag="p" className="text-xs text-muted-foreground">
+              {currentTrack.album}
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {/* Waveform Visualization */}
+      {showWaveform && (
+        <Box className="mb-4 h-16 w-full overflow-hidden rounded bg-muted/30">
+          <canvas
+            ref={canvasRef}
+            width={640}
+            height={64}
+            className="h-full w-full"
+          />
+        </Box>
+      )}
+
+      {/* Progress Bar */}
+      <Box className="mb-4 space-y-1">
+        <Slider
+          value={[currentTime]}
+          max={duration || 100}
+          step={0.1}
+          onValueChange={handleSeek}
+          {...sx('w-full')}
+        />
+        <Box className="flex justify-between text-xs text-muted-foreground">
+          <span>{formatTime(currentTime)}</span>
+          <span>{formatTime(duration)}</span>
+        </Box>
+      </Box>
+
+      {/* Controls */}
+      <Box className="mb-4 flex items-center justify-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsShuffle(!isShuffle)}
+          {...sx(cn(isShuffle && "text-primary"))}
+        >
+          <Shuffle style={css('h-4 w-4')} />
+        </Button>
+        <Button variant="ghost" size="icon" onClick={handlePrevious}>
+          <SkipBack style={css('h-5 w-5')} />
+        </Button>
+        <Button size="icon" onClick={handlePlayPause} {...sx('h-10 w-10')}>
+          {isPlaying ? (
+            <Pause style={css('h-5 w-5')} />
+          ) : (
+            <Play style={css('h-5 w-5 ml-0.5')} />
+          )}
+        </Button>
+        <Button variant="ghost" size="icon" onClick={handleNext}>
+          <SkipForward style={css('h-5 w-5')} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsRepeat(!isRepeat)}
+          {...sx(cn(isRepeat && "text-primary"))}
+        >
+          <Repeat style={css('h-4 w-4')} />
+        </Button>
+      </Box>
+
+      {/* Volume Control */}
+      <Box className="mb-4 flex items-center gap-2">
+        <Button variant="ghost" size="icon" onClick={toggleMute}>
+          {isMuted ? (
+            <VolumeX style={css('h-4 w-4')} />
+          ) : (
+            <Volume2 style={css('h-4 w-4')} />
+          )}
+        </Button>
+        <Slider
+          value={[isMuted ? 0 : volume]}
+          max={1}
+          step={0.01}
+          onValueChange={handleVolumeChange}
+          {...sx('w-24')}
+        />
+      </Box>
+
+      {/* Playlist */}
+      <Collapsible open={showPlaylist} onOpenChange={setShowPlaylist}>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" {...sx('w-full justify-between')}>
+            <Box tag="span" className="flex items-center gap-2">
+              <ListMusic style={css('h-4 w-4')} />
+              Playlist ({tracks.length} tracks)
+            </Box>
+            {showPlaylist ? (
+              <ChevronUp style={css('h-4 w-4')} />
+            ) : (
+              <ChevronDown style={css('h-4 w-4')} />
+            )}
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="mt-2">
+          <ScrollArea {...sx('h-48 w-full rounded-md border')}>
+            <Box className="p-2">
+              {tracks.map((track, index) => (
+                <Box tag="button"
+                  key={track.id}
+                  onClick={() => selectTrack(index)}
+                  className={cn(
+                    "flex w-full items-center gap-3 rounded-md p-2 text-left transition-colors hover:bg-accent",
+                    currentTrackIndex === index && "bg-accent"
+                  )}
+                >
+                  <Box className="flex h-10 w-10 items-center justify-center rounded bg-muted">
+                    {currentTrackIndex === index && isPlaying ? (
+                      <Box className="flex items-center gap-0.5">
+                        <Box tag="span" className="h-3 w-0.5 animate-pulse bg-primary" />
+                        <Box tag="span" className="h-4 w-0.5 animate-pulse bg-primary animation-delay-150" />
+                        <Box tag="span" className="h-2 w-0.5 animate-pulse bg-primary animation-delay-300" />
+                      </Box>
+                    ) : (
+                      <Box tag="span" className="text-xs text-muted-foreground">
+                        {index + 1}
+                      </Box>
+                    )}
+                  </Box>
+                  <Box className="flex-1 space-y-0.5">
+                    <Box tag="p" className="text-sm font-medium leading-none">
+                      {track.title}
+                    </Box>
+                    <Box tag="p" className="text-xs text-muted-foreground">
+                      {track.artist}
+                    </Box>
+                  </Box>
+                  <Box tag="span" className="text-xs text-muted-foreground">
+                    {formatTime(track.duration)}
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+    </Box>
+  )
+}

package/src/native-select.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "./utils"
+
+export interface NativeSelectProps
+  extends Omit<React.ComponentProps<"select">, "size"> {
+  size?: "sm" | "default"
+}
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, size = "default", ...props }, ref) => {
+    return (
+      <Box
+        className="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+        data-slot="native-select-wrapper"
+      >
+        <select
+          ref={ref}
+          data-slot="native-select"
+          data-size={size}
+          className={cn(
+            "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            className
+          )}
+          {...props}
+        />
+        <ChevronDown
+          style={css('text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none')}
+          aria-hidden="true"
+          data-slot="native-select-icon"
+        />
+      </Box>
+    )
+  }
+)
+NativeSelect.displayName = "NativeSelect"
+
+const NativeSelectOption = React.forwardRef<
+  HTMLOptionElement,
+  React.ComponentProps<"option">
+>(({ ...props }, ref) => (
+  <option ref={ref} data-slot="native-select-option" {...props} />
+))
+NativeSelectOption.displayName = "NativeSelectOption"
+
+const NativeSelectOptGroup = React.forwardRef<
+  HTMLOptGroupElement,
+  React.ComponentProps<"optgroup">
+>(({ className, ...props }, ref) => (
+  <optgroup
+    ref={ref}
+    data-slot="native-select-optgroup"
+    className={cn(className)}
+    {...props}
+  />
+))
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup"
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

package/src/news-timeline.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function NewsTimeline() {
+  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-timeline.js"
+    script.type = "text/javascript"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      displayMode: "regular",
+      feedMode: "all_symbols",
+      colorTheme: "dark",
+      isTransparent: false,
+      locale: "en",
+      width: "100%",
+      height: 550,
+    })
+
+    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())
+      }
+    }
+  }, [])
+
+  return (
+    <Box className="tradingview-widget-container w-full" ref={container}>
+      <Box className="tradingview-widget-container__widget"></Box>
+    </Box>
+  )
+}
+
+export default memo(NewsTimeline)

package/src/order-entry.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import { useState } from "react"
+import { Box } from '@hanzo/ui'
+
+export interface OrderEntryProps {
+  symbol: string
+  accountBalance: number
+  onPlaceOrder: (order: {
+    symbol: string
+    side: "buy" | "sell"
+    orderType: "market" | "limit"
+    shares: number
+    limitPrice?: number
+  }) => void
+  disabled?: boolean
+}
+
+export function OrderEntry({
+  symbol = "NASDAQ:AAPL",
+  accountBalance = 10000,
+  onPlaceOrder = () => {},
+  disabled = false,
+}: Partial<OrderEntryProps>) {
+  const [orderType, setOrderType] = useState<"market" | "limit">("market")
+  const [orderSide, setOrderSide] = useState<"buy" | "sell">("buy")
+  const [shares, setShares] = useState("")
+  const [limitPrice, setLimitPrice] = useState("")
+
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(":")[1] || symbol
+  }
+
+  const handlePlaceOrder = () => {
+    if (!shares || (orderType === "limit" && !limitPrice)) return
+
+    onPlaceOrder({
+      symbol,
+      side: orderSide,
+      orderType,
+      shares: parseInt(shares),
+      limitPrice: orderType === "limit" ? parseFloat(limitPrice) : undefined,
+    })
+
+    // Reset form
+    setShares("")
+    setLimitPrice("")
+  }
+
+  return (
+    <Box className="p-4 space-y-4">
+      {/* Account Balance */}
+      <Box className="bg-white/5 rounded-lg p-3">
+        <Box className="text-xs text-white/60 mb-1">Buying Power</Box>
+        <Box className="text-lg font-semibold text-white">
+          ${accountBalance.toLocaleString()}
+        </Box>
+      </Box>
+
+      {/* Buy/Sell Toggle */}
+      <Box className="grid grid-cols-2 gap-2">
+        <Box tag="button"
+          onClick={() => setOrderSide("buy")}
+          disabled={disabled}
+          className={`py-2.5 rounded-lg font-semibold transition-all ${
+            orderSide === "buy"
+              ? "bg-success text-white"
+              : "bg-white/5 text-white/60 hover:bg-white/10"
+          } disabled:opacity-50 disabled:cursor-not-allowed`}
+        >
+          Buy
+        </Box>
+        <Box tag="button"
+          onClick={() => setOrderSide("sell")}
+          disabled={disabled}
+          className={`py-2.5 rounded-lg font-semibold transition-all ${
+            orderSide === "sell"
+              ? "bg-danger text-white"
+              : "bg-white/5 text-white/60 hover:bg-white/10"
+          } disabled:opacity-50 disabled:cursor-not-allowed`}
+        >
+          Sell
+        </Box>
+      </Box>
+
+      {/* Order Type */}
+      <div>
+        <Box tag="label" className="text-xs text-white/60 mb-2 block">Order Type</Box>
+        <Box className="grid grid-cols-2 gap-2">
+          <Box tag="button"
+            onClick={() => setOrderType("market")}
+            disabled={disabled}
+            className={`py-2 rounded-lg text-sm font-medium transition-all ${
+              orderType === "market"
+                ? "bg-white/10 text-white"
+                : "bg-white/5 text-white/60 hover:bg-white/10"
+            } disabled:opacity-50 disabled:cursor-not-allowed`}
+          >
+            Market
+          </Box>
+          <Box tag="button"
+            onClick={() => setOrderType("limit")}
+            disabled={disabled}
+            className={`py-2 rounded-lg text-sm font-medium transition-all ${
+              orderType === "limit"
+                ? "bg-white/10 text-white"
+                : "bg-white/5 text-white/60 hover:bg-white/10"
+            } disabled:opacity-50 disabled:cursor-not-allowed`}
+          >
+            Limit
+          </Box>
+        </Box>
+      </div>
+
+      {/* Shares */}
+      <div>
+        <Box tag="label" className="text-xs text-white/60 mb-2 block">Shares</Box>
+        <Box tag="input"
+          type="number"
+          value={shares}
+          onChange={(e) => setShares(e.target.value)}
+          disabled={disabled}
+          className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-success disabled:opacity-50 disabled:cursor-not-allowed"
+          placeholder="0"
+        />
+      </div>
+
+      {/* Limit Price */}
+      {orderType === "limit" && (
+        <div>
+          <Box tag="label" className="text-xs text-white/60 mb-2 block">
+            Limit Price
+          </Box>
+          <Box tag="input"
+            type="number"
+            value={limitPrice}
+            onChange={(e) => setLimitPrice(e.target.value)}
+            disabled={disabled}
+            className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-success disabled:opacity-50 disabled:cursor-not-allowed"
+            placeholder="0.00"
+            step="0.01"
+          />
+        </div>
+      )}
+
+      {/* Place Order Button */}
+      <Box tag="button"
+        onClick={handlePlaceOrder}
+        disabled={disabled || !shares || (orderType === "limit" && !limitPrice)}
+        className={`w-full py-3 rounded-lg font-semibold transition-all ${
+          orderSide === "buy"
+            ? "bg-success hover:bg-success/90 text-white"
+            : "bg-danger hover:bg-danger/90 text-white"
+        } disabled:opacity-50 disabled:cursor-not-allowed`}
+      >
+        {orderSide === "buy" ? "Buy" : "Sell"} {getTickerFromSymbol(symbol)}
+      </Box>
+    </Box>
+  )
+}
+
+export default OrderEntry