@luxfi/ui 8.0.0 → 8.1.0

package/src/combobox.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, css, sx } from '@hanzo/ui'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@hanzo/ui"
+
+export interface ComboboxOption {
+  value: string
+  label: string
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  emptyText?: string
+}
+
+export function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Select option...",
+  emptyText = "No option found.",
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+  const [searchValue, setSearchValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          {...sx('w-full justify-between')}
+        >
+          {value
+            ? options.find((option) => option.value === value)?.label
+            : placeholder}
+          <ChevronsUpDown style={css('ml-2 h-4 w-4 shrink-0 opacity-50')} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent {...sx('w-full p-0')}>
+        <Command>
+          <CommandInput
+            placeholder="Search..."
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange?.(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    style={css(cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    ))}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/communication-navigation-bar.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { MessageSquare, Phone, Video } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface CommunicationNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  contactName?: string
+}
+
+const CommunicationNavigationBar = React.forwardRef<
+  HTMLElement,
+  CommunicationNavigationBarProps
+>(({ className, contactName, ...props }, ref) => {
+  return (
+    <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+      <Box className="container flex h-16 items-center justify-between">
+        <Box className="flex items-center gap-3">
+          <Box tag="h2" className="text-lg font-semibold">{contactName}</Box>
+        </Box>
+        <Box className="flex gap-2">
+          <Button variant="ghost" size="icon">
+            <Phone style={css('h-5 w-5')} />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Video style={css('h-5 w-5')} />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <MessageSquare style={css('h-5 w-5')} />
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  )
+})
+CommunicationNavigationBar.displayName = "CommunicationNavigationBar"
+
+export { CommunicationNavigationBar }

package/src/company-profile.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+export interface CompanyProfileProps {
+  symbol?: string
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: "light" | "dark"
+  isTransparent?: boolean
+}
+
+export default function CompanyProfile({
+  symbol = "NASDAQ:AAPL",
+  width = "100%",
+  height = "100%",
+  locale = "en",
+  colorTheme = "dark",
+  isTransparent = false,
+}: CompanyProfileProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === "true") {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = "true"
+
+    const script = document.createElement("script")
+    script.src =
+      "https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      width,
+      height,
+      colorTheme,
+      isTransparent,
+      symbol,
+      locale,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll("script")
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, width, height, locale, colorTheme, isTransparent])
+
+  return (
+    <Box className="tradingview-widget-container" ref={containerRef}>
+      <Box className="tradingview-widget-container__widget"></Box>
+    </Box>
+  )
+}

