@getjack/jack 0.1.32 → 0.1.34

package/templates/nextjs-shadcn/app/showcase.tsx

@@ -0,0 +1,1262 @@
+"use client";
+
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+} from "@/components/ui/command";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import { Input } from "@/components/ui/input";
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSeparator,
+	InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { Label } from "@/components/ui/label";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Progress } from "@/components/ui/progress";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Slider } from "@/components/ui/slider";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { Toggle } from "@/components/ui/toggle";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+	AlertCircle,
+	AlignCenter,
+	AlignLeft,
+	AlignRight,
+	Archive,
+	ArrowLeft,
+	Bell,
+	Bold,
+	CalendarIcon,
+	Check,
+	ChevronsUpDown,
+	Cloud,
+	Copy,
+	CreditCard,
+	FileText,
+	Flag,
+	Home,
+	Info,
+	Italic,
+	Laptop,
+	Loader2,
+	Mail,
+	Minus,
+	Monitor,
+	Moon,
+	MoreHorizontal,
+	Plus,
+	Search,
+	Settings,
+	Sun,
+	Terminal,
+	Underline,
+	User,
+} from "lucide-react";
+import { useState } from "react";
+
+export function ComponentShowcase() {
+	const [sliderValue, setSliderValue] = useState([400]);
+	const [gpuCount, setGpuCount] = useState(8);
+	const [copied, setCopied] = useState(false);
+	const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+	const [collapsibleOpen, setCollapsibleOpen] = useState(false);
+
+	return (
+		<div className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4 [&>*]:mb-4 [&>*]:break-inside-avoid">
+			{/* Payment Form */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Payment Method</CardTitle>
+					<p className="text-sm text-muted-foreground">
+						All transactions are secure and encrypted.
+					</p>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div className="space-y-1">
+						<Label>Name on Card</Label>
+						<Input defaultValue="John Doe" />
+					</div>
+					<div className="grid grid-cols-2 gap-3">
+						<div className="space-y-1">
+							<Label>Card Number</Label>
+							<Input placeholder="1234 5678 9012 3456" />
+						</div>
+						<div className="space-y-1">
+							<Label>CVV</Label>
+							<Input placeholder="123" />
+						</div>
+					</div>
+					<p className="text-xs text-muted-foreground">Enter your 16-digit number.</p>
+					<div className="grid grid-cols-2 gap-3">
+						<div className="space-y-1">
+							<Label>Month</Label>
+							<Select>
+								<SelectTrigger>
+									<SelectValue placeholder="MM" />
+								</SelectTrigger>
+								<SelectContent>
+									{Array.from({ length: 12 }, (_, i) => (
+										<SelectItem key={i + 1} value={String(i + 1).padStart(2, "0")}>
+											{String(i + 1).padStart(2, "0")}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="space-y-1">
+							<Label>Year</Label>
+							<Select>
+								<SelectTrigger>
+									<SelectValue placeholder="YYYY" />
+								</SelectTrigger>
+								<SelectContent>
+									{[2025, 2026, 2027, 2028, 2029].map((y) => (
+										<SelectItem key={y} value={String(y)}>
+											{y}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+					<Separator />
+					<div>
+						<h4 className="mb-1 font-medium text-sm">Billing Address</h4>
+						<p className="text-xs text-muted-foreground">
+							The billing address associated with your payment method
+						</p>
+					</div>
+					<div className="flex items-center gap-2">
+						<Checkbox id="same-address" defaultChecked />
+						<Label htmlFor="same-address">Same as shipping address</Label>
+					</div>
+					<Separator />
+					<div className="space-y-1">
+						<Label>Comments</Label>
+						<Textarea placeholder="Add any additional comments" />
+					</div>
+					<div className="flex gap-2">
+						<Button className="flex-1">Submit</Button>
+						<Button variant="outline" className="flex-1">
+							Cancel
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Status Badges & Chat */}
+			<Card>
+				<CardContent className="space-y-4 pt-6">
+					<div className="flex items-center justify-center gap-2">
+						<Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20">
+							<span className="mr-1 inline-block size-1.5 rounded-full bg-emerald-500 animate-pulse" />
+							Syncing
+						</Badge>
+						<Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20">
+							<span className="mr-1 inline-block size-1.5 rounded-full bg-blue-500 animate-pulse" />
+							Updating
+						</Badge>
+						<Badge className="bg-orange-500/10 text-orange-500 border-orange-500/20">
+							<span className="mr-1 inline-block size-1.5 rounded-full bg-orange-500 animate-pulse" />
+							Loading
+						</Badge>
+					</div>
+					<div className="rounded-lg border p-3">
+						<div className="flex items-center gap-2">
+							<Button variant="ghost" size="icon" className="size-8">
+								<Plus className="size-4" />
+							</Button>
+							<span className="flex-1 text-sm text-muted-foreground">Send a message...</span>
+							<Button variant="ghost" size="icon" className="size-8">
+								<ArrowLeft className="size-4 rotate-90" />
+							</Button>
+						</div>
+					</div>
+					<div>
+						<h4 className="font-medium text-sm">Price Range</h4>
+						<p className="text-xs text-muted-foreground mb-3">
+							Set your budget range (${sliderValue[0]} - $800).
+						</p>
+						<Slider defaultValue={[200, 800]} max={1000} step={50} onValueChange={setSliderValue} />
+					</div>
+					<div className="flex items-center gap-2 rounded-lg border px-3 py-2">
+						<Search className="size-4 text-muted-foreground" />
+						<span className="flex-1 text-sm text-muted-foreground">Search...</span>
+						<span className="text-xs text-muted-foreground">12 results</span>
+					</div>
+					<div className="flex items-center gap-2 rounded-lg border px-3 py-2">
+						<span className="flex-1 text-sm text-muted-foreground truncate">
+							https:// example.com
+						</span>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="size-7"
+							onClick={() => {
+								setCopied(true);
+								setTimeout(() => setCopied(false), 2000);
+							}}
+						>
+							{copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+						</Button>
+					</div>
+					<div className="rounded-lg border p-3 space-y-2">
+						<Textarea
+							placeholder="Ask, Search or Chat..."
+							className="border-0 p-0 shadow-none resize-none focus-visible:ring-0"
+							rows={2}
+						/>
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-1">
+								<Button variant="ghost" size="icon" className="size-7">
+									<Plus className="size-4" />
+								</Button>
+								<span className="text-xs text-muted-foreground">Auto</span>
+							</div>
+							<div className="flex items-center gap-2">
+								<span className="text-xs text-muted-foreground">52% used</span>
+								<Button size="icon" className="size-7 rounded-full">
+									<ArrowLeft className="size-3 rotate-90" />
+								</Button>
+							</div>
+						</div>
+					</div>
+					<div className="flex items-center gap-2 rounded-lg border px-3 py-2">
+						<span className="text-sm">@shadcn</span>
+						<Check className="ml-auto size-4 text-blue-500" />
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Compute Environment (Radio Group) */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Compute Environment</CardTitle>
+					<p className="text-sm text-muted-foreground">
+						Select the compute environment for your cluster.
+					</p>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<RadioGroup defaultValue="kubernetes">
+						<div className="flex items-start gap-3 rounded-lg border p-3 data-[state=checked]:border-primary">
+							<RadioGroupItem value="kubernetes" id="k8s" className="mt-0.5" />
+							<div>
+								<Label htmlFor="k8s" className="font-medium">
+									Kubernetes
+								</Label>
+								<p className="text-xs text-muted-foreground">
+									Run GPU workloads on a K8s configured cluster. This is the default.
+								</p>
+							</div>
+						</div>
+						<div className="flex items-start gap-3 rounded-lg border p-3">
+							<RadioGroupItem value="vm" id="vm" className="mt-0.5" />
+							<div>
+								<Label htmlFor="vm" className="font-medium">
+									Virtual Machine
+								</Label>
+								<p className="text-xs text-muted-foreground">
+									Access a VM configured cluster to run workloads. (Coming soon)
+								</p>
+							</div>
+						</div>
+					</RadioGroup>
+					<Separator />
+					<div className="flex items-center justify-between">
+						<div>
+							<h4 className="font-medium text-sm">Number of GPUs</h4>
+							<p className="text-xs text-muted-foreground">You can add more later.</p>
+						</div>
+						<div className="flex items-center gap-1">
+							<Input className="w-14 text-center" value={gpuCount} readOnly />
+							<Button
+								variant="outline"
+								size="icon"
+								className="size-8"
+								onClick={() => setGpuCount(Math.max(1, gpuCount - 1))}
+							>
+								<Minus className="size-3" />
+							</Button>
+							<Button
+								variant="outline"
+								size="icon"
+								className="size-8"
+								onClick={() => setGpuCount(gpuCount + 1)}
+							>
+								<Plus className="size-3" />
+							</Button>
+						</div>
+					</div>
+					<Separator />
+					<div className="flex items-center justify-between">
+						<div>
+							<h4 className="font-medium text-sm">Wallpaper Tinting</h4>
+							<p className="text-xs text-muted-foreground">Allow the wallpaper to be tinted.</p>
+						</div>
+						<Switch defaultChecked />
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Actions Bar */}
+			<Card>
+				<CardContent className="space-y-4 pt-6">
+					<div className="flex items-center gap-1">
+						<Button variant="outline" size="icon" className="size-8">
+							<ArrowLeft className="size-4" />
+						</Button>
+						<div className="flex flex-1 items-center gap-1 justify-end">
+							<Button variant="outline" size="sm">
+								Archive
+							</Button>
+							<Button variant="outline" size="sm">
+								Report
+							</Button>
+							<Button variant="outline" size="sm">
+								Snooze
+							</Button>
+							<Button variant="outline" size="icon" className="size-8">
+								<MoreHorizontal className="size-4" />
+							</Button>
+						</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<Checkbox id="terms" defaultChecked />
+						<Label htmlFor="terms">I agree to the terms and conditions</Label>
+					</div>
+					<Separator className="relative">
+						<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
+							Appearance Settings
+						</span>
+					</Separator>
+					<Pagination>
+						<PaginationContent>
+							<PaginationItem>
+								<PaginationPrevious href="#" />
+							</PaginationItem>
+							<PaginationItem>
+								<PaginationLink href="#" isActive>
+									1
+								</PaginationLink>
+							</PaginationItem>
+							<PaginationItem>
+								<PaginationLink href="#">2</PaginationLink>
+							</PaginationItem>
+							<PaginationItem>
+								<PaginationLink href="#">3</PaginationLink>
+							</PaginationItem>
+							<PaginationItem>
+								<PaginationNext href="#" />
+							</PaginationItem>
+						</PaginationContent>
+					</Pagination>
+				</CardContent>
+			</Card>
+
+			{/* Survey Toggle Group */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">How did you hear about us?</CardTitle>
+					<p className="text-sm text-muted-foreground">Select the option that best describes...</p>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<ToggleGroup type="single" defaultValue="social" className="flex-wrap">
+						<ToggleGroupItem value="social" className="gap-1">
+							<Check className="size-3" />
+							Social Media
+						</ToggleGroupItem>
+						<ToggleGroupItem value="search">Search Engine</ToggleGroupItem>
+						<ToggleGroupItem value="referral">Referral</ToggleGroupItem>
+						<ToggleGroupItem value="other">Other</ToggleGroupItem>
+					</ToggleGroup>
+					<Separator />
+					<div className="flex flex-col items-center gap-2 py-4">
+						<Spinner className="size-6" />
+						<h4 className="font-medium text-sm">Processing your request</h4>
+						<p className="text-xs text-muted-foreground text-center">
+							Please wait while we process your request. Do not refresh the page.
+						</p>
+						<Button variant="outline" size="sm" className="mt-1">
+							Cancel
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Text Formatting Toolbar */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Text Formatting</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					<div className="flex items-center gap-1">
+						<Toggle size="sm" aria-label="Bold" defaultPressed>
+							<Bold className="size-4" />
+						</Toggle>
+						<Toggle size="sm" aria-label="Italic">
+							<Italic className="size-4" />
+						</Toggle>
+						<Toggle size="sm" aria-label="Underline">
+							<Underline className="size-4" />
+						</Toggle>
+						<Separator orientation="vertical" className="mx-1 h-6" />
+						<ToggleGroup type="single" defaultValue="left">
+							<ToggleGroupItem value="left" size="sm">
+								<AlignLeft className="size-4" />
+							</ToggleGroupItem>
+							<ToggleGroupItem value="center" size="sm">
+								<AlignCenter className="size-4" />
+							</ToggleGroupItem>
+							<ToggleGroupItem value="right" size="sm">
+								<AlignRight className="size-4" />
+							</ToggleGroupItem>
+						</ToggleGroup>
+					</div>
+					<ToggleGroup type="single" defaultValue="copilot" className="justify-start">
+						<ToggleGroupItem value="copilot" className="gap-1 text-xs">
+							<Cloud className="size-3" /> Copilot
+						</ToggleGroupItem>
+						<ToggleGroupItem value="local" className="gap-1 text-xs">
+							<Monitor className="size-3" /> Local
+						</ToggleGroupItem>
+					</ToggleGroup>
+				</CardContent>
+			</Card>
+
+			{/* Team Members */}
+			<Card>
+				<CardContent className="space-y-4 pt-6">
+					<div className="flex flex-col items-center gap-2 py-2">
+						<div className="flex -space-x-3">
+							<Avatar className="border-2 border-background">
+								<AvatarFallback>AB</AvatarFallback>
+							</Avatar>
+							<Avatar className="border-2 border-background">
+								<AvatarFallback>CD</AvatarFallback>
+							</Avatar>
+						</div>
+						<h4 className="font-medium text-sm">No Team Members</h4>
+						<p className="text-xs text-muted-foreground text-center">
+							Invite your team to collaborate on this project.
+						</p>
+						<Button variant="outline" size="sm">
+							<Plus className="mr-1 size-3" /> Invite Members
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Data Table */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Recent Invoices</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Invoice</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead className="text-right">Amount</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							<TableRow>
+								<TableCell className="font-medium">INV-001</TableCell>
+								<TableCell>
+									<Badge variant="secondary" className="bg-emerald-500/10 text-emerald-600">
+										Paid
+									</Badge>
+								</TableCell>
+								<TableCell className="text-right">$250.00</TableCell>
+							</TableRow>
+							<TableRow>
+								<TableCell className="font-medium">INV-002</TableCell>
+								<TableCell>
+									<Badge variant="secondary">Pending</Badge>
+								</TableCell>
+								<TableCell className="text-right">$150.00</TableCell>
+							</TableRow>
+							<TableRow>
+								<TableCell className="font-medium">INV-003</TableCell>
+								<TableCell>
+									<Badge variant="secondary" className="bg-red-500/10 text-red-600">
+										Overdue
+									</Badge>
+								</TableCell>
+								<TableCell className="text-right">$350.00</TableCell>
+							</TableRow>
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+
+			{/* Skeleton Loading */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Loading States</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div className="flex items-center gap-3">
+						<Skeleton className="size-10 rounded-full" />
+						<div className="flex-1 space-y-2">
+							<Skeleton className="h-4 w-3/4" />
+							<Skeleton className="h-3 w-1/2" />
+						</div>
+					</div>
+					<Skeleton className="h-24 w-full" />
+					<div className="flex gap-2">
+						<Skeleton className="h-9 w-20" />
+						<Skeleton className="h-9 w-20" />
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Progress & Stats */}
+			<Card>
+				<CardContent className="space-y-4 pt-6">
+					<Tabs defaultValue="overview">
+						<TabsList className="w-full">
+							<TabsTrigger value="overview" className="flex-1">
+								Overview
+							</TabsTrigger>
+							<TabsTrigger value="analytics" className="flex-1">
+								Analytics
+							</TabsTrigger>
+						</TabsList>
+						<TabsContent value="overview" className="mt-3 space-y-3">
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm">
+									<span>Storage</span>
+									<span className="text-muted-foreground">75%</span>
+								</div>
+								<Progress value={75} />
+							</div>
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm">
+									<span>Bandwidth</span>
+									<span className="text-muted-foreground">45%</span>
+								</div>
+								<Progress value={45} />
+							</div>
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm">
+									<span>Requests</span>
+									<span className="text-muted-foreground">92%</span>
+								</div>
+								<Progress value={92} />
+							</div>
+						</TabsContent>
+						<TabsContent value="analytics" className="mt-3 space-y-3">
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm">
+									<span>Page Views</span>
+									<span className="font-medium">12,543</span>
+								</div>
+								<Progress value={62} />
+							</div>
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm">
+									<span>Bounce Rate</span>
+									<span className="font-medium">24%</span>
+								</div>
+								<Progress value={24} />
+							</div>
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm">
+									<span>Avg. Session</span>
+									<span className="font-medium">3m 42s</span>
+								</div>
+								<Progress value={55} />
+							</div>
+						</TabsContent>
+					</Tabs>
+				</CardContent>
+			</Card>
+
+			{/* Accordion */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">FAQ</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Accordion type="single" collapsible defaultValue="item-1">
+						<AccordionItem value="item-1">
+							<AccordionTrigger className="text-sm">What components are included?</AccordionTrigger>
+							<AccordionContent>
+								All 57 shadcn/ui components are pre-installed and ready to import.
+							</AccordionContent>
+						</AccordionItem>
+						<AccordionItem value="item-2">
+							<AccordionTrigger className="text-sm">How do I deploy?</AccordionTrigger>
+							<AccordionContent>
+								Run <code className="bg-muted px-1 rounded">jack ship</code> to deploy to production
+								instantly.
+							</AccordionContent>
+						</AccordionItem>
+						<AccordionItem value="item-3">
+							<AccordionTrigger className="text-sm">Is there a database?</AccordionTrigger>
+							<AccordionContent>
+								Yes, D1 SQLite database is included and globally replicated.
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
+				</CardContent>
+			</Card>
+
+			{/* Buttons Grid */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Button Variants</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					<div className="flex flex-wrap gap-2">
+						<Button size="sm">Primary</Button>
+						<Button size="sm" variant="secondary">
+							Secondary
+						</Button>
+						<Button size="sm" variant="outline">
+							Outline
+						</Button>
+						<Button size="sm" variant="destructive">
+							Destructive
+						</Button>
+						<Button size="sm" variant="ghost">
+							Ghost
+						</Button>
+						<Button size="sm" variant="link">
+							Link
+						</Button>
+					</div>
+					<Separator />
+					<div className="flex flex-wrap gap-2">
+						<Button size="sm" disabled>
+							<Loader2 className="mr-1 size-3 animate-spin" />
+							Loading
+						</Button>
+						<Button size="sm" variant="outline">
+							<CreditCard className="mr-1 size-3" />
+							Pay Now
+						</Button>
+						<Button size="sm" variant="outline">
+							<Archive className="mr-1 size-3" />
+							Archive
+						</Button>
+						<Button size="sm" variant="outline">
+							<Flag className="mr-1 size-3" />
+							Flag
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Alerts */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Alerts</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					<Alert>
+						<Terminal className="size-4" />
+						<AlertTitle>Heads up!</AlertTitle>
+						<AlertDescription>You can add components using the CLI.</AlertDescription>
+					</Alert>
+					<Alert variant="destructive">
+						<AlertCircle className="size-4" />
+						<AlertTitle>Error</AlertTitle>
+						<AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+					</Alert>
+					<Alert className="border-blue-500/50 text-blue-600 [&>svg]:text-blue-600">
+						<Info className="size-4" />
+						<AlertTitle>Note</AlertTitle>
+						<AlertDescription>This feature is in beta. Feedback welcome.</AlertDescription>
+					</Alert>
+				</CardContent>
+			</Card>
+
+			{/* Calendar */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Date Picker</CardTitle>
+				</CardHeader>
+				<CardContent className="flex justify-center">
+					<Calendar
+						mode="single"
+						selected={selectedDate}
+						onSelect={setSelectedDate}
+						className="rounded-md border"
+					/>
+				</CardContent>
+			</Card>
+
+			{/* Dialog & Sheet */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Overlays</CardTitle>
+					<p className="text-sm text-muted-foreground">Dialog, Sheet & Popover components</p>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					<Dialog>
+						<DialogTrigger asChild>
+							<Button variant="outline" className="w-full">
+								Open Dialog
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Edit Profile</DialogTitle>
+								<DialogDescription>
+									Make changes to your profile here. Click save when done.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="space-y-3 py-4">
+								<div className="space-y-1">
+									<Label htmlFor="dialog-name">Name</Label>
+									<Input id="dialog-name" defaultValue="John Doe" />
+								</div>
+								<div className="space-y-1">
+									<Label htmlFor="dialog-email">Email</Label>
+									<Input id="dialog-email" defaultValue="john@example.com" />
+								</div>
+							</div>
+							<DialogFooter>
+								<Button type="submit">Save changes</Button>
+							</DialogFooter>
+						</DialogContent>
+					</Dialog>
+					<Sheet>
+						<SheetTrigger asChild>
+							<Button variant="outline" className="w-full">
+								Open Sheet
+							</Button>
+						</SheetTrigger>
+						<SheetContent>
+							<SheetHeader>
+								<SheetTitle>Notifications</SheetTitle>
+								<SheetDescription>You have 3 unread notifications.</SheetDescription>
+							</SheetHeader>
+							<div className="mt-4 space-y-3">
+								{[
+									{ icon: Mail, title: "New message", desc: "from Alice" },
+									{ icon: Bell, title: "Reminder", desc: "Team meeting at 3pm" },
+									{ icon: FileText, title: "Document shared", desc: "Q4 Report" },
+								].map((item) => (
+									<div key={item.title} className="flex items-start gap-3 rounded-lg border p-3">
+										<item.icon className="mt-0.5 size-4 text-muted-foreground" />
+										<div>
+											<p className="text-sm font-medium">{item.title}</p>
+											<p className="text-xs text-muted-foreground">{item.desc}</p>
+										</div>
+									</div>
+								))}
+							</div>
+						</SheetContent>
+					</Sheet>
+					<Popover>
+						<PopoverTrigger asChild>
+							<Button variant="outline" className="w-full">
+								Open Popover
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="w-80">
+							<div className="space-y-2">
+								<h4 className="font-medium text-sm">Dimensions</h4>
+								<p className="text-xs text-muted-foreground">Set the dimensions for the layer.</p>
+								<div className="grid grid-cols-2 gap-2">
+									<div className="space-y-1">
+										<Label className="text-xs">Width</Label>
+										<Input defaultValue="100%" className="h-8" />
+									</div>
+									<div className="space-y-1">
+										<Label className="text-xs">Height</Label>
+										<Input defaultValue="25px" className="h-8" />
+									</div>
+								</div>
+							</div>
+						</PopoverContent>
+					</Popover>
+				</CardContent>
+			</Card>
+
+			{/* Breadcrumb & Navigation */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Navigation</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<Breadcrumb>
+						<BreadcrumbList>
+							<BreadcrumbItem>
+								<BreadcrumbLink href="#">
+									<Home className="size-3.5" />
+								</BreadcrumbLink>
+							</BreadcrumbItem>
+							<BreadcrumbSeparator />
+							<BreadcrumbItem>
+								<BreadcrumbLink href="#">Components</BreadcrumbLink>
+							</BreadcrumbItem>
+							<BreadcrumbSeparator />
+							<BreadcrumbItem>
+								<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+							</BreadcrumbItem>
+						</BreadcrumbList>
+					</Breadcrumb>
+					<Separator />
+					<div className="flex items-center gap-1">
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="icon" className="size-8">
+									<Home className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Home</TooltipContent>
+						</Tooltip>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="icon" className="size-8">
+									<Settings className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Settings</TooltipContent>
+						</Tooltip>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="icon" className="size-8">
+									<User className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Profile</TooltipContent>
+						</Tooltip>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="icon" className="size-8">
+									<Bell className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Notifications</TooltipContent>
+						</Tooltip>
+					</div>
+					<Separator />
+					<div className="flex items-center gap-2">
+						<Badge variant="outline">v2.4.0</Badge>
+						<Badge
+							variant="outline"
+							className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20"
+						>
+							Stable
+						</Badge>
+						<Badge variant="outline" className="bg-blue-500/10 text-blue-600 border-blue-500/20">
+							Latest
+						</Badge>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* OTP Input */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Verification Code</CardTitle>
+					<p className="text-sm text-muted-foreground">
+						Enter the 6-digit code sent to your email.
+					</p>
+				</CardHeader>
+				<CardContent className="flex flex-col items-center gap-4">
+					<InputOTP maxLength={6} defaultValue="482">
+						<InputOTPGroup>
+							<InputOTPSlot index={0} />
+							<InputOTPSlot index={1} />
+							<InputOTPSlot index={2} />
+						</InputOTPGroup>
+						<InputOTPSeparator />
+						<InputOTPGroup>
+							<InputOTPSlot index={3} />
+							<InputOTPSlot index={4} />
+							<InputOTPSlot index={5} />
+						</InputOTPGroup>
+					</InputOTP>
+					<p className="text-xs text-muted-foreground">
+						Didn&apos;t receive a code?{" "}
+						<button type="button" className="underline underline-offset-4">
+							Resend
+						</button>
+					</p>
+				</CardContent>
+			</Card>
+
+			{/* Command Palette */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Command Palette</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Command className="rounded-lg border">
+						<CommandInput placeholder="Type a command or search..." />
+						<CommandList>
+							<CommandEmpty>No results found.</CommandEmpty>
+							<CommandGroup heading="Suggestions">
+								<CommandItem>
+									<CalendarIcon className="mr-2 size-4" />
+									<span>Calendar</span>
+								</CommandItem>
+								<CommandItem>
+									<Search className="mr-2 size-4" />
+									<span>Search</span>
+								</CommandItem>
+								<CommandItem>
+									<Settings className="mr-2 size-4" />
+									<span>Settings</span>
+								</CommandItem>
+							</CommandGroup>
+							<CommandSeparator />
+							<CommandGroup heading="Settings">
+								<CommandItem>
+									<User className="mr-2 size-4" />
+									<span>Profile</span>
+								</CommandItem>
+								<CommandItem>
+									<Mail className="mr-2 size-4" />
+									<span>Mail</span>
+								</CommandItem>
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</CardContent>
+			</Card>
+
+			{/* Collapsible + HoverCard */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Expandable Sections</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					<Collapsible open={collapsibleOpen} onOpenChange={setCollapsibleOpen}>
+						<div className="flex items-center justify-between rounded-lg border px-3 py-2">
+							<span className="text-sm font-medium">3 starred repositories</span>
+							<CollapsibleTrigger asChild>
+								<Button variant="ghost" size="icon" className="size-7">
+									<ChevronsUpDown className="size-3.5" />
+								</Button>
+							</CollapsibleTrigger>
+						</div>
+						<CollapsibleContent className="mt-2 space-y-2">
+							{["shadcn/ui", "vercel/next.js", "tailwindlabs/tailwindcss"].map((repo) => (
+								<div key={repo} className="rounded-lg border px-3 py-2 text-sm">
+									{repo}
+								</div>
+							))}
+						</CollapsibleContent>
+					</Collapsible>
+					<Separator />
+					<div className="flex items-center gap-2">
+						<span className="text-sm">Hover for info:</span>
+						<HoverCard>
+							<HoverCardTrigger asChild>
+								<Button variant="link" className="h-auto p-0 text-sm">
+									@shadcn
+								</Button>
+							</HoverCardTrigger>
+							<HoverCardContent className="w-72">
+								<div className="flex gap-3">
+									<Avatar>
+										<AvatarFallback>SC</AvatarFallback>
+									</Avatar>
+									<div className="space-y-1">
+										<h4 className="text-sm font-semibold">@shadcn</h4>
+										<p className="text-xs text-muted-foreground">
+											Creator of shadcn/ui. Building in the open.
+										</p>
+										<div className="flex items-center text-xs text-muted-foreground">
+											<CalendarIcon className="mr-1 size-3" />
+											Joined December 2021
+										</div>
+									</div>
+								</div>
+							</HoverCardContent>
+						</HoverCard>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Carousel */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Carousel</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Carousel className="mx-auto w-full max-w-xs">
+						<CarouselContent>
+							{Array.from({ length: 5 }, (_, i) => (
+								<CarouselItem key={`slide-${i + 1}`}>
+									<div className="p-1">
+										<Card>
+											<CardContent className="flex aspect-square items-center justify-center p-6">
+												<span className="text-3xl font-semibold">{i + 1}</span>
+											</CardContent>
+										</Card>
+									</div>
+								</CarouselItem>
+							))}
+						</CarouselContent>
+						<CarouselPrevious />
+						<CarouselNext />
+					</Carousel>
+				</CardContent>
+			</Card>
+
+			{/* Scroll Area + Tags */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Components List</CardTitle>
+					<p className="text-sm text-muted-foreground">Scroll to explore all 57 components</p>
+				</CardHeader>
+				<CardContent>
+					<ScrollArea className="h-48 rounded-md border">
+						<div className="p-4 space-y-2">
+							{[
+								"Accordion",
+								"Alert",
+								"Alert Dialog",
+								"Aspect Ratio",
+								"Avatar",
+								"Badge",
+								"Breadcrumb",
+								"Button",
+								"Calendar",
+								"Card",
+								"Carousel",
+								"Chart",
+								"Checkbox",
+								"Collapsible",
+								"Combobox",
+								"Command",
+								"Context Menu",
+								"Dialog",
+								"Drawer",
+								"Dropdown Menu",
+								"Form",
+								"Hover Card",
+								"Input",
+								"Input OTP",
+								"Label",
+								"Menubar",
+								"Navigation Menu",
+								"Pagination",
+								"Popover",
+								"Progress",
+								"Radio Group",
+								"Resizable",
+								"Scroll Area",
+								"Select",
+								"Separator",
+								"Sheet",
+								"Sidebar",
+								"Skeleton",
+								"Slider",
+								"Sonner",
+								"Spinner",
+								"Switch",
+								"Table",
+								"Tabs",
+								"Textarea",
+								"Toggle",
+								"Toggle Group",
+								"Tooltip",
+							].map((comp) => (
+								<div
+									key={comp}
+									className="flex items-center justify-between rounded px-2 py-1 text-sm hover:bg-muted"
+								>
+									<span>{comp}</span>
+									<Badge variant="outline" className="text-xs">
+										installed
+									</Badge>
+								</div>
+							))}
+						</div>
+					</ScrollArea>
+				</CardContent>
+			</Card>
+
+			{/* Theme Toggle Card */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Appearance</CardTitle>
+					<p className="text-sm text-muted-foreground">Customize your experience</p>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div className="grid grid-cols-3 gap-2">
+						{[
+							{ icon: Sun, label: "Light" },
+							{ icon: Moon, label: "Dark" },
+							{ icon: Laptop, label: "System" },
+						].map((theme) => (
+							<Button
+								key={theme.label}
+								variant={theme.label === "System" ? "default" : "outline"}
+								size="sm"
+								className="flex-col gap-1 h-auto py-3"
+							>
+								<theme.icon className="size-4" />
+								<span className="text-xs">{theme.label}</span>
+							</Button>
+						))}
+					</div>
+					<Separator />
+					<div className="space-y-3">
+						<div className="flex items-center justify-between">
+							<div>
+								<p className="text-sm font-medium">Notifications</p>
+								<p className="text-xs text-muted-foreground">Receive push notifications</p>
+							</div>
+							<Switch defaultChecked />
+						</div>
+						<div className="flex items-center justify-between">
+							<div>
+								<p className="text-sm font-medium">Marketing emails</p>
+								<p className="text-xs text-muted-foreground">Receive emails about new features</p>
+							</div>
+							<Switch />
+						</div>
+						<div className="flex items-center justify-between">
+							<div>
+								<p className="text-sm font-medium">Social notifications</p>
+								<p className="text-xs text-muted-foreground">
+									Receive notifications for friend requests
+								</p>
+							</div>
+							<Switch defaultChecked />
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* User Profile Card */}
+			<Card>
+				<CardContent className="pt-6">
+					<div className="flex flex-col items-center gap-3 text-center">
+						<Avatar className="size-16">
+							<AvatarFallback className="text-lg">JD</AvatarFallback>
+						</Avatar>
+						<div>
+							<h4 className="font-semibold">Jane Doe</h4>
+							<p className="text-sm text-muted-foreground">jane@example.com</p>
+						</div>
+						<div className="flex gap-4 text-center">
+							<div>
+								<p className="text-lg font-semibold">142</p>
+								<p className="text-xs text-muted-foreground">Posts</p>
+							</div>
+							<Separator orientation="vertical" className="h-10" />
+							<div>
+								<p className="text-lg font-semibold">2.4k</p>
+								<p className="text-xs text-muted-foreground">Followers</p>
+							</div>
+							<Separator orientation="vertical" className="h-10" />
+							<div>
+								<p className="text-lg font-semibold">891</p>
+								<p className="text-xs text-muted-foreground">Following</p>
+							</div>
+						</div>
+						<div className="flex gap-2 w-full">
+							<Button size="sm" className="flex-1">
+								Follow
+							</Button>
+							<Button size="sm" variant="outline" className="flex-1">
+								Message
+							</Button>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}