@luxfi/ui 8.0.0 → 8.2.0

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

package/src/status.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { Box, VariantProps, variants } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+const statusVariants = variants(
+  "inline-flex items-center gap-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary",
+        success:
+          "bg-[var(--lux-state-success)] text-[var(--lux-state-success)] dark:bg-[var(--lux-state-success)]/30 dark:text-[var(--lux-state-success)]",
+        warning:
+          "bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]/30 dark:text-[var(--lux-state-notice)]",
+        error: "bg-[var(--lux-state-error)] text-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)]/30 dark:text-[var(--lux-state-error)]",
+        info: "bg-[var(--color-link-primary)] text-[var(--color-link-primary)] dark:bg-[var(--color-link-primary)]/30 dark:text-[var(--color-link-primary)]",
+        gray: "bg-[var(--color-bg-body)] text-[var(--color-text-primary)] dark:bg-[var(--color-bg-primary)]/30 dark:text-[var(--color-text-secondary)]",
+      },
+      dot: {
+        true: "pl-1.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      dot: "true",
+    },
+  }
+)
+
+export interface StatusProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof statusVariants> {}
+
+const Status = React.forwardRef<HTMLSpanElement, StatusProps>(
+  ({ className, variant, dot, children, ...props }, ref) => {
+    return (
+      <Box tag="span"
+        ref={ref}
+        className={cn(statusVariants({ variant, dot }), className)}
+        {...props}
+      >
+        {dot && (
+          <Box tag="span"
+            className={cn(
+              "h-1.5 w-1.5 rounded-full",
+              variant === "success" && "bg-[var(--lux-state-success)]",
+              variant === "warning" && "bg-[var(--lux-state-notice)]",
+              variant === "error" && "bg-[var(--lux-state-error)]",
+              variant === "info" && "bg-[var(--color-link-primary)]",
+              variant === "gray" && "bg-[var(--color-bg-body)]",
+              variant === "default" && "bg-primary"
+            )}
+          />
+        )}
+        {children}
+      </Box>
+    )
+  }
+)
+Status.displayName = "Status"
+
+export { Status, statusVariants }

package/src/stock-screener.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { memo, useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+function StockScreener() {
+  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: "america",
+      showToolbar: true,
+      defaultColumn: "overview",
+      defaultScreen: "most_capitalized",
+      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(StockScreener)

package/src/switch.tsx

@@ -27,7 +27,7 @@ export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'label'
   thumbLabel?: { on: React.ReactNode; off: React.ReactNode };
   checked?: boolean;
   defaultChecked?: boolean;
-  onCheckedChange?: (details: { checked: boolean }) => void;
+  onCheckedChange?: (checked: boolean) => void;
   onChange?: React.FormEventHandler<HTMLLabelElement>;
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
@@ -65,7 +65,7 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
         }
 
         // Chakra-shaped callback ({ checked }) — the contract consumers already use.
-        onCheckedChange?.({ checked: nextChecked });
+        onCheckedChange?.(nextChecked);
       },
       [ isControlled, onCheckedChange ],
     );

package/src/symbol-info.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+export interface SymbolInfoProps {
+  symbol?: string
+  width?: string | number
+  locale?: string
+  colorTheme?: "light" | "dark"
+  isTransparent?: boolean
+}
+
+export default function SymbolInfo({
+  symbol = "NASDAQ:AAPL",
+  width = "100%",
+  locale = "en",
+  colorTheme = "dark",
+  isTransparent = false,
+}: SymbolInfoProps) {
+  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-info.js"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      symbol,
+      width,
+      locale,
+      colorTheme,
+      isTransparent,
+    })
+
+    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, locale, colorTheme, isTransparent])
+
+  return (
+    <Box className="tradingview-widget-container" ref={containerRef}>
+      <Box className="tradingview-widget-container__widget"></Box>
+    </Box>
+  )
+}

package/src/table.tsx

@@ -1,4 +1,5 @@
 import { throttle } from 'es-toolkit';