package/src/comparison.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { Check, X } from "lucide-react"
+
+import { cn } from "./utils"
+
+export interface ComparisonItem {
+  label: string
+  value: boolean | string
+}
+
+export interface ComparisonColumn {
+  title: string
+  items: ComparisonItem[]
+  highlighted?: boolean
+}
+
+export interface ComparisonProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns: ComparisonColumn[]
+}
+
+const Comparison = React.forwardRef<HTMLDivElement, ComparisonProps>(
+  ({ className, columns, ...props }, ref) => {
+    const maxItems = Math.max(...columns.map((col) => col.items.length))
+
+    return (
+      <Box ref={ref} className={cn("overflow-x-auto", className)} {...props}>
+        <Box
+          className="grid gap-4"
+          style={{ gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}
+        >
+          {columns.map((column, colIndex) => (
+            <Box
+              key={colIndex}
+              className={cn(
+                "rounded-lg border p-6",
+                column.highlighted && "border-primary shadow-lg"
+              )}
+            >
+              <Box tag="h3" className="mb-6 text-lg font-semibold">{column.title}</Box>
+              <Box className="space-y-4">
+                {column.items.map((item, itemIndex) => (
+                  <Box key={itemIndex} className="flex items-center gap-3">
+                    {typeof item.value === "boolean" ? (
+                      item.value ? (
+                        <Check style={css('h-5 w-5 text-[var(--lux-state-success)]')} />
+                      ) : (
+                        <X style={css('h-5 w-5 text-[var(--lux-state-error)]')} />
+                      )
+                    ) : (
+                      <Box tag="span" className="font-medium">{item.value}</Box>
+                    )}
+                    <Box tag="span" className="text-sm">{item.label}</Box>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+)
+Comparison.displayName = "Comparison"
+
+export { Comparison }

package/src/context-switcher-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 ContextSwitcherNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const ContextSwitcherNavigationBar = React.forwardRef<
+  HTMLElement,
+  ContextSwitcherNavigationBarProps
+>(({ 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>
+  )
+})
+ContextSwitcherNavigationBar.displayName = "ContextSwitcherNavigationBar"
+
+export { ContextSwitcherNavigationBar }

package/src/credit-card.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { CreditCard as CreditCardIcon } from "lucide-react"
+
+import { cn } from "./utils"
+
+export interface CreditCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  number?: string
+  name?: string
+  expiry?: string
+  cvv?: string
+  variant?: "default" | "minimal"
+}
+
+const CreditCard = React.forwardRef<HTMLDivElement, CreditCardProps>(
+  (
+    {
+      className,
+      number = "•••• •••• •••• ••••",
+      name = "CARD HOLDER",
+      expiry = "MM/YY",
+      cvv,
+      variant = "default",
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "relative aspect-[1.586/1] w-full max-w-sm rounded-xl p-6",
+          variant === "default"
+            ? "bg-gradient-to-br from-[var(--color-border-divider)] to-[var(--color-border-divider)] text-white shadow-2xl"
+            : "border-2 bg-background",
+          className
+        )}
+        {...props}
+      >
+        <Box className="flex h-full flex-col justify-between">
+          <Box className="flex items-start justify-between">
+            <CreditCardIcon style={css('h-10 w-10')} />
+            {cvv && (
+              <Box className="rounded bg-white/10 px-2 py-1 text-xs">
+                CVV: {cvv}
+              </Box>
+            )}
+          </Box>
+
+          <Box className="space-y-4">
+            <Box className="text-lg tracking-widest">{number}</Box>
+            <Box className="flex items-end justify-between">
+              <div>
+                <Box className="text-xs opacity-70">Card Holder</Box>
+                <Box className="text-sm font-medium">{name}</Box>
+              </div>
+              <div>
+                <Box className="text-xs opacity-70">Expires</Box>
+                <Box className="text-sm font-medium">{expiry}</Box>
+              </div>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+)
+CreditCard.displayName = "CreditCard"
+
+export { CreditCard }

package/src/crypto-screener.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function CryptoScreener() {
+  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-screener.js"
+    script.type = "text/javascript"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      defaultColumn: "overview",
+      screener_type: "crypto_mkt",
+      displayCurrency: "USD",
+      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(CryptoScreener)

package/src/cursor.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface CursorProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+  cursorText?: string
+  cursorSize?: number
+}
+
+const Cursor = React.forwardRef<HTMLDivElement, CursorProps>(
+  ({ className, children, cursorText, cursorSize = 20, ...props }, ref) => {
+    const [position, setPosition] = React.useState({ x: 0, y: 0 })
+    const [isHovered, setIsHovered] = React.useState(false)
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+      const rect = e.currentTarget.getBoundingClientRect()
+      setPosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      })
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn("relative cursor-none", className)}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        {...props}
+      >
+        {children}
+        {isHovered && (
+          <Box
+            className="pointer-events-none absolute z-50 flex items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm transition-transform"
+            style={{
+              left: position.x,
+              top: position.y,
+              width: cursorSize,
+              height: cursorSize,
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            {cursorText && (
+              <Box tag="span" className="text-xs font-medium text-primary">
+                {cursorText}
+              </Box>
+            )}
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+Cursor.displayName = "Cursor"
+
+export { Cursor }

package/src/dashboard-navigation-bar.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { Bell, Search } from "lucide-react"
+
+import { cn } from "./utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@hanzo/ui"
+import { Button } from "./button"
+
+export interface DashboardNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  title?: string
+  user?: { name: string; avatar?: string }
+}
+
+const DashboardNavigationBar = React.forwardRef<
+  HTMLElement,
+  DashboardNavigationBarProps
+>(({ className, title, user, ...props }, ref) => {
+  return (
+    <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+      <Box className="container flex h-16 items-center justify-between">
+        <Box tag="h1" className="text-xl font-semibold">{title}</Box>
+        <Box className="flex items-center gap-4">
+          <Button variant="ghost" size="icon">
+            <Search style={css('h-5 w-5')} />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Bell style={css('h-5 w-5')} />
+          </Button>
+          {user && (
+            <Avatar>
+              <AvatarImage src={user.avatar} />
+              <AvatarFallback>{user.name[0]}</AvatarFallback>
+            </Avatar>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  )
+})
+DashboardNavigationBar.displayName = "DashboardNavigationBar"
+
+export { DashboardNavigationBar }

package/src/dialog-stack.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { X } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface DialogStackItem {
+  id: string
+  title: string
+  content: React.ReactNode
+}
+
+export interface DialogStackProps extends React.HTMLAttributes<HTMLDivElement> {
+  dialogs: DialogStackItem[]
+  onClose?: (id: string) => void
+}
+
+const DialogStack = React.forwardRef<HTMLDivElement, DialogStackProps>(
+  ({ className, dialogs, onClose, ...props }, ref) => {
+    return (
+      <Box ref={ref} className={cn("relative", className)} {...props}>
+        {dialogs.map((dialog, index) => (
+          <Box
+            key={dialog.id}
+            className={cn(
+              "absolute inset-0 rounded-lg border bg-background p-6 shadow-lg transition-transform"
+            )}
+            style={{
+              transform: `translate(${index * 10}px, ${index * 10}px)`,
+              zIndex: index,
+            }}
+          >
+            <Box className="mb-4 flex items-center justify-between">
+              <Box tag="h3" className="text-lg font-semibold">{dialog.title}</Box>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onClose?.(dialog.id)}
+              >
+                <X style={css('h-4 w-4')} />
+              </Button>
+            </Box>
+            <div>{dialog.content}</div>
+          </Box>
+        ))}
+      </Box>
+    )
+  }
+)
+DialogStack.displayName = "DialogStack"
+
+export { DialogStack }