{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stock-widget",
  "title": "Stock Widgets",
  "description": "Stock market widgets for displaying stock prices, trends, and news with liquid glass styling.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.eindev.ir/r/base-widget.json"
  ],
  "files": [
    {
      "path": "registry/widgets/stock-widget.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { TrendingUp, TrendingDown, ArrowUpRight, ArrowDownRight } from \"lucide-react\";\nimport { GlassWidgetBase } from \"./base-widget\";\n\ninterface StockTickerWidgetProps {\n  symbol: string;\n  name?: string;\n  price: number;\n  change: number;\n  changePercent: number;\n  chartData?: number[];\n  className?: string;\n}\n\nfunction StockTickerWidget({\n  symbol,\n  name,\n  price,\n  change,\n  changePercent,\n  chartData,\n  className,\n}: StockTickerWidgetProps) {\n  const isPositive = change >= 0;\n  const color = isPositive ? \"text-emerald-500\" : \"text-red-500\";\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-45\", className)} glowColor={isPositive ? \"green\" : \"red\"}>\n      <div className=\"flex items-start justify-between mb-2\">\n        <div className=\"flex items-center gap-2\">\n          {isPositive ? (\n            <TrendingUp className=\"w-4 h-4 text-emerald-500\" />\n          ) : (\n            <TrendingDown className=\"w-4 h-4 text-red-500\" />\n          )}\n          <span className=\"text-white font-medium\">{symbol}</span>\n        </div>\n        <span className={cn(\"text-sm tabular-nums\", color)}>\n          {isPositive ? \"+\" : \"\"}\n          {change.toFixed(2)}\n        </span>\n      </div>\n\n      {chartData && chartData.length > 0 && (\n        <div className=\"h-12 flex items-end gap-px my-3\">\n          {chartData.map((value, i) => {\n            const max = Math.max(...chartData);\n            const min = Math.min(...chartData);\n            const height = ((value - min) / (max - min || 1)) * 100;\n            return (\n              <div\n                key={i}\n                className={cn(\n                  \"flex-1 rounded-t transition-all\",\n                  isPositive ? \"bg-emerald-500/60\" : \"bg-red-500/60\"\n                )}\n                style={{ height: `${Math.max(height, 10)}%` }}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      <div className=\"flex items-end justify-between\">\n        <div>\n          <div className=\"text-2xl font-light text-white tabular-nums\">{price.toFixed(2)}</div>\n          {name && <div className=\"text-sm text-white/50 truncate max-w-30\">{name}</div>}\n        </div>\n        <span className={cn(\"text-sm tabular-nums\", color)}>\n          {isPositive ? \"+\" : \"\"}\n          {changePercent.toFixed(2)}%\n        </span>\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface CompactStockWidgetProps {\n  symbol: string;\n  price: number;\n  change: number;\n  changePercent: number;\n  className?: string;\n}\n\nfunction CompactStockWidget({\n  symbol,\n  price,\n  change,\n  changePercent,\n  className,\n}: CompactStockWidgetProps) {\n  const isPositive = change >= 0;\n\n  return (\n    <GlassWidgetBase\n      className={cn(\"min-w-35\", className)}\n      size=\"sm\"\n      glowColor={isPositive ? \"green\" : \"red\"}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-white font-medium\">{symbol}</span>\n        <span\n          className={cn(\n            \"flex items-center gap-0.5 text-sm\",\n            isPositive ? \"text-emerald-500\" : \"text-red-500\"\n          )}\n        >\n          {isPositive ? (\n            <ArrowUpRight className=\"w-3 h-3\" />\n          ) : (\n            <ArrowDownRight className=\"w-3 h-3\" />\n          )}\n          {Math.abs(changePercent).toFixed(2)}%\n        </span>\n      </div>\n      <div className=\"text-xl font-light text-white mt-1 tabular-nums\">${price.toFixed(2)}</div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface PortfolioItem {\n  symbol: string;\n  name: string;\n  shares: number;\n  avgCost: number;\n  currentPrice: number;\n}\n\ninterface PortfolioWidgetProps {\n  title?: string;\n  totalValue?: number;\n  totalChange?: number;\n  holdings?: PortfolioItem[];\n  className?: string;\n}\n\nfunction PortfolioWidget({\n  title = \"Portfolio\",\n  totalValue = 0,\n  totalChange = 0,\n  holdings = [],\n  className,\n}: PortfolioWidgetProps) {\n  const isPositive = totalChange >= 0;\n\n  return (\n    <GlassWidgetBase\n      className={cn(\"min-w-70\", className)}\n      size=\"lg\"\n      glowColor={isPositive ? \"green\" : \"red\"}\n    >\n      <div className=\"flex items-start justify-between mb-4\">\n        <div>\n          <h3 className=\"text-white/60 text-sm\">{title}</h3>\n          <div className=\"text-2xl font-light text-white tabular-nums\">\n            ${totalValue.toLocaleString()}\n          </div>\n        </div>\n        <span\n          className={cn(\n            \"flex items-center gap-1 text-sm\",\n            isPositive ? \"text-emerald-500\" : \"text-red-500\"\n          )}\n        >\n          {isPositive ? <TrendingUp className=\"w-4 h-4\" /> : <TrendingDown className=\"w-4 h-4\" />}\n          {isPositive ? \"+\" : \"\"}\n          {totalChange.toFixed(2)}%\n        </span>\n      </div>\n\n      <div className=\"space-y-2\">\n        {holdings.map((item) => {\n          const value = item.shares * item.currentPrice;\n          const gain = ((item.currentPrice - item.avgCost) / item.avgCost) * 100;\n          const isGain = gain >= 0;\n\n          return (\n            <div\n              key={item.symbol}\n              className=\"flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5\"\n            >\n              <div>\n                <div className=\"text-white font-medium\">{item.symbol}</div>\n                <div className=\"text-white/50 text-xs\">{item.shares} shares</div>\n              </div>\n              <div className=\"text-right\">\n                <div className=\"text-white tabular-nums\">${value.toFixed(2)}</div>\n                <div\n                  className={cn(\n                    \"text-xs tabular-nums\",\n                    isGain ? \"text-emerald-500\" : \"text-red-500\"\n                  )}\n                >\n                  {isGain ? \"+\" : \"\"}\n                  {gain.toFixed(2)}%\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface MarketIndex {\n  name: string;\n  value: number;\n  change: number;\n  changePercent: number;\n}\n\ninterface MarketOverviewWidgetProps {\n  indices?: MarketIndex[];\n  className?: string;\n}\n\nfunction MarketOverviewWidget({ indices = [], className }: MarketOverviewWidgetProps) {\n  return (\n    <GlassWidgetBase className={cn(\"min-w-60\", className)} glowColor=\"cyan\">\n      <h3 className=\"text-white/60 text-sm mb-4\">Market Overview</h3>\n      <div className=\"space-y-3\">\n        {indices.map((index) => {\n          const isPositive = index.change >= 0;\n          return (\n            <div key={index.name} className=\"flex items-center justify-between\">\n              <span className=\"text-white/80\">{index.name}</span>\n              <div className=\"flex items-center gap-3\">\n                <span className=\"text-white tabular-nums\">{index.value.toLocaleString()}</span>\n                <span\n                  className={cn(\n                    \"flex items-center gap-0.5 text-sm tabular-nums\",\n                    isPositive ? \"text-emerald-500\" : \"text-red-500\"\n                  )}\n                >\n                  {isPositive ? (\n                    <ArrowUpRight className=\"w-3 h-3\" />\n                  ) : (\n                    <ArrowDownRight className=\"w-3 h-3\" />\n                  )}\n                  {Math.abs(index.changePercent).toFixed(2)}%\n                </span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface CryptoWidgetProps {\n  symbol: string;\n  name: string;\n  price: number;\n  change24h: number;\n  marketCap?: string;\n  volume24h?: string;\n  sparkline?: number[];\n  className?: string;\n}\n\nfunction CryptoWidget({\n  symbol,\n  name,\n  price,\n  change24h,\n  marketCap,\n  volume24h,\n  sparkline,\n  className,\n}: CryptoWidgetProps) {\n  const isPositive = change24h >= 0;\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-50\", className)} glowColor={isPositive ? \"green\" : \"red\"}>\n      <div className=\"flex items-start justify-between mb-3\">\n        <div>\n          <div className=\"text-white font-medium\">{symbol}</div>\n          <div className=\"text-white/50 text-sm\">{name}</div>\n        </div>\n        <span\n          className={cn(\"text-sm tabular-nums\", isPositive ? \"text-emerald-500\" : \"text-red-500\")}\n        >\n          {isPositive ? \"+\" : \"\"}\n          {change24h.toFixed(2)}%\n        </span>\n      </div>\n\n      {sparkline && sparkline.length > 0 && (\n        <div className=\"h-10 flex items-end gap-px mb-3\">\n          {sparkline.map((value, i) => {\n            const max = Math.max(...sparkline);\n            const min = Math.min(...sparkline);\n            const height = ((value - min) / (max - min || 1)) * 100;\n            return (\n              <div\n                key={i}\n                className={cn(\n                  \"flex-1 rounded-t\",\n                  isPositive ? \"bg-emerald-500/50\" : \"bg-red-500/50\"\n                )}\n                style={{ height: `${Math.max(height, 5)}%` }}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      <div className=\"text-2xl font-light text-white mb-2 tabular-nums\">\n        ${price.toLocaleString()}\n      </div>\n\n      {(marketCap || volume24h) && (\n        <div className=\"flex items-center gap-4 text-xs text-white/50\">\n          {marketCap && <span>MCap: {marketCap}</span>}\n          {volume24h && <span>Vol: {volume24h}</span>}\n        </div>\n      )}\n    </GlassWidgetBase>\n  );\n}\n\nexport {\n  StockTickerWidget,\n  CompactStockWidget,\n  PortfolioWidget,\n  MarketOverviewWidget,\n  CryptoWidget,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}