@luxfi/ui 7.4.15 → 8.1.0

package/src/financials.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+export interface FinancialsProps {
+  symbol?: string
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: "light" | "dark"
+  isTransparent?: boolean
+  displayMode?: "regular" | "compact" | "adaptive"
+  largeChartUrl?: string
+}
+
+export default function Financials({
+  symbol = "NASDAQ:AAPL",
+  width = "100%",
+  height = "500",
+  locale = "en",
+  colorTheme = "dark",
+  isTransparent = false,
+  displayMode = "adaptive",
+  largeChartUrl = "",
+}: FinancialsProps) {
+  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-financials.js"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      colorTheme,
+      isTransparent,
+      largeChartUrl,
+      displayMode,
+      width,
+      height,
+      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,
+    displayMode,
+    largeChartUrl,
+  ])
+
+  return (
+    <Box
+      className="tradingview-widget-container w-full h-[500px]"
+      ref={containerRef}
+    >
+      <Box className="tradingview-widget-container__widget h-full"></Box>
+    </Box>
+  )
+}

package/src/forex-screener.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function ForexScreener() {
+  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({
+      market: "forex",
+      showToolbar: true,
+      defaultColumn: "overview",
+      defaultScreen: "general",
+      isTransparent: false,
+      locale: "en",
+      colorTheme: "dark",
+      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(ForexScreener)

package/src/gantt.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface GanttProps extends React.HTMLAttributes<HTMLDivElement> {
+  tasks?: Array<{
+    id: string
+    name: string
+    start: Date
+    end: Date
+    progress?: number
+  }>
+}
+
+const Gantt = React.forwardRef<HTMLDivElement, GanttProps>(
+  ({ className, tasks = [], ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "rounded-lg border bg-card text-card-foreground shadow-sm",
+          className
+        )}
+        {...props}
+      >
+        <Box className="p-6">
+          <Box className="space-y-4">
+            {tasks.length === 0 ? (
+              <Box className="flex items-center justify-center p-8">
+                <Box tag="p" className="text-sm text-muted-foreground">
+                  No tasks available. Add tasks to display Gantt chart.
+                </Box>
+              </Box>
+            ) : (
+              tasks.map((task) => (
+                <Box key={task.id} className="space-y-2">
+                  <Box className="flex items-center justify-between text-sm">
+                    <Box tag="span" className="font-medium">{task.name}</Box>
+                    <Box tag="span" className="text-muted-foreground">
+                      {task.progress ?? 0}%
+                    </Box>
+                  </Box>
+                  <Box className="h-8 rounded-md bg-muted">
+                    <Box
+                      className="h-full rounded-md bg-primary"
+                      style={{ width: `${task.progress ?? 0}%` }}
+                    />
+                  </Box>
+                  <Box className="flex justify-between text-xs text-muted-foreground">
+                    <span>{task.start.toLocaleDateString()}</span>
+                    <span>{task.end.toLocaleDateString()}</span>
+                  </Box>
+                </Box>
+              ))
+            )}
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+)
+
+Gantt.displayName = "Gantt"
+
+export { Gantt }

package/src/grid-pattern.tsx

@@ -0,0 +1,353 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface GridPatternProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Grid pattern variant */
+  variant?: "dots" | "lines" | "crosses" | "plus" | "squares"
+  /** Size of grid elements */
+  size?: number | { width?: number; height?: number }
+  /** Spacing between grid elements */
+  gap?: number | { x?: number; y?: number }
+  /** Color of grid elements */
+  color?: string
+  /** Opacity of grid elements */
+  opacity?: number
+  /** Stroke width for line-based patterns */
+  strokeWidth?: number
+  /** Enable fade effect */
+  fade?: boolean | "edges" | "center" | "radial"
+  /** Gradient overlay */
+  gradient?: {
+    from?: string
+    via?: string
+    to?: string
+    opacity?: number
+  }
+  /** Animation configuration */
+  animation?: {
+    duration?: number
+    direction?: "normal" | "reverse" | "alternate"
+    timing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"
+  }
+  /** Position offset */
+  offset?: { x?: number; y?: number }
+  /** Maximum render area (for performance) */
+  maxArea?: { width?: number; height?: number }
+}
+
+const GridPattern = React.forwardRef<HTMLDivElement, GridPatternProps>(
+  (
+    {
+      variant = "dots",
+      size = 4,
+      gap = 20,
+      color = "currentColor",
+      opacity = 0.4,
+      strokeWidth = 1,
+      fade = false,
+      gradient,
+      animation,
+      offset,
+      maxArea,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const patternId = React.useId()
+    const maskId = React.useId()
+    const gradientId = React.useId()
+
+    const normalizedSize =
+      typeof size === "number"
+        ? { width: size, height: size }
+        : { width: size.width ?? 4, height: size.height ?? 4 }
+
+    const normalizedGap =
+      typeof gap === "number"
+        ? { x: gap, y: gap }
+        : { x: gap.x ?? 20, y: gap.y ?? 20 }
+
+    const normalizedOffset = {
+      x: offset?.x ?? 0,
+      y: offset?.y ?? 0,
+    }
+
+    const renderPattern = () => {
+      switch (variant) {
+        case "dots":
+          return (
+            <circle
+              cx={normalizedSize.width / 2}
+              cy={normalizedSize.height / 2}
+              r={normalizedSize.width / 2}
+              fill={color}
+              opacity={opacity}
+            />
+          )
+
+        case "lines":
+          return (
+            <>
+              <line
+                x1="0"
+                y1="0"
+                x2="0"
+                y2={normalizedGap.y}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                opacity={opacity}
+              />
+              <line
+                x1="0"
+                y1="0"
+                x2={normalizedGap.x}
+                y2="0"
+                stroke={color}
+                strokeWidth={strokeWidth}
+                opacity={opacity}
+              />
+            </>
+          )
+
+        case "crosses":
+          return (
+            <>
+              <line
+                x1={normalizedSize.width / 2}
+                y1="0"
+                x2={normalizedSize.width / 2}
+                y2={normalizedSize.height}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                opacity={opacity}
+              />
+              <line
+                x1="0"
+                y1={normalizedSize.height / 2}
+                x2={normalizedSize.width}
+                y2={normalizedSize.height / 2}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                opacity={opacity}
+              />
+            </>
+          )
+
+        case "plus":
+          return (
+            <path
+              d={`M ${normalizedSize.width / 2} 0 L ${normalizedSize.width / 2} ${normalizedSize.height} M 0 ${normalizedSize.height / 2} L ${normalizedSize.width} ${normalizedSize.height / 2}`}
+              stroke={color}
+              strokeWidth={strokeWidth}
+              opacity={opacity}
+              fill="none"
+              strokeLinecap="round"
+            />
+          )
+
+        case "squares":
+          return (
+            <rect
+              width={normalizedSize.width}
+              height={normalizedSize.height}
+              fill="none"
+              stroke={color}
+              strokeWidth={strokeWidth}
+              opacity={opacity}
+            />
+          )
+
+        default:
+          return null
+      }
+    }
+
+    const renderFadeMask = () => {
+      if (!fade) return null
+
+      switch (fade) {
+        case "edges":
+        case true:
+          return (
+            <linearGradient id={maskId} gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="white" stopOpacity="0" />
+              <stop offset="10%" stopColor="white" stopOpacity="1" />
+              <stop offset="90%" stopColor="white" stopOpacity="1" />
+              <stop offset="100%" stopColor="white" stopOpacity="0" />
+            </linearGradient>
+          )
+
+        case "center":
+          return (
+            <radialGradient id={maskId} gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="white" stopOpacity="1" />
+              <stop offset="70%" stopColor="white" stopOpacity="1" />
+              <stop offset="100%" stopColor="white" stopOpacity="0" />
+            </radialGradient>
+          )
+
+        case "radial":
+          return (
+            <radialGradient id={maskId} gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="white" stopOpacity="0" />
+              <stop offset="30%" stopColor="white" stopOpacity="1" />
+              <stop offset="100%" stopColor="white" stopOpacity="1" />
+            </radialGradient>
+          )
+
+        default:
+          return null
+      }
+    }
+
+    const animationStyle = animation
+      ? {
+          animation: `grid-pattern-move ${animation.duration ?? 10}s ${
+            animation.timing ?? "linear"
+          } infinite ${animation.direction ?? "normal"}`,
+        }
+      : {}
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "pointer-events-none absolute inset-0 overflow-hidden",
+          className
+        )}
+        style={{
+          ...style,
+          ...animationStyle,
+        }}
+        {...props}
+      >
+        <svg
+          className="absolute h-full w-full"
+          style={{
+            transform: `translate(${normalizedOffset.x}px, ${normalizedOffset.y}px)`,
+          }}
+        >
+          <defs>
+            <pattern
+              id={patternId}
+              x="0"
+              y="0"
+              width={normalizedGap.x}
+              height={normalizedGap.y}
+              patternUnits="userSpaceOnUse"
+            >
+              {renderPattern()}
+            </pattern>
+            {renderFadeMask()}
+            {gradient && (
+              <linearGradient
+                id={gradientId}
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="100%"
+              >
+                <stop offset="0%" stopColor={gradient.from ?? "transparent"} />
+                {gradient.via && <stop offset="50%" stopColor={gradient.via} />}
+                <stop offset="100%" stopColor={gradient.to ?? "transparent"} />
+              </linearGradient>
+            )}
+          </defs>
+
+          <rect
+            width={maxArea?.width ?? "100%"}
+            height={maxArea?.height ?? "100%"}
+            fill={`url(#${patternId})`}
+            mask={fade ? `url(#${maskId})` : undefined}
+          />
+
+          {gradient && (
+            <rect
+              width={maxArea?.width ?? "100%"}
+              height={maxArea?.height ?? "100%"}
+              fill={`url(#${gradientId})`}
+              opacity={gradient.opacity ?? 0.5}
+              className={'mix-blend-multiply dark:mix-blend-screen'} style={css('mix-blend-multiply dark:mix-blend-screen')}
+            />
+          )}
+        </svg>
+
+        <style>{`
+          @keyframes grid-pattern-move {
+            0% {
+              transform: translate(0, 0);
+            }
+            100% {
+              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);
+            }
+          }
+        `}</style>
+      </Box>
+    )
+  }
+)
+
+GridPattern.displayName = "GridPattern"
+
+// Preset configurations
+export const GridPatternPresets = {
+  dotMatrix: {
+    variant: "dots" as const,
+    size: 3,
+    gap: 30,
+    opacity: 0.3,
+  },
+  fineDots: {
+    variant: "dots" as const,
+    size: 1,
+    gap: 10,
+    opacity: 0.4,
+  },
+  gridLines: {
+    variant: "lines" as const,
+    gap: 40,
+    strokeWidth: 1,
+    opacity: 0.2,
+  },
+  crosshatch: {
+    variant: "crosses" as const,
+    size: 10,
+    gap: 20,
+    strokeWidth: 1,
+    opacity: 0.3,
+  },
+  blueprint: {
+    variant: "lines" as const,
+    gap: 20,
+    strokeWidth: 0.5,
+    color: "#3b82f6",
+    opacity: 0.3,
+  },
+  graph: {
+    variant: "lines" as const,
+    gap: { x: 50, y: 50 },
+    strokeWidth: 1,
+    opacity: 0.15,
+    fade: "edges" as const,
+  },
+  isometric: {
+    variant: "lines" as const,
+    gap: { x: 30, y: 17.32 }, // 30deg isometric
+    strokeWidth: 0.5,
+    opacity: 0.2,
+  },
+  hexagon: {
+    variant: "dots" as const,
+    size: 2,
+    gap: { x: 30, y: 26 }, // Hexagonal pattern
+    opacity: 0.3,
+  },
+}
+
+export { GridPattern }