+import { Box, css, sx } from '@hanzo/ui'
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -6,8 +7,8 @@ import { cn } from './utils';
 import { Link } from './link';
 
 // Inline east arrow icon
-const ArrowIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 );
@@ -289,14 +290,14 @@ export const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
     const merged = { ...extracted, ...styleProp };
 
     return (
-      <table
+      <Box tag="table"
         ref={ ref }
         className={ cn('w-full border-collapse text-sm', className) }
         style={ merged }
         { ...(rest as React.HTMLAttributes<HTMLTableElement>) }
       >
         { children }
-      </table>
+      </Box>
     );
   },
 );
@@ -316,14 +317,14 @@ export const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeader
     const merged = { ...extracted, ...styleProp };
 
     return (
-      <thead
+      <Box tag="thead"
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
         { ...(rest as React.HTMLAttributes<HTMLTableSectionElement>) }
       >
         { children }
-      </thead>
+      </Box>
     );
   },
 );
@@ -343,14 +344,14 @@ export const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProp
     const merged = { ...extracted, ...styleProp };
 
     return (
-      <tbody
+      <Box tag="tbody"
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
         { ...(rest as React.HTMLAttributes<HTMLTableSectionElement>) }
       >
         { children }
-      </tbody>
+      </Box>
     );
   },
 );
@@ -370,14 +371,14 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
     const merged = { ...extracted, ...styleProp };
 
     return (
-      <tr
+      <Box tag="tr"
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
         { ...(rest as React.HTMLAttributes<HTMLTableRowElement>) }
       >
         { children }
-      </tr>
+      </Box>
     );
   },
 );
@@ -404,14 +405,14 @@ export const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
     };
 
     return (
-      <td
+      <Box tag="td"
         ref={ ref }
         className={ cn('px-3 py-2.5 align-top text-sm', className) }
         style={ merged }
         { ...(rest as React.TdHTMLAttributes<HTMLTableCellElement>) }
       >
         { children }
-      </td>
+      </Box>
     );
   },
 );
@@ -436,7 +437,7 @@ export const TableColumnHeader = React.forwardRef<HTMLTableCellElement, TableCol
     };
 
     return (
-      <th
+      <Box tag="th"
         ref={ ref }
         className={ cn(
           'px-3 py-2 text-xs font-semibold uppercase tracking-wider',
@@ -447,7 +448,7 @@ export const TableColumnHeader = React.forwardRef<HTMLTableCellElement, TableCol
         { ...(rest as React.ThHTMLAttributes<HTMLTableCellElement>) }
       >
         { children }
-      </th>
+      </Box>
     );
   },
 );
@@ -477,17 +478,17 @@ export const TableColumnHeaderSortable = <F extends string>(props: TableColumnHe
 
   return (
     <TableColumnHeader { ...rest }>
-      <Link onClick={ disabled ? undefined : handleSortToggle } className="relative">
+      <Link onClick={ disabled ? undefined : handleSortToggle } {...sx('relative')} style={css('relative')}>
         { isActive && (
-          <span
+          <Box tag="span"
             className={ cn(
               'absolute top-0 inline-flex h-full w-4 items-center',
               indicatorPosition === 'left' ? '-left-5' : '-right-5',
               isAsc ? '-rotate-90' : 'rotate-90',
             ) }
           >
-            <ArrowIcon className="h-4 w-4"/>
-          </span>
+            <ArrowIcon style={css('h-4 w-4')}/>
+          </Box>
         ) }
         { children }
       </Link>
@@ -529,7 +530,7 @@ export const TableHeaderSticky = (props: TableHeaderProps) => {
   return (
     <TableHeader
       ref={ ref }
-      className={ cn('sticky z-[1] bg-white dark:bg-black', className) }
+      {...sx('sticky z-[1] bg-white dark:bg-black', className)}
       style={{
         top: top ? `${ top }px` : 0,
         boxShadow: isStuck ? ACTION_BAR_SHADOW : 'none',
@@ -557,14 +558,14 @@ export const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCapti
     const merged = { ...extracted, ...styleProp };
 
     return (
-      <caption
+      <Box tag="caption"
         ref={ ref }
         className={ cn('px-3 py-2 text-sm text-[var(--color-table-header-fg)]', className) }
         style={ merged }
         { ...(rest as React.HTMLAttributes<HTMLTableCaptionElement>) }
       >
         { children }
-      </caption>
+      </Box>
     );
   },
 );
@@ -584,14 +585,14 @@ export const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooter
     const merged = { ...extracted, ...styleProp };
 
     return (
-      <tfoot
+      <Box tag="tfoot"
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
         { ...(rest as React.HTMLAttributes<HTMLTableSectionElement>) }
       >
         { children }
-      </tfoot>
+      </Box>
     );
   },
 );
@@ -609,13 +610,13 @@ export const TableScrollWrapper = React.forwardRef<HTMLDivElement, TableScrollWr
     const { className, children, ...rest } = props;
 
     return (
-      <div
+      <Box
         ref={ ref }
         className={ cn('w-full overflow-x-auto', className) }
         { ...rest }
       >
         { children }
-      </div>
+      </Box>
     );
   },
 );

