@luxfi/ui 7.4.15 → 8.1.0

package/src/kbd.tsx

@@ -0,0 +1,32 @@
+import { cn } from "./utils"
+import { Box } from '@hanzo/ui'
+
+function Kbd({ className, ...props }: React.ComponentPropsWithoutRef<"kbd">) {
+  return (
+    <Box tag="kbd"
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <Box tag="kbd"
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/src/limelight-nav-navigation-bar.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface LimelightNavNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const LimelightNavNavigationBar = React.forwardRef<
+  HTMLElement,
+  LimelightNavNavigationBarProps
+>(({ className, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn("border-b bg-background", className)}
+      {...props}
+    >
+      <Box className="container flex h-16 items-center gap-6">
+        {items.map((item) => (
+          <Box tag="a"
+            key={item.href}
+            href={item.href}
+            className="text-sm font-medium transition-colors hover:text-primary"
+          >
+            {item.label}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+})
+LimelightNavNavigationBar.displayName = "LimelightNavNavigationBar"
+
+export { LimelightNavNavigationBar }

package/src/limelight-nav.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { Command, Search } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Input } from "./input"
+
+export interface LimelightNavProps extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const LimelightNav = React.forwardRef<HTMLElement, LimelightNavProps>(
+  ({ className, items = [], ...props }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [search, setSearch] = React.useState("")
+
+    React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault()
+          setIsOpen((open) => !open)
+        }
+      }
+      document.addEventListener("keydown", down)
+      return () => document.removeEventListener("keydown", down)
+    }, [])
+
+    const filteredItems = items.filter((item) =>
+      item.label.toLowerCase().includes(search.toLowerCase())
+    )
+
+    return (
+      <>
+        <Box tag="nav"
+          ref={ref}
+          className={cn("flex items-center gap-4", className)}
+          {...props}
+        >
+          <Button
+            variant="outline"
+            onClick={() => setIsOpen(true)}
+            {...sx('relative w-64 justify-start')}
+          >
+            <Search style={css('mr-2 h-4 w-4')} />
+            <Box tag="span" className="text-muted-foreground">Search...</Box>
+            <Box tag="kbd" className="pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+              <Command style={css('h-3 w-3')} />K
+            </Box>
+          </Button>
+          {items.slice(0, 4).map((item) => (
+            <Box tag="a"
+              key={item.href}
+              href={item.href}
+              className="text-sm font-medium transition-colors hover:text-primary"
+            >
+              {item.label}
+            </Box>
+          ))}
+        </Box>
+
+        {isOpen && (
+          <Box
+            className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+            onClick={() => setIsOpen(false)}
+          >
+            <Box
+              className="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-card p-6 shadow-lg"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Input
+                placeholder="Search navigation..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                autoFocus
+                {...sx('mb-4')}
+              />
+              <Box className="max-h-96 space-y-1 overflow-auto">
+                {filteredItems.map((item) => (
+                  <Box tag="a"
+                    key={item.href}
+                    href={item.href}
+                    className="block rounded-md px-4 py-2 hover:bg-accent"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    {item.label}
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          </Box>
+        )}
+      </>
+    )
+  }
+)
+LimelightNav.displayName = "LimelightNav"
+
+export { LimelightNav }

package/src/link.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { Box, sx } from '@hanzo/ui'
 import { cn } from './utils';
 
 // Inline external link arrow icon
@@ -100,10 +100,10 @@ const BASE_CLASSES = 'inline-flex items-center gap-0 cursor-pointer data-[disabl
 
 export const LinkExternalIcon = ({ color }: { color?: string }) => (
   <ArrowIcon
-    className={ cn(
+    {...sx(
       'size-3 align-middle shrink-0',
       'group-hover:text-inherit',
-    ) }
+    )}
     style={ color ? { color } : { color: 'var(--color-icon-secondary)' } }
     aria-hidden="true"
   />
@@ -180,7 +180,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
 
       return (
         <Skeleton loading={ loading } ref={ ref as React.ForwardedRef<HTMLDivElement> } asChild>
-          <a
+          <Box tag="a"
             href={ processedHref }
             className={ cn('group', linkClasses) }
             style={ linkStyle }
@@ -191,7 +191,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           >
             { children }
             { !noIcon && <LinkExternalIcon color={ iconColor }/> }
-          </a>
+          </Box>
         </Skeleton>
       );
     }
@@ -201,7 +201,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     if (href) {
       return (
         <Skeleton loading={ loading } ref={ ref as React.ForwardedRef<HTMLDivElement> } asChild>
-          <a
+          <Box tag="a"
             href={ href }
             className={ linkClasses }
             style={ linkStyle }
@@ -209,20 +209,20 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
             { ...rest }
           >
             { children }
-          </a>
+          </Box>
         </Skeleton>
       );
     }
 
     return (
       <Skeleton loading={ loading } ref={ ref as React.ForwardedRef<HTMLDivElement> } asChild>
-        <span
+        <Box tag="span"
           className={ linkClasses }
           { ...(disabled ? { 'data-disabled': true } : {}) }
           { ...rest as React.HTMLAttributes<HTMLSpanElement> }
         >
           { children }
-        </span>
+        </Box>
       </Skeleton>
     );
   },
@@ -232,7 +232,7 @@ export const LinkBox = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
   function LinkBox(props, ref) {
     const { className, ...rest } = props;
     return (
-      <div
+      <Box
         ref={ ref }
         className={ cn('relative', className) }
         { ...rest }
@@ -276,7 +276,7 @@ export const LinkOverlay = React.forwardRef<HTMLAnchorElement, LinkProps>(
       const processedHref = typeof href === 'string' ? stripUtmParams(href) : href;
 
       return (
-        <a
+        <Box tag="a"
           ref={ ref }
           href={ loading ? undefined : processedHref }
           className={ overlayClasses }
@@ -285,42 +285,42 @@ export const LinkOverlay = React.forwardRef<HTMLAnchorElement, LinkProps>(
           { ...rest }
         >
           { (children || (!noIcon && href)) && (
-            <Skeleton display="inline-flex" alignItems="center" loading={ loading } maxW="100%" h="100%">
+            <Skeleton {...sx('inline-flex items-center max-w-full h-full')} loading={ loading }>
               { children }
               { !noIcon && href && <LinkExternalIcon color={ iconColor }/> }
             </Skeleton>
           ) }
-        </a>
+        </Box>
       );
     }
 
     const content = children ? (
-      <Skeleton display="inline-flex" alignItems="center" loading={ loading } maxW="100%" h="100%">
+      <Skeleton {...sx('inline-flex items-center max-w-full h-full')} loading={ loading }>
         { children }
       </Skeleton>
     ) : null;
 
     if (href) {
       return (
-        <a
+        <Box tag="a"
           ref={ ref }
           href={ href }
           className={ overlayClasses }
           { ...rest }
         >
           { content }
-        </a>
+        </Box>
       );
     }
 
     return (
-      <span
+      <Box tag="span"
         ref={ ref as React.ForwardedRef<HTMLDivElement> }
         className={ overlayClasses }
         { ...rest as React.HTMLAttributes<HTMLSpanElement> }
       >
         { content }
-      </span>
+      </Box>
     );
   },
 );

package/src/list.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+const List = React.forwardRef<
+  HTMLUListElement,
+  React.HTMLAttributes<HTMLUListElement>
+>(({ className, ...props }, ref) => (
+  <Box tag="ul" ref={ref} className={cn("space-y-2", className)} {...props} />
+))
+List.displayName = "List"
+
+const ListItem = React.forwardRef<
+  HTMLLIElement,
+  React.HTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <Box tag="li" ref={ref} className={cn("", className)} {...props} />
+))
+ListItem.displayName = "ListItem"
+
+export { List, ListItem }

package/src/magnetic.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface MagneticProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+  strength?: number
+}
+
+const Magnetic = React.forwardRef<HTMLDivElement, MagneticProps>(
+  ({ className, children, strength = 0.3, ...props }, ref) => {
+    const [position, setPosition] = React.useState({ x: 0, y: 0 })
+    const elementRef = React.useRef<HTMLDivElement>(null)
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+      const element = elementRef.current
+      if (!element) return
+
+      const rect = element.getBoundingClientRect()
+      const centerX = rect.left + rect.width / 2
+      const centerY = rect.top + rect.height / 2
+
+      const deltaX = (e.clientX - centerX) * strength
+      const deltaY = (e.clientY - centerY) * strength
+
+      setPosition({ x: deltaX, y: deltaY })
+    }
+
+    const handleMouseLeave = () => {
+      setPosition({ x: 0, y: 0 })
+    }
+
+    return (
+      <Box
+        ref={elementRef as never}
+        className={cn("transition-transform", className)}
+        style={{
+          transform: `translate(${position.x}px, ${position.y}px)`,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {children}
+      </Box>
+    )
+  }
+)
+Magnetic.displayName = "Magnetic"
+
+export { Magnetic }

package/src/market-overview.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function MarketOverview() {
+  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-market-overview.js"
+    script.type = "text/javascript"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      colorTheme: "dark",
+      dateRange: "12M",
+      locale: "en",
+      largeChartUrl: "",
+      isTransparent: false,
+      showFloatingTooltip: false,
+      plotLineColorGrowing: "rgba(41, 98, 255, 1)",
+      plotLineColorFalling: "rgba(41, 98, 255, 1)",
+      gridLineColor: "rgba(240, 243, 250, 0)",
+      scaleFontColor: "#DBDBDB",
+      belowLineFillColorGrowing: "rgba(41, 98, 255, 0.12)",
+      belowLineFillColorFalling: "rgba(41, 98, 255, 0.12)",
+      belowLineFillColorGrowingBottom: "rgba(41, 98, 255, 0)",
+      belowLineFillColorFallingBottom: "rgba(41, 98, 255, 0)",
+      symbolActiveColor: "rgba(41, 98, 255, 0.12)",
+      tabs: [
+        {
+          title: "Indices",
+          symbols: [
+            { s: "FOREXCOM:SPXUSD", d: "S&P 500 Index" },
+            { s: "FOREXCOM:NSXUSD", d: "US 100 Cash CFD" },
+            { s: "FOREXCOM:DJI", d: "Dow Jones Industrial Average Index" },
+            { s: "INDEX:NKY", d: "Japan 225" },
+            { s: "INDEX:DEU40", d: "DAX Index" },
+            { s: "FOREXCOM:UKXGBP", d: "FTSE 100 Index" },
+          ],
+          originalTitle: "Indices",
+        },
+        {
+          title: "Futures",
+          symbols: [
+            { s: "BMFBOVESPA:ISP1!", d: "S&P 500" },
+            { s: "BMFBOVESPA:EUR1!", d: "Euro" },
+            { s: "CMCMARKETS:GOLD", d: "Gold" },
+            { s: "PYTH:WTI3!", d: "WTI Crude Oil" },
+            { s: "BMFBOVESPA:CCM1!", d: "Corn" },
+          ],
+          originalTitle: "Futures",
+        },
+        {
+          title: "Bonds",
+          symbols: [
+            { s: "EUREX:FGBL1!", d: "Euro Bund" },
+            { s: "EUREX:FBTP1!", d: "Euro BTP" },
+            { s: "EUREX:FGBM1!", d: "Euro BOBL" },
+          ],
+          originalTitle: "Bonds",
+        },
+        {
+          title: "Forex",
+          symbols: [
+            { s: "FX:EURUSD", d: "EUR to USD" },
+            { s: "FX:GBPUSD", d: "GBP to USD" },
+            { s: "FX:USDJPY", d: "USD to JPY" },
+            { s: "FX:USDCHF", d: "USD to CHF" },
+            { s: "FX:AUDUSD", d: "AUD to USD" },
+            { s: "FX:USDCAD", d: "USD to CAD" },
+          ],
+          originalTitle: "Forex",
+        },
+      ],
+      support_host: "https://www.tradingview.com",
+      backgroundColor: "#0f0f0f",
+      width: "100%",
+      height: "550",
+      showSymbolLogo: true,
+      showChart: true,
+    })
+
+    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(MarketOverview)

