@cyberbloxai/ui-kit 0.1.2 → 0.2.1

package/src/components/showcase/ComponentsShowcase.tsx

@@ -0,0 +1,133 @@
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Progress } from "@/components/ui/progress";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Loader2, Star, Download, Heart, Zap, Check } from "lucide-react";
+
+const ComponentsShowcase = () => {
+  return (
+    <div className="w-full max-w-2xl mx-auto space-y-8">
+      {/* Buttons */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Buttons</h4>
+        <div className="flex flex-wrap gap-2">
+          <Button className="bg-primary text-primary-foreground hover:bg-primary/90">Primary</Button>
+          <Button variant="secondary" className="bg-secondary text-secondary-foreground">Secondary</Button>
+          <Button variant="outline" className="border-border/60 hover:bg-muted/60">Outline</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button className="bg-primary text-primary-foreground" disabled>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading
+          </Button>
+          <Button variant="ghost" className="hover:bg-muted/60">Ghost</Button>
+        </div>
+      </div>
+
+      {/* Inputs */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Inputs</h4>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <Input placeholder="Default input" className="bg-muted/50 border-border/60" />
+          <Input placeholder="Disabled input" disabled className="bg-muted/30 border-border/40" />
+        </div>
+      </div>
+
+      {/* Badges */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Badges</h4>
+        <div className="flex flex-wrap gap-2">
+          <Badge className="bg-primary/20 text-primary border-0">New</Badge>
+          <Badge variant="secondary" className="bg-secondary">Beta</Badge>
+          <Badge variant="destructive">Critical</Badge>
+          <Badge variant="outline" className="border-success/40 text-success">Stable</Badge>
+          <Badge variant="outline" className="border-warning/40 text-warning">Pending</Badge>
+        </div>
+      </div>
+
+      {/* Controls row */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Controls</h4>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div className="glass-card p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm text-secondary-foreground">Dark Mode</Label>
+              <Switch />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-sm text-secondary-foreground">Notifications</Label>
+              <Switch defaultChecked />
+            </div>
+          </div>
+          <div className="glass-card p-4 space-y-4">
+            <Label className="text-sm text-secondary-foreground">Volume</Label>
+            <Slider defaultValue={[65]} max={100} step={1} />
+            <Label className="text-sm text-secondary-foreground">Brightness</Label>
+            <Slider defaultValue={[80]} max={100} step={1} />
+          </div>
+          <div className="glass-card p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Checkbox id="t1" defaultChecked />
+              <Label htmlFor="t1" className="text-sm text-secondary-foreground">Design system</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="t2" defaultChecked />
+              <Label htmlFor="t2" className="text-sm text-secondary-foreground">Components</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="t3" />
+              <Label htmlFor="t3" className="text-sm text-secondary-foreground">Documentation</Label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Avatars & Progress */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Avatars & Progress</h4>
+        <div className="flex items-center gap-6 flex-wrap">
+          <div className="flex -space-x-2">
+            {["AK", "BR", "CS", "DW", "+3"].map((initials, i) => (
+              <Avatar key={i} className="h-8 w-8 border-2 border-background">
+                <AvatarFallback className={`text-[10px] ${i === 4 ? "bg-muted/60 text-muted-foreground" : "bg-primary/20 text-primary"}`}>
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+          <div className="flex-1 space-y-1.5 min-w-[200px]">
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>Upload Progress</span>
+              <span>73%</span>
+            </div>
+            <Progress value={73} className="h-2 bg-muted/60" />
+          </div>
+        </div>
+      </div>
+
+      {/* Icon buttons */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Icon Actions</h4>
+        <div className="flex flex-wrap gap-2">
+          {[
+            { icon: Star, label: "Star" },
+            { icon: Download, label: "Download" },
+            { icon: Heart, label: "Like" },
+            { icon: Zap, label: "Boost" },
+            { icon: Check, label: "Approve" },
+          ].map(({ icon: Icon, label }) => (
+            <Button key={label} variant="outline" size="sm" className="bg-muted/30 border-border/60 hover:bg-muted/60 text-xs gap-1.5">
+              <Icon className="h-3.5 w-3.5" /> {label}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentsShowcase;

package/src/components/showcase/DashboardShowcase.tsx

@@ -0,0 +1,153 @@
+import { motion } from "framer-motion";
+import { TrendingUp, Users, DollarSign, Activity, BarChart3, ArrowUpRight, ArrowDownRight, Bell, Search, ChevronDown } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+
+const stats = [
+  { label: "Revenue", value: "$45,231", change: "+20.1%", up: true, icon: DollarSign },
+  { label: "Users", value: "2,350", change: "+180", up: true, icon: Users },
+  { label: "Active Now", value: "573", change: "-2.4%", up: false, icon: Activity },
+  { label: "Growth", value: "12.5%", change: "+4.1%", up: true, icon: TrendingUp },
+];
+
+const activities = [
+  { user: "AK", name: "Alice Kim", action: "deployed v2.4.1", time: "2m ago" },
+  { user: "BR", name: "Bob Ross", action: "merged PR #142", time: "15m ago" },
+  { user: "CS", name: "Carol Smith", action: "opened issue #89", time: "1h ago" },
+  { user: "DW", name: "Dave Wilson", action: "updated config", time: "3h ago" },
+];
+
+const DashboardShowcase = () => {
+  return (
+    <div className="w-full space-y-4">
+      {/* Mini header */}
+      <div className="flex items-center justify-between glass-card p-3 px-4">
+        <div className="flex items-center gap-3">
+          <BarChart3 className="h-5 w-5 text-primary" />
+          <span className="font-semibold text-sm text-foreground">Dashboard</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="relative hidden sm:block">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <input className="bg-muted/50 border border-border/60 rounded-md pl-8 pr-3 py-1.5 text-xs text-foreground placeholder:text-muted-foreground w-40 focus:outline-none focus:border-primary/50" placeholder="Search..." />
+          </div>
+          <button className="relative p-1.5 rounded-md hover:bg-muted/60 transition-colors">
+            <Bell className="h-4 w-4 text-muted-foreground" />
+            <span className="absolute top-1 right-1 h-1.5 w-1.5 bg-primary rounded-full" />
+          </button>
+          <div className="flex items-center gap-1.5 pl-2 border-l border-border/60">
+            <Avatar className="h-6 w-6">
+              <AvatarFallback className="bg-primary/20 text-primary text-[10px]">JD</AvatarFallback>
+            </Avatar>
+            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+          </div>
+        </div>
+      </div>
+
+      {/* Stat cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        {stats.map((stat, i) => (
+          <motion.div
+            key={stat.label}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.1 }}
+            className="glass-card p-3 space-y-2"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-muted-foreground">{stat.label}</span>
+              <stat.icon className="h-3.5 w-3.5 text-muted-foreground" />
+            </div>
+            <div className="text-xl font-bold text-foreground">{stat.value}</div>
+            <div className="flex items-center gap-1">
+              {stat.up ? (
+                <ArrowUpRight className="h-3 w-3 text-success" />
+              ) : (
+                <ArrowDownRight className="h-3 w-3 text-destructive" />
+              )}
+              <span className={`text-xs ${stat.up ? "text-success" : "text-destructive"}`}>{stat.change}</span>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Chart placeholder + Activity */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-3">
+        <div className="lg:col-span-3 glass-card p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-foreground">Revenue Overview</span>
+            <Badge variant="secondary" className="text-xs bg-muted/60">Monthly</Badge>
+          </div>
+          <div className="flex items-end gap-1.5 h-32">
+            {[40, 65, 45, 80, 55, 90, 70, 85, 60, 95, 75, 88].map((h, i) => (
+              <motion.div
+                key={i}
+                initial={{ height: 0 }}
+                animate={{ height: `${h}%` }}
+                transition={{ delay: i * 0.05, duration: 0.5 }}
+                className="flex-1 rounded-t-sm bg-primary/30 hover:bg-primary/50 transition-colors relative group"
+              >
+                <div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-card border border-border/60 text-[10px] text-foreground px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+                  ${(h * 520).toLocaleString()}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+          <div className="flex justify-between text-[10px] text-muted-foreground">
+            <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
+            <span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span>
+          </div>
+        </div>
+
+        <div className="lg:col-span-2 glass-card p-4 space-y-3">
+          <span className="text-sm font-medium text-foreground">Recent Activity</span>
+          <div className="space-y-3">
+            {activities.map((a, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, x: 10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: i * 0.1 }}
+                className="flex items-center gap-3"
+              >
+                <Avatar className="h-7 w-7">
+                  <AvatarFallback className="bg-accent/20 text-accent text-[10px]">{a.user}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs text-foreground truncate">
+                    <span className="font-medium">{a.name}</span>{" "}
+                    <span className="text-muted-foreground">{a.action}</span>
+                  </p>
+                  <p className="text-[10px] text-muted-foreground">{a.time}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Progress section */}
+      <div className="glass-card p-4 space-y-3">
+        <span className="text-sm font-medium text-foreground">Project Progress</span>
+        <div className="space-y-3">
+          {[
+            { name: "UI Components", value: 85 },
+            { name: "API Integration", value: 62 },
+            { name: "Testing", value: 40 },
+          ].map((p) => (
+            <div key={p.name} className="space-y-1.5">
+              <div className="flex justify-between text-xs">
+                <span className="text-secondary-foreground">{p.name}</span>
+                <span className="text-muted-foreground">{p.value}%</span>
+              </div>
+              <Progress value={p.value} className="h-1.5 bg-muted/60" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardShowcase;

package/src/components/showcase/ErrorShowcase.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { FileQuestion, ServerCrash, WifiOff, ShieldX, Wrench } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const errors = [
+  { key: "404", icon: FileQuestion, title: "404 — Not Found", desc: "The page you're looking for doesn't exist or has been moved.", color: "text-warning" },
+  { key: "500", icon: ServerCrash, title: "500 — Server Error", desc: "Something went wrong on our end. We're working on it.", color: "text-destructive" },
+  { key: "offline", icon: WifiOff, title: "No Connection", desc: "You appear to be offline. Check your internet connection.", color: "text-muted-foreground" },
+  { key: "403", icon: ShieldX, title: "403 — Forbidden", desc: "You don't have permission to access this resource.", color: "text-accent" },
+  { key: "maintenance", icon: Wrench, title: "Under Maintenance", desc: "We're making improvements. We'll be back shortly.", color: "text-info" },
+];
+
+const ErrorShowcase = () => {
+  const [active, setActive] = useState("404");
+  const current = errors.find((e) => e.key === active)!;
+  const Icon = current.icon;
+
+  return (
+    <div className="w-full max-w-lg mx-auto space-y-6">
+      <div className="flex flex-wrap gap-2 justify-center">
+        {errors.map((e) => (
+          <Button
+            key={e.key}
+            variant={active === e.key ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActive(e.key)}
+            className={`text-xs ${active === e.key ? "bg-primary text-primary-foreground" : "bg-muted/30 border-border/60 hover:bg-muted/60"}`}
+          >
+            {e.key}
+          </Button>
+        ))}
+      </div>
+
+      <motion.div
+        key={active}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="glass-card p-8 flex flex-col items-center text-center space-y-4"
+      >
+        <div className={`p-4 rounded-2xl bg-muted/40 ${current.color}`}>
+          <Icon className="h-12 w-12" />
+        </div>
+        <h3 className="text-xl font-bold text-foreground">{current.title}</h3>
+        <p className="text-sm text-muted-foreground max-w-xs">{current.desc}</p>
+        <div className="flex gap-2 pt-2">
+          <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90 text-xs">Go Home</Button>
+          <Button size="sm" variant="outline" className="bg-muted/30 border-border/60 hover:bg-muted/60 text-xs">Try Again</Button>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default ErrorShowcase;

package/src/components/showcase/NotificationShowcase.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { CheckCircle, AlertTriangle, XCircle, Info, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type NotifType = "success" | "error" | "warning" | "info";
+
+interface Notification {
+  id: number;
+  type: NotifType;
+  title: string;
+  message: string;
+}
+
+const config: Record<NotifType, { icon: typeof CheckCircle; colorClass: string; borderClass: string }> = {
+  success: { icon: CheckCircle, colorClass: "text-success", borderClass: "border-l-success" },
+  error: { icon: XCircle, colorClass: "text-destructive", borderClass: "border-l-destructive" },
+  warning: { icon: AlertTriangle, colorClass: "text-warning", borderClass: "border-l-warning" },
+  info: { icon: Info, colorClass: "text-info", borderClass: "border-l-info" },
+};
+
+const messages: Record<NotifType, { title: string; message: string }> = {
+  success: { title: "Success!", message: "Your changes have been saved successfully." },
+  error: { title: "Error", message: "Something went wrong. Please try again." },
+  warning: { title: "Warning", message: "This action cannot be undone." },
+  info: { title: "Info", message: "A new version is available for download." },
+};
+
+let idCounter = 0;
+
+const NotificationShowcase = () => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const addNotification = (type: NotifType) => {
+    const notif: Notification = { id: ++idCounter, type, ...messages[type] };
+    setNotifications((prev) => [...prev, notif]);
+    setTimeout(() => removeNotification(notif.id), 4000);
+  };
+
+  const removeNotification = (id: number) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  };
+
+  return (
+    <div className="w-full max-w-lg mx-auto space-y-6">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+        {(["success", "error", "warning", "info"] as NotifType[]).map((type) => {
+          const Icon = config[type].icon;
+          return (
+            <Button
+              key={type}
+              variant="outline"
+              onClick={() => addNotification(type)}
+              className="bg-muted/30 border-border/60 hover:bg-muted/60 capitalize text-xs gap-1.5"
+            >
+              <Icon className={`h-3.5 w-3.5 ${config[type].colorClass}`} />
+              {type}
+            </Button>
+          );
+        })}
+      </div>
+
+      <div className="space-y-2 min-h-[200px]">
+        <AnimatePresence mode="popLayout">
+          {notifications.map((notif) => {
+            const { icon: Icon, colorClass, borderClass } = config[notif.type];
+            return (
+              <motion.div
+                key={notif.id}
+                initial={{ opacity: 0, y: -10, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, x: 100, scale: 0.95 }}
+                layout
+                className={`glass-card border-l-4 ${borderClass} p-3 flex items-start gap-3`}
+              >
+                <Icon className={`h-4 w-4 mt-0.5 flex-shrink-0 ${colorClass}`} />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground">{notif.title}</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{notif.message}</p>
+                </div>
+                <button
+                  onClick={() => removeNotification(notif.id)}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+
+        {notifications.length === 0 && (
+          <div className="flex items-center justify-center h-[200px] text-sm text-muted-foreground">
+            Click a button above to trigger notifications
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationShowcase;

package/src/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };