gladvn 0.2.33 → 0.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladvn",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "type": "module",
   "packageManager": "pnpm@10.11.0",
   "description": "A CLI to scaffold beautiful, accessible React components into your project. Powered by Tailwind CSS v4 and Base UI.",

package/src/blocks/auth-form.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "../components/micro/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/micro/card";
+import { Checkbox } from "../components/micro/checkbox";
+import { Input } from "../components/micro/input";
+import { Label } from "../components/micro/label";
+
+export default function AuthCardBlock() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [mode, setMode] = useState<"login" | "register">("login");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 1000);
+  };
+
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center p-4 bg-muted/20">
+      <Card className="w-full max-w-sm border-0 shadow-none bg-transparent">
+        <CardHeader className="text-left px-0 pt-0">
+          <CardTitle className="text-[28px] font-bold text-[#5e5e6e]">
+            {mode === "login" ? "Welcome back" : "Create an account"}
+          </CardTitle>
+          <CardDescription>
+            {mode === "login"
+              ? "Enter your email below to login to your account"
+              : "Enter your details below to create your account"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-6 px-0 pb-0">
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            {mode === "register" && (
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="name">Full Name</Label>
+                <Input id="name" name="name" placeholder="John Doe" className="w-full" required />
+              </div>
+            )}
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" name="email" type="email" placeholder="m@example.com" className="w-full" required />
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                {mode === "login" && (
+                  <Button variant="link" color="primary" className="h-auto p-0 text-xs">
+                    Forgot password?
+                  </Button>
+                )}
+              </div>
+              <Input id="password" name="password" type="password" className="w-full" required />
+            </div>
+
+            {mode === "register" && (
+              <div className="flex items-center gap-2">
+                <Checkbox id="terms" name="terms" required />
+                <Label htmlFor="terms" className="text-sm font-normal text-muted-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  I agree to the <a href="#" className="text-primary hover:underline">terms and conditions</a>
+                </Label>
+              </div>
+            )}
+
+            <Button type="submit" className="w-full" disabled={isLoading} aria-busy={isLoading}>
+              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="flex justify-center">
+            <span className="text-[13px] font-medium text-muted-foreground uppercase">
+              Or continue with
+            </span>
+          </div>
+
+          <div className="flex flex-col gap-6">
+            <Button variant="outline" color="primary" className="w-full bg-transparent">
+              <svg viewBox="0 0 24 24" className="mr-2 size-4 bg-transparent" fill="currentColor">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+              </svg>
+              Google
+            </Button>
+
+            <div className="text-center text-sm">
+              <span className="text-muted-foreground">
+                {mode === "login" ? "Don't have an account? " : "Already have an account? "}
+              </span>
+              <Button
+                variant="link"
+                color="primary"
+                className="h-auto p-0 font-semibold"
+                onClick={() => setMode(mode === "login" ? "register" : "login")}
+              >
+                {mode === "login" ? "Sign up" : "Sign in"}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/blocks/auth-recovery.tsx

@@ -21,7 +21,7 @@ export default function AuthRecoveryBlock() {
   return (
     <div className="flex min-h-[50vh] w-full items-center justify-center p-4 bg-muted/20">
       <Card className="w-full max-w-sm">
-        <CardHeader className="text-center space-y-2">
+        <CardHeader className="text-center">
           <CardTitle className="text-2xl font-bold">
             {isSent ? "Check your email" : "Forgot Password"}
           </CardTitle>
@@ -33,17 +33,17 @@ export default function AuthRecoveryBlock() {
         </CardHeader>
         <CardContent>
           {!isSent ? (
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1.5">
                 <Label htmlFor="recovery-email">Email</Label>
-                <Input id="recovery-email" type="email" placeholder="m@example.com" required />
+                <Input id="recovery-email" type="email" placeholder="m@example.com" className="w-full" required />
               </div>
               <Button type="submit" className="w-full" disabled={isLoading}>
                 {isLoading ? "Sending link..." : "Send Reset Link"}
               </Button>
             </form>
           ) : (
-            <div className="flex flex-col space-y-4">
+            <div className="flex flex-col gap-4">
               <Button type="button" variant="outline" className="w-full" onClick={() => setIsSent(false)}>
                 Try another email
               </Button>

package/src/blocks/auth-split.tsx

@@ -22,7 +22,7 @@ export default function AuthSplitBlock() {
       <div className="hidden lg:flex w-1/2 flex-col justify-between bg-primary p-12 text-primary-foreground relative overflow-hidden">
         {/* Subtle background pattern */}
         <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white to-transparent pointer-events-none" />
-        
+
         <div className="relative z-10">
           <h1 className="text-2xl font-bold tracking-tight">gladvn.</h1>
         </div>
@@ -62,16 +62,16 @@ export default function AuthSplitBlock() {
 
           <form onSubmit={handleSubmit} className="space-y-4">
             {mode === "register" && (
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="name">Full Name</Label>
-                <Input id="name" placeholder="John Doe" required />
+                <Input id="name" placeholder="John Doe" className="w-full" required />
               </div>
             )}
-            <div className="space-y-2">
+            <div className="flex flex-col gap-2">
               <Label htmlFor="email">Email</Label>
-              <Input id="email" type="email" placeholder="m@example.com" required />
+              <Input id="email" type="email" placeholder="m@example.com" className="w-full" required />
             </div>
-            <div className="space-y-2">
+            <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="password">Password</Label>
                 {mode === "login" && (
@@ -80,9 +80,9 @@ export default function AuthSplitBlock() {
                   </Button>
                 )}
               </div>
-              <Input id="password" type="password" required />
+              <Input id="password" type="password" className="w-full" required />
             </div>
-            
+
             {mode === "register" && (
               <div className="flex items-center gap-2">
                 <Checkbox id="terms" required />

package/src/blocks/dashboard.tsx

@@ -8,78 +8,129 @@ import {
   SettingsIcon,
   UsersIcon
 } from "lucide-react";
+import * as React from "react";
+import { DatePicker } from "../components/macro";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/micro/avatar";
+import { Badge } from "../components/micro/badge";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../components/micro/breadcrumb";
 import { Button } from "../components/micro/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/micro/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "../components/micro/dropdown-menu";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../components/micro/hover-card";
 import { Input } from "../components/micro/input";
+import { Progress } from "../components/micro/progress";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../components/micro/sheet";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/micro/table";
+
+const SidebarContent = () => (
+  <>
+    <div className="flex h-16 items-center border-b border-border px-6">
+      <LayoutDashboardIcon className="mr-2 size-5 text-primary" />
+      <span className="font-bold text-lg">Gladvn App</span>
+    </div>
+    <nav className="flex-1 space-y-1 p-4">
+      <Button variant="soft" color="primary" className="w-full justify-start">
+        <HomeIcon className="mr-2 size-4" /> Overview
+      </Button>
+      <Button variant="ghost" className="w-full justify-start text-muted-foreground">
+        <BarChart3Icon className="mr-2 size-4" /> Analytics
+      </Button>
+      <Button variant="ghost" className="w-full justify-start text-muted-foreground">
+        <UsersIcon className="mr-2 size-4" /> Customers
+      </Button>
+      <Button variant="ghost" className="w-full justify-start text-muted-foreground">
+        <SettingsIcon className="mr-2 size-4" /> Settings
+      </Button>
+    </nav>
+  </>
+);
 
 export default function DashboardBlock() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
+
   return (
     <div className="flex min-h-screen w-full bg-muted/20">
-      {/* Sidebar */}
+      {/* Sidebar Desktop */}
       <aside className="hidden w-64 flex-col border-r border-border bg-background md:flex">
-        <div className="flex h-16 items-center border-b border-border px-6">
-          <LayoutDashboardIcon className="mr-2 size-5 text-primary" />
-          <span className="font-bold">Gladvn App</span>
-        </div>
-        <nav className="flex-1 space-y-1 p-4">
-          <Button variant="soft" color="primary" className="w-full justify-start">
-            <HomeIcon className="mr-2 size-4" /> Overview
-          </Button>
-          <Button variant="ghost" className="w-full justify-start text-muted-foreground">
-            <BarChart3Icon className="mr-2 size-4" /> Analytics
-          </Button>
-          <Button variant="ghost" className="w-full justify-start text-muted-foreground">
-            <UsersIcon className="mr-2 size-4" /> Customers
-          </Button>
-          <Button variant="ghost" className="w-full justify-start text-muted-foreground">
-            <SettingsIcon className="mr-2 size-4" /> Settings
-          </Button>
-        </nav>
+        <SidebarContent />
       </aside>
 
       {/* Main Content */}
       <main className="flex flex-1 flex-col overflow-hidden">
         {/* Header */}
-        <header className="flex h-16 items-center gap-4 border-b border-border bg-background px-6">
-          <Button variant="ghost" iconOnly className="md:hidden">
-            <MenuIcon className="size-5" />
-          </Button>
-          
-          <div className="flex-1">
-            <div className="relative w-full max-w-sm">
+        <header className="flex h-16 items-center gap-4 border-b border-border bg-background px-4 md:px-6">
+          {/* Mobile Menu */}
+          <Sheet>
+            <SheetTrigger
+              render={
+                <Button variant="ghost" iconOnly className="md:hidden">
+                  <MenuIcon className="size-5" />
+                </Button>
+              }
+            />
+            <SheetContent side="left" className="w-64 p-0">
+              <SheetHeader className="sr-only">
+                <SheetTitle>Navigation Menu</SheetTitle>
+              </SheetHeader>
+              <SidebarContent />
+            </SheetContent>
+          </Sheet>
+
+          {/* Breadcrumb Navigation */}
+          <div className="hidden sm:flex flex-1">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Overview</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+
+          <div className="flex-1 sm:flex-none flex justify-end">
+            <div className="relative w-full max-w-sm sm:w-64">
               <SearchIcon className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-              <Input type="search" placeholder="Search..." className="w-full pl-9 bg-muted/50" />
+              <Input type="search" placeholder="Search..." className="w-full pl-9 bg-muted/50 rounded-full" />
             </div>
           </div>
-          
-          <Button variant="ghost" iconOnly className="text-muted-foreground relative">
+
+          <Button variant="ghost" iconOnly className="text-muted-foreground relative shrink-0">
             <BellIcon className="size-5" />
             <span className="absolute top-1 right-1 size-2 rounded-full bg-destructive border-2 border-background"></span>
           </Button>
 
           <DropdownMenu>
-            <DropdownMenuTrigger render={<button className="outline-none" />}>
+            <DropdownMenuTrigger render={<button className="outline-none shrink-0" />}>
               <Avatar className="size-8 ring-2 ring-primary/20 hover:ring-primary/50 transition-all cursor-pointer">
                 <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                 <AvatarFallback>CN</AvatarFallback>
               </Avatar>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Profile</DropdownMenuItem>
+                <DropdownMenuItem>Billing</DropdownMenuItem>
+                <DropdownMenuItem>Team</DropdownMenuItem>
+                <DropdownMenuItem>Subscription</DropdownMenuItem>
+              </DropdownMenuGroup>
               <DropdownMenuSeparator />
               <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
             </DropdownMenuContent>
@@ -87,14 +138,19 @@ export default function DashboardBlock() {
         </header>
 
         {/* Dashboard Content */}
-        <div className="flex-1 overflow-auto p-6 md:p-8">
-          <div className="flex items-center justify-between mb-8">
+        <div className="flex-1 overflow-auto p-4 md:p-8">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
             <div>
               <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
               <p className="text-muted-foreground mt-1">Here's an overview of your business today.</p>
             </div>
             <div className="flex items-center gap-2">
-              <Button variant="outline">Download Report</Button>
+              <DatePicker
+                mode="single"
+                value={date}
+                onValueChange={setDate}
+              />
+              <Button color="primary">Download Report</Button>
             </div>
           </div>
 
@@ -104,10 +160,17 @@ export default function DashboardBlock() {
                 <CardDescription>Total Revenue</CardDescription>
                 <CardTitle className="text-2xl">$45,231.89</CardTitle>
               </CardHeader>
-              <CardContent>
+              <CardContent className="space-y-4">
                 <p className="text-xs text-muted-foreground">
                   <span className="text-success font-medium">+20.1%</span> from last month
                 </p>
+                <div className="space-y-1">
+                  <div className="flex text-xs justify-between">
+                    <span>Monthly Goal</span>
+                    <span className="font-medium">85%</span>
+                  </div>
+                  <Progress value={85} className="h-1.5" />
+                </div>
               </CardContent>
             </Card>
             <Card>
@@ -150,7 +213,7 @@ export default function DashboardBlock() {
               <CardHeader>
                 <CardTitle>Overview</CardTitle>
               </CardHeader>
-              <CardContent className="h-[300px] flex items-center justify-center border-t border-border/50 bg-muted/10 rounded-b-xl">
+              <CardContent className="h-[350px] flex items-center justify-center border-t border-border/50 bg-muted/10 rounded-b-xl">
                 <p className="text-sm text-muted-foreground">Chart placeholder</p>
               </CardContent>
             </Card>
@@ -159,19 +222,64 @@ export default function DashboardBlock() {
                 <CardTitle>Recent Sales</CardTitle>
                 <CardDescription>You made 265 sales this month.</CardDescription>
               </CardHeader>
-              <CardContent className="space-y-6">
-                {[1, 2, 3, 4, 5].map((i) => (
-                  <div key={i} className="flex items-center gap-4">
-                    <Avatar className="size-9 hidden sm:flex">
-                      <AvatarFallback>OM</AvatarFallback>
-                    </Avatar>
-                    <div className="flex-1 space-y-1">
-                      <p className="text-sm font-medium leading-none">Olivia Martin</p>
-                      <p className="text-xs text-muted-foreground">olivia.martin@email.com</p>
-                    </div>
-                    <div className="font-medium text-sm">+$1,999.00</div>
-                  </div>
-                ))}
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Customer</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead className="text-right">Amount</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {[
+                      { name: "Olivia Martin", email: "olivia.martin@email.com", amount: "$1,999.00", status: "success" },
+                      { name: "Jackson Lee", email: "jackson.lee@email.com", amount: "$39.00", status: "pending" },
+                      { name: "Isabella Nguyen", email: "isabella.nguyen@email.com", amount: "$299.00", status: "success" },
+                      { name: "William Kim", email: "will@email.com", amount: "$99.00", status: "failed" },
+                    ].map((sale, i) => (
+                      <TableRow key={i}>
+                        <TableCell>
+                          <HoverCard>
+                            <HoverCardTrigger
+                              render={
+                                <div className="flex items-center gap-3 cursor-pointer">
+                                  <Avatar className="size-8">
+                                    <AvatarFallback>{sale.name.substring(0, 2).toUpperCase()}</AvatarFallback>
+                                  </Avatar>
+                                  <div className="space-y-0.5">
+                                    <p className="text-sm font-medium leading-none">{sale.name}</p>
+                                    <p className="text-xs text-muted-foreground">{sale.email}</p>
+                                  </div>
+                                </div>
+                              }
+                            />
+                            <HoverCardContent className="w-80">
+                              <div className="flex justify-between space-x-4">
+                                <Avatar>
+                                  <AvatarFallback>{sale.name.substring(0, 2).toUpperCase()}</AvatarFallback>
+                                </Avatar>
+                                <div className="space-y-1">
+                                  <h4 className="text-sm font-semibold">@{sale.name.toLowerCase().replace(' ', '')}</h4>
+                                  <p className="text-sm">Premium customer since 2023.</p>
+                                  <div className="flex items-center pt-2">
+                                    <span className="text-xs text-muted-foreground">Last active 2 hours ago</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </HoverCardContent>
+                          </HoverCard>
+                        </TableCell>
+                        <TableCell>
+                          {sale.status === "success" && <Badge variant="soft" color="success">Paid</Badge>}
+                          {sale.status === "pending" && <Badge variant="outline" color="warning">Pending</Badge>}
+                          {sale.status === "failed" && <Badge variant="soft" color="destructive">Failed</Badge>}
+                        </TableCell>
+                        <TableCell className="text-right font-medium">{sale.amount}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
               </CardContent>
             </Card>
           </div>