@luxfi/ui 7.4.15 → 8.1.0

package/src/simple-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 SimpleNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  logo?: React.ReactNode
+  items?: Array<{ label: string; href: string }>
+}
+
+const SimpleNavigationBar = React.forwardRef<
+  HTMLElement,
+  SimpleNavigationBarProps
+>(({ className, logo, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+      <Box className="container flex h-16 items-center justify-between">
+        {logo && <Box className="font-semibold">{logo}</Box>}
+        <Box className="flex 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>
+    </Box>
+  )
+})
+SimpleNavigationBar.displayName = "SimpleNavigationBar"
+
+export { SimpleNavigationBar }

package/src/skeleton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import { Box, sx } from '@hanzo/ui'
 import { cn } from './utils';
 
 // ---------------------------------------------------------------------------
@@ -7,139 +7,11 @@ import { cn } from './utils';
 // ---------------------------------------------------------------------------
 
 export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
-  readonly loading: boolean | undefined;
+  /** A skeleton with nothing said about it is loading; that is what one is for. */
+  readonly loading?: boolean;
 
   /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
   readonly asChild?: boolean;
-
-  // Legacy Chakra style-prop shims — converted to inline style.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly w?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly h?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly minW?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly maxW?: any;
-  readonly display?: string;
-  readonly flexGrow?: number;
-  readonly flexShrink?: number;
-  readonly flexBasis?: string;
-  readonly fontWeight?: number | string;
-  readonly textStyle?: string;
-  readonly borderRadius?: string;
-  readonly alignSelf?: string;
-  readonly alignItems?: string;
-  readonly justifyContent?: string;
-  readonly color?: string;
-  readonly mt?: number | string;
-  readonly mb?: number | string;
-  readonly ml?: number | string;
-  readonly mr?: number | string;
-  readonly height?: string;
-  readonly overflow?: string;
-  readonly whiteSpace?: string;
-  readonly textOverflow?: string;
-  readonly textTransform?: string;
-  readonly gap?: number | string;
-  readonly gridTemplateColumns?: string;
-  readonly minWidth?: string;
-  readonly boxSize?: number | string;
-  readonly py?: number | string;
-  readonly px?: number | string;
-  readonly p?: number | string;
-  readonly hideBelow?: string;
-  readonly as?: React.ElementType;
-  readonly fontSize?: string;
-  readonly flexWrap?: React.CSSProperties['flexWrap'];
-  readonly wordBreak?: React.CSSProperties['wordBreak'];
-  readonly lineHeight?: string;
-  readonly marginRight?: string;
-  readonly position?: React.CSSProperties['position'];
-  readonly background?: string;
-}
-
-// Style-prop shim names that must NOT leak into the DOM.
-const SHIM_PROPS = [
-  'w', 'h', 'minW', 'maxW', 'display', 'flexGrow', 'flexShrink', 'flexBasis',
-  'fontWeight', 'textStyle', 'borderRadius', 'alignSelf', 'alignItems',
-  'justifyContent', 'color', 'mt', 'mb', 'ml', 'mr', 'height', 'overflow',
-  'whiteSpace', 'textOverflow', 'textTransform', 'gap', 'gridTemplateColumns',
-  'minWidth', 'boxSize', 'py', 'px', 'p', 'hideBelow', 'fontSize', 'flexWrap',
-  'wordBreak', 'lineHeight', 'marginRight', 'position', 'background',
-] as const;
-
-const S = 4; // Chakra spacing scale
-
-/** Resolve a dimension value (number → px via spacing scale, responsive object → first value). */
-function dim(v: unknown): string | undefined {
-  if (v == null) return undefined;
-  if (typeof v === 'number') return `${ v * S }px`;
-  if (typeof v === 'string') return v;
-  if (typeof v === 'object') {
-    const o = v as Record<string, string>;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return undefined;
-}
-
-/** Convert a spacing number|string via the 4px scale. */
-function sp(v: number | string | undefined): string | undefined {
-  if (v === undefined) return undefined;
-  return typeof v === 'number' ? `${ v * S }px` : v;
-}
-
-/** Build a CSSProperties object from legacy Chakra style-prop shims. */
-function shimToStyle(props: SkeletonProps): React.CSSProperties {
-  const s: React.CSSProperties = {};
-  if (props.w !== undefined) s.width = dim(props.w);
-  if (props.h !== undefined) s.height = dim(props.h);
-  if (props.minW !== undefined) s.minWidth = dim(props.minW);
-  if (props.maxW !== undefined) s.maxWidth = dim(props.maxW);
-  if (props.display !== undefined) s.display = props.display;
-  if (props.flexGrow !== undefined) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== undefined) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== undefined) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== undefined) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== undefined) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== undefined) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== undefined) s.alignItems = props.alignItems;
-  if (props.justifyContent !== undefined) s.justifyContent = props.justifyContent;
-  if (props.color !== undefined) s.color = props.color;
-  if (props.mt !== undefined) s.marginTop = sp(props.mt);
-  if (props.mb !== undefined) s.marginBottom = sp(props.mb);
-  if (props.ml !== undefined) s.marginLeft = sp(props.ml);
-  if (props.mr !== undefined) s.marginRight = sp(props.mr);
-  if (props.height !== undefined) s.height = props.height;
-  if (props.overflow !== undefined) s.overflow = props.overflow;
-  if (props.whiteSpace !== undefined) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== undefined) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== undefined) s.textTransform = props.textTransform;
-  if (props.gap !== undefined) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== undefined) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== undefined) s.minWidth = props.minWidth;
-  if (props.boxSize !== undefined) {
-    const v = typeof props.boxSize === 'number' ? `${ props.boxSize * S }px` : props.boxSize;
-    s.width = v; s.height = v;
-  }
-  if (props.py !== undefined) { const v = sp(props.py); s.paddingTop = v; s.paddingBottom = v; }
-  if (props.px !== undefined) { const v = sp(props.px); s.paddingLeft = v; s.paddingRight = v; }
-  if (props.p !== undefined) s.padding = sp(props.p);
-  if (props.fontSize !== undefined) s.fontSize = props.fontSize;
-  if (props.flexWrap !== undefined) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== undefined) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== undefined) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== undefined) s.marginRight = props.marginRight;
-  if (props.position !== undefined) s.position = props.position;
-  if (props.background !== undefined) s.background = props.background;
-  return s;
-}
-
-/** Strip shim keys from props so they don't leak into the DOM. */
-function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeof SHIM_PROPS)[number]> {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out as Omit<T, (typeof SHIM_PROPS)[number]>;
 }
 
 // A skeleton reserves space. It does not move.