package/src/marquee.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
+  repeat?: number
+  reverse?: boolean
+  pauseOnHover?: boolean
+  vertical?: boolean
+}
+
+const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(
+  (
+    {
+      className,
+      children,
+      repeat = 2,
+      reverse = false,
+      pauseOnHover = false,
+      vertical = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "group flex overflow-hidden",
+          vertical ? "flex-col" : "flex-row",
+          className
+        )}
+        {...props}
+      >
+        {Array.from({ length: repeat }).map((_, i) => (
+          <Box
+            key={i}
+            className={cn(
+              "flex shrink-0",
+              vertical
+                ? "animate-marquee-vertical flex-col"
+                : "animate-marquee",
+              reverse &&
+                (vertical
+                  ? "[animation-direction:reverse]"
+                  : "[animation-direction:reverse]"),
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            )}
+          >
+            {children}
+          </Box>
+        ))}
+      </Box>
+    )
+  }
+)
+Marquee.displayName = "Marquee"
+
+export { Marquee }

package/src/menu-dock.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface MenuDockItem {
+  icon: React.ReactNode
+  label: string
+  onClick?: () => void
+  active?: boolean
+}
+
+export interface MenuDockProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: MenuDockItem[]
+  orientation?: "horizontal" | "vertical"
+}
+
+const MenuDock = React.forwardRef<HTMLDivElement, MenuDockProps>(
+  ({ className, items, orientation = "horizontal", ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "flex gap-2 rounded-full border bg-background/95 p-2 shadow-lg backdrop-blur",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        )}
+        {...props}
+      >
+        {items.map((item, index) => (
+          <Box tag="button"
+            key={index}
+            onClick={item.onClick}
+            className={cn(
+              "group relative flex items-center justify-center rounded-full p-3 transition-colors hover:bg-accent",
+              item.active &&
+                "bg-primary text-primary-foreground hover:bg-primary/90"
+            )}
+            title={item.label}
+          >
+            {item.icon}
+            <Box tag="span" className="sr-only">{item.label}</Box>
+            <Box tag="span" className="absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 transition-opacity group-hover:opacity-100">
+              {item.label}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    )
+  }
+)
+MenuDock.displayName = "MenuDock"
+
+export { MenuDock }