@jerydam/lumina-sdk 0.1.0

package/components/dashboard-sidebar.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { LayoutDashboard, Users, BarChart3, Key, CreditCard, Settings, Menu, X, Zap } from 'lucide-react'
+
+const navItems = [
+  { label: 'Dashboard', icon: LayoutDashboard, href: '/dashboard' },
+  { label: 'Users & Wallets', icon: Users, href: '/dashboard/users' },
+  { label: 'Analytics', icon: BarChart3, href: '/dashboard/analytics' },
+  { label: 'API Keys', icon: Key, href: '/dashboard/api-keys' },
+  { label: 'Billing', icon: CreditCard, href: '/dashboard/billing' },
+  { label: 'Integration', icon: Zap, href: '/dashboard/integration' },
+  { label: 'Settings', icon: Settings, href: '/dashboard/settings' },
+]
+
+export function DashboardSidebar() {
+  // Hidden by default on mobile, visible on desktop
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const pathname = usePathname()
+
+  return (
+    <>
+      {/* Mobile toggle button — only visible on mobile */}
+      <button
+        onClick={() => setMobileOpen(true)}
+        className="md:hidden fixed top-4 left-4 z-40 p-2 rounded-lg bg-card border border-border hover:bg-card/80 transition"
+        aria-label="Open menu"
+      >
+        <Menu size={22} />
+      </button>
+
+      {/* Mobile overlay — closes sidebar on tap outside */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={() => setMobileOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Sidebar */}
+      {/*
+        Desktop: static in flow (not fixed), always visible → `md:relative md:translate-x-0 md:flex`
+        Mobile:  fixed, slides in/out, hidden by default
+      */}
+      <aside
+        className={`
+          fixed inset-y-0 left-0 z-50 w-64 flex flex-col
+          bg-black/40 backdrop-blur-xl border-r border-white/10
+          transition-transform duration-300
+          ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}
+          md:relative md:inset-auto md:z-auto md:translate-x-0 md:flex md:shrink-0
+        `}
+      >
+        {/* Logo */}
+        <div className="p-6 border-b border-border flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center shrink-0">
+              <span className="text-white font-bold">L</span>
+            </div>
+            <div>
+              <div className="font-bold">Lumina</div>
+              <div className="text-xs text-foreground/50">Dashboard</div>
+            </div>
+          </div>
+          {/* Close button inside sidebar — mobile only */}
+          <button
+            onClick={() => setMobileOpen(false)}
+            className="md:hidden p-1 rounded-lg hover:bg-white/10 transition"
+            aria-label="Close menu"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Nav */}
+        <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                  isActive
+                    ? 'bg-emerald-600/20 text-emerald-500 border border-emerald-600/30'
+                    : 'text-foreground/70 hover:bg-white/5 hover:text-foreground'
+                }`}
+              >
+                <item.icon size={20} />
+                <span className="font-medium">{item.label}</span>
+              </Link>
+            )
+          })}
+        </nav>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border">
+          <div className="glassmorphism-dark p-4 rounded-lg">
+            <div className="text-sm font-semibold mb-1">Account Status</div>
+            <div className="text-xs text-foreground/60 mb-3">Professional Plan</div>
+            <button className="w-full px-3 py-2 text-sm rounded-lg bg-emerald-600 hover:bg-emerald-700 transition">
+              Upgrade
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  )
+}

package/components/docs/breadcrumb.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ChevronRight } from 'lucide-react'
+
+export function Breadcrumb() {
+  const pathname = usePathname()
+
+  // Skip if not in docs
+  if (!pathname.startsWith('/docs')) {
+    return null
+  }
+
+  const segments = pathname.split('/').filter(Boolean)
+
+  // Build breadcrumb items
+  const items = segments.map((segment, index) => {
+    const href = '/' + segments.slice(0, index + 1).join('/')
+    const label = segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ')
+
+    return { href, label }
+  })
+
+  return (
+    <div className="flex items-center gap-2 text-sm mb-6">
+      <Link
+        href="/docs"
+        className="text-foreground/60 hover:text-emerald-400 transition-colors"
+      >
+        Docs
+      </Link>
+
+      {items.slice(1).map((item, index) => (
+        <div key={item.href} className="flex items-center gap-2">
+          <ChevronRight size={16} className="text-foreground/30" />
+          <Link
+            href={item.href}
+            className={`transition-colors ${
+              index === items.length - 2
+                ? 'text-emerald-400 font-medium'
+                : 'text-foreground/60 hover:text-emerald-400'
+            }`}
+          >
+            {item.label}
+          </Link>
+        </div>
+      ))}
+    </div>
+  )
+}

package/components/docs/callout.tsx

@@ -0,0 +1,53 @@
+import { AlertCircle, Info, CheckCircle, AlertTriangle } from 'lucide-react'
+
+interface CalloutProps {
+  type: 'info' | 'warning' | 'error' | 'success'
+  title?: string
+  children: React.ReactNode
+}
+
+const calloutConfig = {
+  info: {
+    icon: Info,
+    bgColor: 'bg-blue-900/20',
+    borderColor: 'border-blue-600/30',
+    textColor: 'text-blue-400',
+  },
+  warning: {
+    icon: AlertTriangle,
+    bgColor: 'bg-amber-900/20',
+    borderColor: 'border-amber-600/30',
+    textColor: 'text-amber-400',
+  },
+  error: {
+    icon: AlertCircle,
+    bgColor: 'bg-red-900/20',
+    borderColor: 'border-red-600/30',
+    textColor: 'text-red-400',
+  },
+  success: {
+    icon: CheckCircle,
+    bgColor: 'bg-emerald-900/20',
+    borderColor: 'border-emerald-600/30',
+    textColor: 'text-emerald-400',
+  },
+}
+
+export function Callout({ type, title, children }: CalloutProps) {
+  const config = calloutConfig[type]
+  const Icon = config.icon
+
+  return (
+    <div
+      className={`my-4 p-4 rounded-lg border ${config.bgColor} ${config.borderColor} flex gap-3`}
+    >
+      <Icon size={20} className={`flex-shrink-0 mt-0.5 ${config.textColor}`} />
+      <div className="flex-1">
+        {title && (
+          <div className={`font-semibold ${config.textColor} mb-1`}>{title}</div>
+        )}
+        <div className="text-sm text-foreground/80">{children}</div>
+      </div>
+    </div>
+  )
+}

package/components/docs/code-block.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { Copy, Check } from 'lucide-react'
+import { useState } from 'react'
+
+interface CodeBlockProps {
+  code: string
+  language: string
+  title?: string
+  showLineNumbers?: boolean
+}
+
+export function CodeBlock({
+  code,
+  language,
+  title,
+  showLineNumbers = false,
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const lines = code.split('\n')
+
+  return (
+    <div className="my-4 rounded-lg overflow-hidden bg-black/40 border border-white/10">
+      {title && (
+        <div className="px-4 py-2 bg-white/5 border-b border-white/10 flex items-center justify-between">
+          <span className="text-sm font-mono text-foreground/70">{title}</span>
+          <span className="text-xs text-foreground/50 bg-white/10 px-2 py-1 rounded">
+            {language}
+          </span>
+        </div>
+      )}
+
+      <div className="overflow-x-auto">
+        <pre className="p-4 text-sm leading-relaxed">
+          <code className={`language-${language}`}>
+            {lines.map((line, index) => (
+              <div key={index} className="flex gap-4">
+                {showLineNumbers && (
+                  <span className="text-foreground/30 w-8 text-right select-none">
+                    {index + 1}
+                  </span>
+                )}
+                <span>{line}</span>
+              </div>
+            ))}
+          </code>
+        </pre>
+      </div>
+
+      <div className="px-4 py-2 bg-white/5 border-t border-white/10 flex justify-end">
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-2 px-3 py-1 rounded text-xs text-foreground/70 hover:text-emerald-400 hover:bg-emerald-600/10 transition-colors"
+        >
+          {copied ? (
+            <>
+              <Check size={14} />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy size={14} />
+              Copy
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

package/components/docs/docs-sidebar.tsx

@@ -0,0 +1,214 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ChevronDown, Search, X } from 'lucide-react'
+import { useState } from 'react'
+
+interface NavItem {
+  title: string
+  href: string
+  icon?: string
+  children?: NavItem[]
+}
+
+const navItems: NavItem[] = [
+  {
+    title: 'Getting Started',
+    href: '/docs',
+    icon: '🚀',
+    children: [
+      { title: 'Introduction', href: '/docs/getting-started/introduction' },
+      { title: 'Installation', href: '/docs/getting-started/installation' },
+      { title: 'Quick Start', href: '/docs/getting-started/quick-start' },
+      { title: 'Environment Setup', href: '/docs/getting-started/environment-setup' },
+    ],
+  },
+  {
+    title: 'SDK Reference',
+    href: '/docs/sdk',
+    icon: '⚙️',
+    children: [
+      { title: 'LuminaProvider', href: '/docs/sdk/lumina-provider' },
+      { title: 'WalletLogin', href: '/docs/sdk/wallet-login' },
+      { title: 'WalletDisplay', href: '/docs/sdk/wallet-display' },
+      { title: 'TransactionConfirm', href: '/docs/sdk/transaction-confirm' },
+      { title: 'Hooks', href: '/docs/sdk/hooks' },
+      { title: 'Types', href: '/docs/sdk/types' },
+    ],
+  },
+  {
+    title: 'API Reference',
+    href: '/docs/api',
+    icon: '📡',
+    children: [
+      { title: 'Authentication', href: '/docs/api/authentication' },
+      { title: 'Wallets', href: '/docs/api/wallets' },
+      { title: 'Transactions', href: '/docs/api/transactions' },
+      { title: 'Networks', href: '/docs/api/networks' },
+      { title: 'Rate Limits', href: '/docs/api/rate-limits' },
+      { title: 'Error Handling', href: '/docs/api/error-handling' },
+    ],
+  },
+  {
+    title: 'Guides',
+    href: '/docs/guides',
+    icon: '📚',
+    children: [
+      { title: 'Integration Guide', href: '/docs/guides/integration' },
+      { title: 'React Integration', href: '/docs/guides/react' },
+      { title: 'Next.js Setup', href: '/docs/guides/nextjs' },
+      { title: 'Vue.js Setup', href: '/docs/guides/vue' },
+      { title: 'Security Best Practices', href: '/docs/guides/security' },
+      { title: 'Testing', href: '/docs/guides/testing' },
+    ],
+  },
+  {
+    title: 'Examples',
+    href: '/docs/examples',
+    icon: '💡',
+    children: [
+      { title: 'Basic Setup', href: '/docs/examples/basic-setup' },
+      { title: 'User Authentication', href: '/docs/examples/authentication' },
+      { title: 'Send Transaction', href: '/docs/examples/send-transaction' },
+      { title: 'Query Balance', href: '/docs/examples/query-balance' },
+      { title: 'Multi-Chain Support', href: '/docs/examples/multi-chain' },
+    ],
+  },
+  {
+    title: 'Troubleshooting',
+    href: '/docs/troubleshooting',
+    icon: '🔧',
+    children: [
+      { title: 'Common Issues', href: '/docs/troubleshooting/common-issues' },
+      { title: 'FAQ', href: '/docs/troubleshooting/faq' },
+      { title: 'Support', href: '/docs/troubleshooting/support' },
+    ],
+  },
+]
+
+interface NavItemProps {
+  item: NavItem
+  level: number
+  onNavClick?: () => void
+}
+
+function NavItemComponent({ item, level, onNavClick }: NavItemProps) {
+  const pathname = usePathname()
+  const [isOpen, setIsOpen] = useState(true)
+
+  const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
+  const hasChildren = item.children && item.children.length > 0
+
+  return (
+    <div>
+      <Link
+        href={item.href}
+        className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
+          isActive
+            ? 'bg-emerald-600/20 text-emerald-400 border border-emerald-600/30'
+            : 'text-foreground/70 hover:text-foreground hover:bg-white/5'
+        }`}
+        onClick={() => {
+          if (hasChildren) setIsOpen(!isOpen)
+          if (!hasChildren && onNavClick) onNavClick()
+        }}
+      >
+        <span className="text-sm">{item.icon}</span>
+        <span className="flex-1 text-sm font-medium">{item.title}</span>
+        {hasChildren && (
+          <ChevronDown
+            size={16}
+            className={`transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          />
+        )}
+      </Link>
+
+      {hasChildren && isOpen && (
+        <div className="mt-1 ml-2 border-l border-white/10 pl-2 space-y-1">
+          {item.children!.map((child) => (
+            <Link
+              key={child.href}
+              href={child.href}
+              onClick={onNavClick}
+              className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
+                pathname === child.href
+                  ? 'bg-emerald-600/20 text-emerald-400'
+                  : 'text-foreground/60 hover:text-foreground hover:bg-white/5'
+              }`}
+            >
+              {child.title}
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Reusable sidebar content
+function SidebarContent({ onNavClick }: { onNavClick?: () => void }) {
+  return (
+    <>
+      <div className="sticky top-0 bg-card/80 backdrop-blur-sm p-4 border-b border-white/10">
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10">
+          <Search size={16} className="text-foreground/50" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className="bg-transparent text-sm outline-none text-foreground placeholder:text-foreground/50 flex-1"
+          />
+        </div>
+      </div>
+      <nav className="p-3 space-y-2">
+        {navItems.map((item) => (
+          <NavItemComponent key={item.href} item={item} level={0} onNavClick={onNavClick} />
+        ))}
+      </nav>
+    </>
+  )
+}
+
+interface DocsSidebarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function DocsSidebar({ isOpen, onClose }: DocsSidebarProps) {
+  return (
+    <>
+      {/* Desktop Sidebar */}
+      <aside className="hidden md:flex w-64 flex-col border-r border-white/10 bg-card overflow-y-auto shrink-0">
+        <SidebarContent />
+      </aside>
+
+      {/* Mobile Overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm md:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      {/* Mobile Drawer */}
+      <aside
+        className={`fixed top-0 left-0 z-50 h-full w-72 bg-card border-r border-white/10 overflow-y-auto transform transition-transform duration-300 ease-in-out md:hidden ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        {/* Close Button */}
+        <div className="flex items-center justify-between p-4 border-b border-white/10">
+          <span className="font-semibold text-sm">Documentation</span>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-md hover:bg-white/10 transition text-foreground/70 hover:text-foreground"
+            aria-label="Close menu"
+          >
+            <X size={18} />
+          </button>
+        </div>
+        <SidebarContent onNavClick={onClose} />
+      </aside>
+    </>
+  )
+}

package/components/docs/table-of-contents.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface Heading {
+  id: string
+  text: string
+  level: number
+}
+
+export function TableOfContents() {
+  const [headings, setHeadings] = useState<Heading[]>([])
+  const [activeId, setActiveId] = useState<string>('')
+
+  useEffect(() => {
+    // Get all headings from the main content area
+    const article = document.querySelector('article')
+    if (!article) return
+
+    const headingElements = Array.from(article.querySelectorAll('h2, h3, h4'))
+    const extractedHeadings: Heading[] = headingElements.map((element) => {
+      let id = element.id
+      if (!id) {
+        id = element.textContent?.toLowerCase().replace(/\s+/g, '-') || ''
+        element.id = id
+      }
+      return {
+        id,
+        text: element.textContent || '',
+        level: parseInt(element.tagName[1]),
+      }
+    })
+
+    setHeadings(extractedHeadings)
+  }, [])
+
+  useEffect(() => {
+    // Intersection observer for active heading
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const activeEntry = entries.find((entry) => entry.isIntersecting)
+        if (activeEntry) {
+          setActiveId(activeEntry.target.id)
+        }
+      },
+      { rootMargin: '-10% 0% -66%' }
+    )
+
+    document.querySelectorAll('h2, h3, h4').forEach((el) => {
+      observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  if (headings.length === 0) return null
+
+  return (
+    <aside className="w-64 hidden lg:block">
+      <div className="sticky top-4 space-y-3">
+        <div className="text-xs font-semibold text-foreground/50 uppercase tracking-wider px-2">
+          On this page
+        </div>
+        <nav className="space-y-1 text-sm">
+          {headings.map((heading) => (
+            <a
+              key={heading.id}
+              href={`#${heading.id}`}
+              className={`block transition-colors ${
+                activeId === heading.id
+                  ? 'text-emerald-400 font-medium border-l-2 border-emerald-400 pl-2'
+                  : 'text-foreground/60 hover:text-foreground border-l-2 border-transparent pl-2'
+              }`}
+              style={{ paddingLeft: `${(heading.level - 2) * 12 + 8}px` }}
+            >
+              {heading.text}
+            </a>
+          ))}
+        </nav>
+      </div>
+    </aside>
+  )
+}