package/src/hooks/use-mobile.ts

@@ -0,0 +1,29 @@
+'use client'
+
+/**
+ * Is this a phone-width viewport?
+ *
+ * A media query rather than a user-agent string: what a layout needs to know is
+ * how much room it has, and a narrow window on a desktop wants the same answer
+ * as a phone does. 768px is the `md` breakpoint the rest of the package uses.
+ *
+ * Starts `false` on the server, where there is no viewport to ask, and corrects
+ * on mount — so the markup is the desktop one and hydration does not mismatch.
+ */
+import { useEffect, useState } from 'react'
+
+const PHONE = '(max-width: 767px)'
+
+export function useIsMobile(): boolean {
+  const [narrow, setNarrow] = useState(false)
+  useEffect(() => {
+    const q = window.matchMedia(PHONE)
+    const read = () => setNarrow(q.matches)
+    read()
+    q.addEventListener('change', read)
+    return () => q.removeEventListener('change', read)
+  }, [])
+  return narrow
+}
+
+export default useIsMobile

package/src/icon-navigation-bar.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface IconNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ icon: React.ReactNode; label: string; href: string }>
+}
+
+const IconNavigationBar = React.forwardRef<HTMLElement, IconNavigationBarProps>(
+  ({ className, items = [], ...props }, ref) => {
+    return (
+      <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+        <Box className="container flex h-16 items-center justify-center gap-8">
+          {items.map((item) => (
+            <Box tag="a"
+              key={item.href}
+              href={item.href}
+              className="flex flex-col items-center gap-1 transition-colors hover:text-primary"
+              title={item.label}
+            >
+              {item.icon}
+              <Box tag="span" className="text-xs">{item.label}</Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+)
+IconNavigationBar.displayName = "IconNavigationBar"
+
+export { IconNavigationBar }

package/src/image-crop.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { Crop, RotateCw, ZoomIn, ZoomOut } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface ImageCropProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string
+  onCrop?: (croppedImage: string) => void
+  aspect?: number
+}
+
+const ImageCrop = React.forwardRef<HTMLDivElement, ImageCropProps>(
+  ({ className, src, onCrop, aspect = 1, ...props }, ref) => {
+    const [zoom, setZoom] = React.useState(1)
+    const [rotation, setRotation] = React.useState(0)
+
+    return (
+      <Box ref={ref} className={cn("space-y-4", className)} {...props}>
+        <Box className="relative aspect-square overflow-hidden rounded-lg border">
+          <Box tag="img"
+            src={src}
+            alt="Crop preview"
+            className="h-full w-full object-contain"
+            style={{
+              transform: `scale(${zoom}) rotate(${rotation}deg)`,
+              transition: "transform 0.2s",
+            }}
+          />
+        </Box>
+        <Box className="flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setZoom(Math.max(0.5, zoom - 0.1))}
+          >
+            <ZoomOut style={css('h-4 w-4')} />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setZoom(Math.min(3, zoom + 0.1))}
+          >
+            <ZoomIn style={css('h-4 w-4')} />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setRotation((rotation + 90) % 360)}
+          >
+            <RotateCw style={css('h-4 w-4')} />
+          </Button>
+          <Button onClick={() => onCrop?.(src)}>
+            <Crop style={css('mr-2 h-4 w-4')} />
+            Crop
+          </Button>
+        </Box>
+      </Box>
+    )
+  }
+)
+ImageCrop.displayName = "ImageCrop"
+
+export { ImageCrop }