package/src/tags.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { X } from "lucide-react"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+
+/** A caller's tone name as the palette that carries it. */
+const TONE = {
+  default: 'gray',
+  secondary: 'gray',
+  outline: 'gray',
+  destructive: 'red',
+} as const
+
+export interface Tag {
+  id: string
+  label: string
+}
+
+export interface TagsProps extends React.HTMLAttributes<HTMLDivElement> {
+  tags: Tag[]
+  onRemove?: (id: string) => void
+  variant?: "default" | "secondary" | "outline" | "destructive"
+}
+
+const Tags = React.forwardRef<HTMLDivElement, TagsProps>(
+  ({ className, tags, onRemove, variant = "default", ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn("flex flex-wrap gap-2", className)}
+        {...props}
+      >
+        {tags.map((tag) => (
+          <Badge
+            key={tag.id}
+            colorPalette={TONE[variant]}
+            {...sx(cn("gap-1", onRemove && "pr-1"))}
+          >
+            {tag.label}
+            {onRemove && (
+              <Box tag="button"
+                type="button"
+                onClick={() => onRemove(tag.id)}
+                className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+              >
+                <X style={css('h-3 w-3')} />
+                <Box tag="span" className="sr-only">Remove {tag.label}</Box>
+              </Box>
+            )}
+          </Badge>
+        ))}
+      </Box>
+    )
+  }
+)
+Tags.displayName = "Tags"
+
+export { Tags }

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

package/src/technical-analysis.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { Box } from '@hanzo/ui'
+
+export interface TechnicalAnalysisProps {
+  symbol?: string
+  interval?:
+    | "1m"
+    | "5m"
+    | "15m"
+    | "30m"
+    | "1h"
+    | "2h"
+    | "4h"
+    | "1D"
+    | "1W"
+    | "1M"
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: "light" | "dark"
+  isTransparent?: boolean
+  showIntervalTabs?: boolean
+  displayMode?: "single" | "multiple"
+}
+
+export default function TechnicalAnalysis({
+  symbol = "NASDAQ:AAPL",
+  interval = "15m",
+  width = "100%",
+  height = "500",
+  locale = "en",
+  colorTheme = "dark",
+  isTransparent = false,
+  showIntervalTabs = true,
+  displayMode = "single",
+}: TechnicalAnalysisProps) {
+  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-technical-analysis.js"
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      interval,
+      width,
+      isTransparent,
+      height,
+      symbol,
+      showIntervalTabs,
+      displayMode,
+      locale,
+      colorTheme,
+    })
+
+    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,
+    interval,
+    width,
+    height,
+    locale,
+    colorTheme,
+    isTransparent,
+    showIntervalTabs,
+    displayMode,
+  ])
+
+  return (
+    <Box
+      className="tradingview-widget-container w-full h-[500px]"
+      ref={containerRef}
+    >
+      <Box className="tradingview-widget-container__widget h-full"></Box>
+    </Box>
+  )
+}