package/components/sdk/lumina-provider.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { createContext, useContext, ReactNode } from 'react'
+import { apiClient } from '@/lib/api' // Adjust path as needed
+
+interface LuminaConfig {
+  apiKey: string
+  environment?: 'development' | 'production'
+  theme?: 'light' | 'dark'
+}
+
+interface LuminaContextType extends LuminaConfig {
+  // Expose a pre-configured fetcher for SDK components
+  fetchApi: (endpoint: string, options?: RequestInit) => Promise<any>
+}
+
+const LuminaContext = createContext<LuminaContextType | undefined>(undefined)
+
+export function LuminaProvider({
+  children,
+  apiKey,
+  environment = 'production',
+  theme = 'dark',
+}: {
+  children: ReactNode
+} & LuminaConfig) {
+  
+  // Wrap the SDK client so components just call fetchApi('/v1/auth/login', {...})
+  const fetchApi = async (endpoint: string, options?: RequestInit) => {
+    return apiClient.sdk(endpoint, apiKey, options);
+  };
+
+  return (
+    <LuminaContext.Provider value={{ apiKey, environment, theme, fetchApi }}>
+      {children}
+    </LuminaContext.Provider>
+  )
+}
+
+export function useLumina() {
+  const context = useContext(LuminaContext)
+  if (!context) {
+    throw new Error('useLumina must be used within a LuminaProvider')
+  }
+  return context
+}