@hanzo/ui 5.7.1 → 8.0.0

package/finance/components/TradingPanel.tsx

@@ -1,238 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { TrendingUp, TrendingDown } from 'lucide-react'
-
-export interface TradingPanelProps {
-  symbol: string
-  currentPrice: number
-}
-
-export function TradingPanel({ symbol, currentPrice }: TradingPanelProps) {
-  const [orderType, setOrderType] = useState<'buy' | 'sell'>('buy')
-  const [quantity, setQuantity] = useState('')
-  const [portfolio, setPortfolio] = useState<any>(null)
-  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
-
-  useEffect(() => {
-    loadPortfolio()
-  }, [])
-
-  const loadPortfolio = () => {
-    const storedPortfolio = localStorage.getItem('begm_portfolio')
-    if (storedPortfolio) {
-      setPortfolio(JSON.parse(storedPortfolio))
-    } else {
-      const initialPortfolio = {
-        cash: 100000,
-        holdings: []
-      }
-      localStorage.setItem('begm_portfolio', JSON.stringify(initialPortfolio))
-      setPortfolio(initialPortfolio)
-    }
-  }
-
-  const executeTrade = () => {
-    if (!quantity || parseFloat(quantity) <= 0) {
-      setMessage({ type: 'error', text: 'Please enter a valid quantity' })
-      return
-    }
-
-    const qty = parseFloat(quantity)
-    const total = qty * currentPrice
-
-    if (orderType === 'buy') {
-      // Check if user has enough cash
-      if (total > portfolio.cash) {
-        setMessage({ type: 'error', text: 'Insufficient funds' })
-        return
-      }
-
-      // Update portfolio
-      const existingHolding = portfolio.holdings.find((h: any) => h.symbol === symbol)
-      if (existingHolding) {
-        // Update existing holding
-        const newQuantity = existingHolding.quantity + qty
-        const newAveragePrice = ((existingHolding.averagePrice * existingHolding.quantity) + (currentPrice * qty)) / newQuantity
-        existingHolding.quantity = newQuantity
-        existingHolding.averagePrice = newAveragePrice
-        existingHolding.currentPrice = currentPrice
-      } else {
-        // Add new holding
-        portfolio.holdings.push({
-          symbol,
-          quantity: qty,
-          averagePrice: currentPrice,
-          currentPrice
-        })
-      }
-
-      portfolio.cash -= total
-    } else {
-      // Selling
-      const existingHolding = portfolio.holdings.find((h: any) => h.symbol === symbol)
-      
-      if (!existingHolding || existingHolding.quantity < qty) {
-        setMessage({ type: 'error', text: 'Insufficient shares' })
-        return
-      }
-
-      // Update holding
-      existingHolding.quantity -= qty
-      existingHolding.currentPrice = currentPrice
-      
-      // Remove holding if quantity is 0
-      if (existingHolding.quantity === 0) {
-        portfolio.holdings = portfolio.holdings.filter((h: any) => h.symbol !== symbol)
-      }
-
-      portfolio.cash += total
-    }
-
-    // Save updated portfolio
-    localStorage.setItem('begm_portfolio', JSON.stringify(portfolio))
-    setPortfolio({ ...portfolio })
-
-    // Record order
-    const orders = JSON.parse(localStorage.getItem('begm_orders') || '[]')
-    orders.push({
-      id: `ORD-${Date.now()}`,
-      symbol,
-      type: orderType,
-      quantity: qty,
-      price: currentPrice,
-      total,
-      timestamp: new Date().toISOString(),
-      status: 'completed'
-    })
-    localStorage.setItem('begm_orders', JSON.stringify(orders))
-
-    setMessage({ 
-      type: 'success', 
-      text: `Successfully ${orderType === 'buy' ? 'bought' : 'sold'} ${qty} shares of ${symbol}` 
-    })
-    setQuantity('')
-
-    // Clear message after 3 seconds
-    setTimeout(() => setMessage(null), 3000)
-  }
-
-  const getHoldingInfo = () => {
-    if (!portfolio) return null
-    const holding = portfolio.holdings.find((h: any) => h.symbol === symbol)
-    return holding
-  }
-
-  const holding = getHoldingInfo()
-
-  return (
-    <div className="bg-white/5 border border-white/10 rounded-lg p-6 backdrop-blur-xl">
-      <h3 className="text-lg font-bold text-white mb-4">Trade {symbol}</h3>
-
-      {/* Order Type Selection */}
-      <div className="flex gap-2 mb-4">
-        <button
-          onClick={() => setOrderType('buy')}
-          className={`flex-1 py-2 rounded-lg font-medium transition-all ${
-            orderType === 'buy'
-              ? 'bg-success text-white'
-              : 'bg-white/5 text-white/60 hover:bg-white/10'
-          }`}
-        >
-          <TrendingUp size={16} className="inline mr-2" />
-          Buy
-        </button>
-        <button
-          onClick={() => setOrderType('sell')}
-          className={`flex-1 py-2 rounded-lg font-medium transition-all ${
-            orderType === 'sell'
-              ? 'bg-danger text-white'
-              : 'bg-white/5 text-white/60 hover:bg-white/10'
-          }`}
-        >
-          <TrendingDown size={16} className="inline mr-2" />
-          Sell
-        </button>
-      </div>
-
-      {/* Current Holdings Info */}
-      {holding && (
-        <div className="mb-4 p-3 bg-white/5 rounded-lg">
-          <p className="text-xs text-white/60 mb-1">Your Holdings</p>
-          <p className="text-sm text-white">
-            {holding.quantity} shares @ ${holding.averagePrice.toFixed(2)} avg
-          </p>
-        </div>
-      )}
-
-      {/* Price Info */}
-      <div className="mb-4 p-3 bg-white/5 rounded-lg">
-        <p className="text-xs text-white/60 mb-1">Current Price</p>
-        <p className="text-lg font-bold text-white">${currentPrice.toFixed(2)}</p>
-      </div>
-
-      {/* Quantity Input */}
-      <div className="mb-4">
-        <label className="block text-sm font-medium text-white/80 mb-2">
-          Quantity (Shares)
-        </label>
-        <input
-          type="number"
-          value={quantity}
-          onChange={(e) => setQuantity(e.target.value)}
-          min="1"
-          step="1"
-          placeholder="Enter quantity"
-          className="w-full px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-success"
-        />
-      </div>
-
-      {/* Order Total */}
-      {quantity && parseFloat(quantity) > 0 && (
-        <div className="mb-4 p-3 bg-white/5 rounded-lg">
-          <div className="flex justify-between items-center">
-            <span className="text-sm text-white/60">Estimated Total</span>
-            <span className="text-lg font-bold text-white">
-              ${(parseFloat(quantity) * currentPrice).toFixed(2)}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {/* Available Cash */}
-      <div className="mb-4 p-3 bg-white/5 rounded-lg">
-        <div className="flex justify-between items-center">
-          <span className="text-sm text-white/60">Available Cash</span>
-          <span className="text-sm font-medium text-white">
-            ${portfolio?.cash.toLocaleString() || '0'}
-          </span>
-        </div>
-      </div>
-
-      {/* Message */}
-      {message && (
-        <div className={`mb-4 p-3 rounded-lg ${
-          message.type === 'success' ? 'bg-success/20 text-success' : 'bg-danger/20 text-danger'
-        }`}>
-          <p className="text-sm">{message.text}</p>
-        </div>
-      )}
-
-      {/* Execute Button */}
-      <button
-        onClick={executeTrade}
-        className={`w-full py-3 rounded-lg font-medium transition-all ${
-          orderType === 'buy'
-            ? 'bg-success hover:bg-success/90 text-white'
-            : 'bg-danger hover:bg-danger/90 text-white'
-        }`}
-      >
-        {orderType === 'buy' ? 'Buy' : 'Sell'} {symbol}
-      </button>
-
-      <p className="text-xs text-white/40 text-center mt-4">
-        This is a demo account. No real money is at risk.
-      </p>
-    </div>
-  )
-}

package/finance/components/index.ts

@@ -1,40 +0,0 @@
-/**
- * @hanzo/finance - Financial Trading Components
- * 
- * TradingView-powered widgets for stocks, crypto, forex, and more
- */
-
-// Charts and Advanced Visualization
-export { default as AdvancedChart } from './AdvancedChart'
-export { default as MarketOverview } from './MarketOverview'
-export { default as TickerTape } from './TickerTape'
-
-// Market Screeners
-export { default as StockScreener } from './StockScreener'
-export { default as CryptoScreener } from './CryptoScreener'
-export { default as ForexScreener } from './ForexScreener'
-
-// Symbol Analysis
-export { default as SymbolInfo } from './SymbolInfo'
-export { default as CompanyProfile } from './CompanyProfile'
-export { default as Financials } from './Financials'
-export { default as TechnicalAnalysis } from './TechnicalAnalysis'
-
-// News and Information
-export { default as NewsTimeline } from './NewsTimeline'
-
-// Trading Interface
-export { TradingPanel } from './TradingPanel'
-export { OrderEntry } from './OrderEntry'
-export { PositionsList } from './PositionsList'
-export { OrdersHistory } from './OrdersHistory'
-
-// Type exports
-export type { TradingPanelProps } from './TradingPanel'
-export type { OrderEntryProps } from './OrderEntry'
-export type { PositionsListProps, Position } from './PositionsList'
-export type { OrdersHistoryProps, Order } from './OrdersHistory'
-export type { SymbolInfoProps } from './SymbolInfo'
-export type { CompanyProfileProps } from './CompanyProfile'
-export type { FinancialsProps } from './Financials'
-export type { TechnicalAnalysisProps } from './TechnicalAnalysis'

package/finance/index.ts

@@ -1,23 +0,0 @@
-/**
- * @hanzo/finance
- * 
- * Financial trading widgets and components powered by TradingView.
- * Perfect for building trading platforms, financial dashboards, and market analysis tools.
- * 
- * @example
- * ```tsx
- * import { AdvancedChart, TickerTape, MarketOverview } from '@hanzo/finance'
- * 
- * function TradingPage() {
- *   return (
- *     <div>
- *       <TickerTape />
- *       <AdvancedChart symbol="NASDAQ:AAPL" />
- *       <MarketOverview />
- *     </div>
- *   )
- * }
- * ```
- */
-
-export * from './components'

package/style/drawer.css

@@ -1,163 +0,0 @@
-/*  This is a copy of vaul/src/style.css */
-
-[vaul-drawer] {
-  touch-action: none;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[vaul-drawer][vaul-drawer-direction='bottom'] {
-  transform: translate3d(0, 100%, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='top'] {
-  transform: translate3d(0, -100%, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='left'] {
-  transform: translate3d(-100%, 0, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='right'] {
-  transform: translate3d(100%, 0, 0);
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
-  overflow-y: hidden !important;
-}
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
-  overflow-y: hidden !important;
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
-  overflow-x: hidden !important;
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
-  overflow-x: hidden !important;
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
-  transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
-  transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
-  transform: translate3d(var(--snap-point-height, 0), 0, 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
-  transform: translate3d(var(--snap-point-height, 0), 0, 0);
-}
-
-[vaul-overlay] {
-  opacity: 0;
-  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[vaul-overlay][vaul-drawer-visible='true'] {
-  opacity: 1;
-}
-
-[vaul-drawer]::after {
-  content: '';
-  position: absolute;
-  background: inherit;
-  background-color: inherit;
-}
-
-[vaul-drawer][vaul-drawer-direction='top']::after {
-  top: initial;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  height: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='bottom']::after {
-  top: 100%;
-  bottom: initial;
-  left: 0;
-  right: 0;
-  height: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='left']::after {
-  left: initial;
-  right: 100%;
-  top: 0;
-  bottom: 0;
-  width: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='right']::after {
-  left: 100%;
-  right: initial;
-  top: 0;
-  bottom: 0;
-  width: 200%;
-}
-
-[vaul-handle] {
-  display: block;
-  position: relative;
-  opacity: 0.8;
-  margin-left: auto;
-  margin-right: auto;
-  height: 5px;
-  width: 56px;
-  border-radius: 1rem;
-  touch-action: pan-y;
-  cursor: grab;
-}
-
-[vaul-handle]:hover,
-[vaul-handle]:active {
-  opacity: 1;
-}
-
-[vaul-handle]:active {
-  cursor: grabbing;
-}
-
-[vaul-handle-hitarea] {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: max(100%, 2.75rem); /* 44px */
-  height: max(100%, 2.75rem); /* 44px */
-  touch-action: inherit;
-}
-
-[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
-  opacity: 0;
-}
-
-[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
-  opacity: 1;
-}
-
-/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
-@keyframes fake-animation {
-  from {
-  }
-  to {
-  }
-}
-
-@media (pointer: fine) {
-  [vaul-handle-hitarea] {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  [vaul-drawer] {
-    user-select: none;
-  }
-}
-

package/style/globals.css

@@ -1,146 +0,0 @@
-/**
- * Hanzo UI - Global Styles
- * Tailwind CSS 4 compatible
- */
-
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Hanzo UI custom styles */
-@import "./hanzo-common.css";
-@import "./hanzo-default-colors.css";
-
-/* Custom variant for dark mode */
-@custom-variant dark (&:is(.dark *));
-
-/* Theme configuration */
-@theme inline {
-  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-mono), ui-monospace, monospace;
-  --radius: 0.5rem;
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  /* Color mappings */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Keyframes */
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
-  }
-
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
-    to { height: 0; }
-  }
-
-  @keyframes caret-blink {
-    0%, 70%, 100% { opacity: 1; }
-    20%, 50% { opacity: 0; }
-  }
-}
-
-/* Custom data-state variants (shadcn/ui compatibility) */
-@custom-variant data-open {
-  &:where([data-state="open"]),
-  &:where([data-open]:not([data-open="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-closed {
-  &:where([data-state="closed"]),
-  &:where([data-closed]:not([data-closed="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-checked {
-  &:where([data-state="checked"]),
-  &:where([data-checked]:not([data-checked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-unchecked {
-  &:where([data-state="unchecked"]),
-  &:where([data-unchecked]:not([data-unchecked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-selected {
-  &:where([data-selected="true"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-disabled {
-  &:where([data-disabled="true"]),
-  &:where([data-disabled]:not([data-disabled="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-active {
-  &:where([data-state="active"]),
-  &:where([data-active]:not([data-active="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}
-
-/* Utility classes */
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

package/style/hanzo-common.css

@@ -1,31 +0,0 @@
-/**
- * Hanzo UI - Common Base Styles
- * Tailwind CSS 4 compatible
- */
-
-@layer base {
-  * {
-    box-sizing: inherit;
-    @apply border-border outline-ring/50;
-  }
-
-  /*
-    using this approach:
-    https://stackoverflow.com/a/76066443/11645689
-    see src/app/(home)/scroll-snap
-  */
-
-  html {
-    scroll-snap-type: y mandatory;
-    height: 100vh;
-    overflow-y: scroll;
-    box-sizing: border-box;
-    scrollbar-width: none;
-  }
-
-  body {
-    font-feature-settings: "rlig" 1, "calt" 1;
-    font-size: 16px;
-    letter-spacing: 0.15px;
-  }
-}