@djangocfg/ui-core 1.0.1

package/src/components/tabs.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { Menu } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { useIsMobile } from "../hooks"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet"
+import { Button } from "./button"
+import { ScrollArea, ScrollBar } from "./scroll-area"
+
+// ─────────────────────────────────────────────────────────────────────────
+// Tabs Root with Mobile Sheet Support
+// ─────────────────────────────────────────────────────────────────────────
+
+interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+  /**
+   * Enable mobile sheet mode (automatically shows Sheet on mobile devices)
+   * @default false
+   */
+  mobileSheet?: boolean
+  /**
+   * Title for mobile sheet header
+   * @default "Navigation"
+   */
+  mobileSheetTitle?: string
+  /**
+   * Title to display next to burger menu on mobile
+   */
+  mobileTitleText?: string
+  /**
+   * Enable sticky positioning (stays at top on scroll)
+   * @default false
+   */
+  sticky?: boolean
+}
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsProps
+>(({ mobileSheet = false, mobileSheetTitle = "Navigation", mobileTitleText, sticky = false, children, ...props }, ref) => {
+  const isMobile = useIsMobile()
+  const [open, setOpen] = React.useState(false)
+
+  // If mobile sheet mode is disabled, render normal tabs
+  if (!mobileSheet || !isMobile) {
+    // If sticky is enabled for desktop, wrap TabsList in sticky container
+    if (sticky) {
+      const childrenArray = React.Children.toArray(children)
+      const tabsList = childrenArray.find(
+        (child) => React.isValidElement(child) && child.type === TabsList
+      )
+      const tabsContent = childrenArray.filter(
+        (child) => React.isValidElement(child) && child.type === TabsContent
+      )
+
+      return (
+        <TabsPrimitive.Root ref={ref} {...props}>
+          <div className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 mb-4">
+            {tabsList}
+          </div>
+          {tabsContent}
+        </TabsPrimitive.Root>
+      )
+    }
+
+    return (
+      <TabsPrimitive.Root ref={ref} {...props}>
+        {children}
+      </TabsPrimitive.Root>
+    )
+  }
+
+  // Extract TabsList and TabsContent from children
+  const childrenArray = React.Children.toArray(children)
+  const tabsList = childrenArray.find(
+    (child) => React.isValidElement(child) && child.type === TabsList
+  )
+  const tabsContent = childrenArray.filter(
+    (child) => React.isValidElement(child) && child.type === TabsContent
+  )
+
+  // Extract triggers from TabsList children
+  const triggers = React.isValidElement(tabsList)
+    ? React.Children.toArray((tabsList.props as any).children)
+    : []
+
+  // Mobile Sheet Navigation
+  return (
+    <TabsPrimitive.Root ref={ref} {...props}>
+      <div className={cn(
+        "w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 mb-4",
+        sticky && "sticky top-0 z-40"
+      )}>
+        <div className="container mx-auto flex items-center justify-between h-14 px-4">
+          {/* Title */}
+          {mobileTitleText && (
+            <h1 className="text-lg font-semibold">{mobileTitleText}</h1>
+          )}
+
+          {/* Menu Button */}
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" className={mobileTitleText ? "" : "ml-auto"}>
+                <Menu className="h-5 w-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[280px] sm:w-[350px]">
+              <SheetHeader>
+                <SheetTitle>{mobileSheetTitle}</SheetTitle>
+              </SheetHeader>
+              <nav className="flex flex-col gap-2 mt-6">
+                <TabsPrimitive.List className="flex flex-col gap-2">
+                  {triggers.map((trigger, index) => {
+                    if (!React.isValidElement(trigger)) return null
+
+                    // Clone trigger and wrap in mobile-friendly container
+                    const triggerProps = (trigger as any).props || {};
+                    return React.cloneElement(trigger as React.ReactElement, {
+                      key: index,
+                      onClick: (e: React.MouseEvent) => {
+                        setOpen(false)
+                        triggerProps.onClick?.(e)
+                      },
+                      className: cn(
+                        "flex items-center gap-3 px-3 py-2 rounded-md transition-colors justify-start w-full",
+                        "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                        "hover:bg-muted",
+                        triggerProps.className
+                      ),
+                    } as any)
+                  })}
+                </TabsPrimitive.List>
+              </nav>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+      {tabsContent}
+    </TabsPrimitive.Root>
+  )
+})
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    /**
+     * Full width mode - tabs will stretch equally to fill the container
+     * @default false
+     */
+    fullWidth?: boolean
+    /**
+     * Enable horizontal scrolling when tabs overflow
+     * @default false
+     */
+    scrollable?: boolean
+  }
+>(({ className, fullWidth = false, scrollable = false, ...props }, ref) => {
+  // If scrollable mode is enabled, wrap in ScrollArea
+  if (scrollable) {
+    return (
+      <ScrollArea className="w-full whitespace-nowrap rounded-lg">
+        <TabsPrimitive.List
+          ref={ref}
+          className={cn(
+            "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+            fullWidth && "w-full flex",
+            className
+          )}
+          {...props}
+        />
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    )
+  }
+
+  // Default mode without scrolling
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        fullWidth && "w-full flex",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    /**
+     * Makes the trigger take equal space (use with fullWidth TabsList)
+     * @default false
+     */
+    flexEqual?: boolean
+    key?: React.Key
+  }
+>(({ className, flexEqual = false, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      flexEqual && "flex-1",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & { key?: React.Key }
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/toast.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-9999 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-md",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

package/src/components/toaster.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { useEffect, useState } from 'react';
+import { useToast } from '../hooks/useToast';
+
+import {
+    Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport
+} from './toast';
+
+export function Toaster() {
+  const { toasts } = useToast()
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  if (!isMounted) {
+    return null
+  }
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

package/src/components/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants> & { key?: React.Key }
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/src/components/token-icon.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export interface TokenIconProps extends React.HTMLAttributes<HTMLDivElement> {
+  symbol: string
+  variant?: 'branded' | 'mono'
+  size?: number
+  network?: string
+  address?: string
+}
+
+/**
+ * Get all available token symbols from @web3icons/react
+ * Uses dynamic import to avoid bundling all icons
+ */
+export async function getAllTokenSymbols(): Promise<string[]> {
+  try {
+    const { tokenIcons } = await import('@web3icons/react')
+    return Object.keys(tokenIcons).map(key => 
+      key.replace(/^Token/, '').replace(/_/g, '-')
+    ).sort()
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Search tokens by symbol
+ */
+export async function searchTokens(query: string): Promise<string[]> {
+  const allTokens = await getAllTokenSymbols()
+  const lowerQuery = query.toLowerCase()
+  return allTokens.filter(symbol => 
+    symbol.toLowerCase().includes(lowerQuery)
+  )
+}
+
+/**
+ * Get popular tokens grouped by category
+ */
+export interface TokenCategory {
+  name: string
+  tokens: string[]
+}
+
+export async function getTokensByCategory(): Promise<TokenCategory[]> {
+  const allTokens = await getAllTokenSymbols()
+  
+  // Top tokens by market cap
+  const topTokens = ['BTC', 'ETH', 'USDT', 'BNB', 'SOL', 'USDC', 'XRP', 'DOGE', 'ADA', 'TRX']
+    .filter(t => allTokens.includes(t))
+  
+  const stablecoins = ['USDT', 'USDC', 'BUSD', 'DAI', 'TUSD', 'USDP', 'GUSD', 'FRAX']
+    .filter(t => allTokens.includes(t))
+  
+  const defi = ['UNI', 'AAVE', 'MKR', 'CRV', 'CAKE', 'SUSHI', 'BAL', 'COMP', 'YFI', 'SNX', 'LINK']
+    .filter(t => allTokens.includes(t))
+  
+  const layer1 = ['ETH', 'BNB', 'SOL', 'ADA', 'AVAX', 'DOT', 'ATOM', 'NEAR', 'ALGO', 'FTM']
+    .filter(t => allTokens.includes(t))
+  
+  const layer2 = ['MATIC', 'OP', 'ARB', 'IMX', 'LRC', 'METIS']
+    .filter(t => allTokens.includes(t))
+  
+  const memeCoins = ['DOGE', 'SHIB', 'PEPE', 'FLOKI', 'ELON', 'BONK']
+    .filter(t => allTokens.includes(t))
+  
+  return [
+    { name: 'Top 10', tokens: topTokens },
+    { name: 'Stablecoins', tokens: stablecoins },
+    { name: 'DeFi', tokens: defi },
+    { name: 'Layer 1', tokens: layer1 },
+    { name: 'Layer 2', tokens: layer2 },
+    { name: 'Meme Coins', tokens: memeCoins },
+  ].filter(cat => cat.tokens.length > 0)
+}
+
+export type TokenSymbol = string
+
+// Dynamic import for @web3icons/react tokens
+const tokenIconCache = new Map<string, React.ComponentType<any>>()
+
+async function getTokenIcon(symbol: string): Promise<React.ComponentType<any> | null> {
+  const normalizedSymbol = symbol.toUpperCase().replace(/[^A-Z0-9]/g, '_')
+  const componentName = `Token${normalizedSymbol}`
+
+  if (tokenIconCache.has(componentName)) {
+    return tokenIconCache.get(componentName)!
+  }
+
+  try {
+    const module = await import('@web3icons/react')
+    const Component = (module as any)[componentName]
+    if (Component) {
+      tokenIconCache.set(componentName, Component)
+      return Component
+    }
+  } catch (e) {
+    // Token not found
+  }
+
+  return null
+}
+
+export function TokenIcon({
+  symbol,
+  variant = 'branded',
+  size = 24,
+  className,
+  network,
+  address,
+  ...props
+}: TokenIconProps) {
+  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null)
+  const [loading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    let mounted = true
+
+    getTokenIcon(symbol).then((component) => {
+      if (mounted) {
+        setIconComponent(() => component)
+        setLoading(false)
+      }
+    })
+
+    return () => {
+      mounted = false
+    }
+  }, [symbol])
+
+  return (
+    <div
+      className={cn("inline-flex items-center justify-center flex-shrink-0", className)}
+      style={{ width: size, height: size }}
+      {...props}
+    >
+      {IconComponent ? (
+        <IconComponent
+          variant={variant}
+          size={size}
+        />
+      ) : (
+        // Fallback: show symbol as text
+        <span
+          className="text-muted-foreground font-medium uppercase"
+          style={{ fontSize: Math.max(8, size * 0.4) }}
+        >
+          {symbol?.slice(0, 3) || '?'}
+        </span>
+      )}
+    </div>
+  )
+}