@@ -156,53 +28,33 @@ function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeo
 // live next to the CSS, in section 6c of @luxfi/ui/tokens.css.
 const SKELETON_CLASSES = 'lux-skeleton rounded-sm';
 
-const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
-
 export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(props, ref) {
-    const { loading = false, asChild, className, children, style: styleProp, as: Component = 'div', ...allRest } = props;
-
-    const shimStyle = shimToStyle(props);
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : undefined;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : undefined;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
-
-    // Strip shim props from what reaches the DOM.
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
 
     if (!loading) {
       if (asChild && React.isValidElement(children)) return children;
       return (
-        <Component ref={ ref } className={ cls } style={ mergedStyle } { ...htmlRest }>
-          { children }
-        </Component>
-      );
-    }
-
-    if (asChild && React.isValidElement(children)) {
-      return (
-        <Component
-          ref={ ref }
-          data-loading
-          className={ cn(SKELETON_CLASSES, '[&_*]:invisible', cls) }
-          style={ mergedStyle }
-          { ...htmlRest }
-        >
+        <Box ref={ ref } className={ className } style={ style } { ...rest }>
           { children }
-        </Component>
+        </Box>
       );
     }
 
     return (
-      <Component
+      <div
         ref={ ref }
         data-loading
-        className={ cn(SKELETON_CLASSES, children ? '[&_*]:invisible' : 'min-h-5', cls) }
-        style={ mergedStyle }
-        { ...htmlRest }
+        {...sx(
+          SKELETON_CLASSES,
+          asChild || children ? '[&_*]:invisible' : 'min-h-5',
+          className,
+        )}
+        style={ style }
+        { ...rest }
       >
         { children }
-      </Component>
+      </div>
     );
   },
 );
@@ -226,7 +78,7 @@ export const SkeletonCircle = React.forwardRef<HTMLDivElement, SkeletonCirclePro
       <Skeleton
         ref={ ref }
         loading={ loading }
-        className={ cn('rounded-full shrink-0', className) }
+        {...sx('rounded-full shrink-0', className)}
         style={{ width: dimension, height: dimension, ...rest.style }}
         { ...rest }
       />
@@ -248,15 +100,15 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     const { noOfLines = 3, loading = true, className, ...rest } = props;
 
     return (
-      <div ref={ ref } className={ cn('flex w-full flex-col gap-2', className) } { ...rest }>
+      <Box ref={ ref } className={ cn('flex w-full flex-col gap-2', className) } { ...rest }>
         { Array.from({ length: noOfLines }).map((_, index) => (
           <Skeleton
             key={ index }
             loading={ loading }
-            className={ cn('h-4', index === noOfLines - 1 && 'max-w-[80%]') }
+            {...sx( cn('h-4', index === noOfLines - 1 && 'max-w-[80%]') )}
           />
         )) }
-      </div>
+      </Box>
     );
   },
 );
@@ -279,5 +131,5 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
  */
 export function LoadingBar({ loading = true }: { readonly loading?: boolean }) {
   if (!loading) return null;
-  return <div className="lux-loading" role="progressbar" aria-busy="true" aria-label="Loading"/>;
+  return <Box className="lux-loading" role="progressbar" aria-busy="true" aria-label="Loading"/>;
 }

package/src/slider.tsx

@@ -12,6 +12,7 @@ export interface SliderProps {
   readonly step?: number;
   readonly disabled?: boolean;
   readonly orientation?: 'horizontal' | 'vertical';
+  readonly id?: string;
   readonly name?: string;
   readonly onValueChange?: (value: Array<number>) => void;
   readonly onValueCommit?: (value: Array<number>) => void;
@@ -119,7 +120,7 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
               borderWidth={ 2 }
               borderColor={ ACTIVE }
               backgroundColor={ WHITE }
-              boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
+              boxShadow="var(--shadow-sm)"
               transition="quick"
               hoverStyle={{ borderColor: ACTIVE_HOVER }}
               focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: ACTIVE, outlineOffset: 2 }}

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 ],
     );
@@ -123,7 +123,7 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
             height={ s.thumb }
             borderRadius={ 9999 }
             backgroundColor={ WHITE }
-            boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
+            boxShadow="var(--shadow-sm)"
           >
             { thumbLabel && (
               <Text width="100%" height="100%" textAlign="center" fontSize={ 8 }>

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>
+  )
+}