gladvn 0.2.22 → 0.2.27

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "gladvn",
-  "version": "0.2.22",
+  "version": "0.2.27",
   "type": "module",
-  "description": "DO NOT 'npm install'. Use 'npx gladvn init' instead! A highly composable React component library built with Tailwind CSS.",
+  "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.",
   "keywords": [
     "react",
     "components",
@@ -17,28 +18,13 @@
     "type": "git",
     "url": "https://github.com/duongacy/gladvn"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=18"
+  },
   "bin": {
     "gladvn": "bin/cli.js"
   },
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./gladvn.css": "./src/styles/gladvn.css",
-    "./tokens.css": "./src/styles/tokens.css"
-  },
   "files": [
-    "dist",
     "src",
     "bin",
     "scripts",
@@ -49,13 +35,13 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build:app": "vite build -c vite.config.app.ts",
     "lint": "oxlint",
     "preview": "vite preview",
     "postinstall": "node scripts/postinstall.cjs || true",
-    "prepublishOnly": "npm run build",
-    "build:app": "vite build -c vite.config.app.ts",
     "test": "vitest run",
+    "test:e2e": "playwright test",
+    "typecheck": "tsc --noEmit",
     "prepare": "husky"
   },
   "peerDependencies": {
@@ -70,7 +56,6 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -79,24 +64,25 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^1.24.0",
     "next-themes": "^0.4.6",
-    "prettier": "^3.9.6",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.1",
     "recharts": "^3.9.2",
-    "shiki": "^4.3.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@fontsource/inter": "^5.3.0",
     "@hookform/resolvers": "^5.4.0",
     "@playwright/test": "^1.61.1",
     "@radix-ui/react-dialog": "^1.1.18",
     "@tailwindcss/vite": "^4.3.1",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
@@ -105,9 +91,11 @@
     "jsdom": "^29.1.1",
     "lint-staged": "^16.4.0",
     "oxlint": "^1.69.0",
+    "prettier": "^3.9.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-hook-form": "^7.80.0",
+    "shiki": "^4.3.1",
     "tailwindcss": "^4.3.1",
     "ts-morph": "^28.0.0",
     "typescript": "~6.0.2",

package/src/blocks/auth-card.tsx

@@ -0,0 +1,104 @@
+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";
+import { Separator } from "../components/micro/separator";
+
+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">
+        <CardHeader className="text-center space-y-2">
+          <CardTitle className="text-2xl font-bold">
+            {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>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {mode === "register" && (
+              <div className="space-y-2">
+                <Label htmlFor="name">Full Name</Label>
+                <Input id="name" placeholder="John Doe" required />
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="m@example.com" required />
+            </div>
+            <div className="space-y-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" type="password" required />
+            </div>
+            
+            {mode === "register" && (
+              <div className="flex items-center gap-2">
+                <Checkbox id="terms" required />
+                <Label htmlFor="terms" className="text-sm font-normal text-muted-foreground">
+                  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}>
+              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="my-6 flex items-center gap-4">
+            <Separator className="flex-1" />
+            <span className="text-xs text-muted-foreground">OR</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <Button variant="outline" className="w-full">
+            <svg viewBox="0 0 24 24" className="mr-2 size-4" 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>
+            Continue with Google
+          </Button>
+
+          <div className="mt-4 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"
+              onClick={() => setMode(mode === "login" ? "register" : "login")}
+            >
+              {mode === "login" ? "Sign up" : "Sign in"}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/blocks/auth-dialog.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "../components/micro/button";
+import { Checkbox } from "../components/micro/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../components/micro/dialog";
+import { Input } from "../components/micro/input";
+import { Label } from "../components/micro/label";
+import { Separator } from "../components/micro/separator";
+
+export default function AuthDialogBlock() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsOpen(false);
+    }, 1000);
+  };
+
+  return (
+    <div className="flex min-h-[50vh] w-full items-center justify-center p-4 bg-muted/10 border border-dashed rounded-lg">
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger render={<Button>Open Authentication</Button>} />
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader className="text-center space-y-2">
+            <DialogTitle className="text-2xl font-bold">
+              {mode === "login" ? "Welcome back" : "Create an account"}
+            </DialogTitle>
+            <DialogDescription>
+              {mode === "login"
+                ? "Enter your email below to login to your account"
+                : "Enter your details below to create your account"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <form onSubmit={handleSubmit} className="space-y-4 py-4">
+            {mode === "register" && (
+              <div className="space-y-2">
+                <Label htmlFor="dialog-name">Full Name</Label>
+                <Input id="dialog-name" placeholder="John Doe" required />
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="dialog-email">Email</Label>
+              <Input id="dialog-email" type="email" placeholder="m@example.com" required />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="dialog-password">Password</Label>
+                {mode === "login" && (
+                  <Button type="button" variant="link" color="primary" className="h-auto p-0 text-xs">
+                    Forgot password?
+                  </Button>
+                )}
+              </div>
+              <Input id="dialog-password" type="password" required />
+            </div>
+            
+            {mode === "register" && (
+              <div className="flex items-center gap-2">
+                <Checkbox id="dialog-terms" required />
+                <Label htmlFor="dialog-terms" className="text-sm font-normal text-muted-foreground">
+                  I agree to the <a href="#" className="text-primary hover:underline">terms</a>
+                </Label>
+              </div>
+            )}
+
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="flex items-center gap-4">
+            <Separator className="flex-1" />
+            <span className="text-xs text-muted-foreground uppercase">Or</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <Button type="button" variant="outline" className="w-full mt-4">
+            <svg viewBox="0 0 24 24" className="mr-2 size-4" 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>
+
+          <p className="mt-4 text-center text-sm text-muted-foreground">
+            {mode === "login" ? "Don't have an account? " : "Already have an account? "}
+            <Button
+              type="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>
+          </p>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/blocks/auth-recovery.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "../components/micro/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/micro/card";
+import { Input } from "../components/micro/input";
+import { Label } from "../components/micro/label";
+
+export default function AuthRecoveryBlock() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSent, setIsSent] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsSent(true);
+    }, 1500);
+  };
+
+  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">
+          <CardTitle className="text-2xl font-bold">
+            {isSent ? "Check your email" : "Forgot Password"}
+          </CardTitle>
+          <CardDescription>
+            {isSent
+              ? "We have sent a password reset link to your email."
+              : "Enter your email address and we will send you a link to reset your password."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {!isSent ? (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="recovery-email">Email</Label>
+                <Input id="recovery-email" type="email" placeholder="m@example.com" 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">
+              <Button type="button" variant="outline" className="w-full" onClick={() => setIsSent(false)}>
+                Try another email
+              </Button>
+            </div>
+          )}
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <Button variant="link" color="primary" className="text-sm">
+            Back to Login
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/blocks/auth-split.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "../components/micro/button";
+import { Checkbox } from "../components/micro/checkbox";
+import { Input } from "../components/micro/input";
+import { Label } from "../components/micro/label";
+import { Separator } from "../components/micro/separator";
+
+export default function AuthSplitBlock() {
+  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">
+      {/* Left side - Image/Branding (hidden on mobile) */}
+      <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>
+
+        <div className="relative z-10 space-y-4 max-w-md">
+          <h2 className="text-4xl font-bold">
+            Accelerate your development workflow
+          </h2>
+          <p className="text-lg text-primary-foreground/80">
+            Join thousands of developers building modern, accessible, and beautiful web applications faster than ever before.
+          </p>
+        </div>
+
+        <div className="relative z-10 flex items-center gap-4 text-sm font-medium">
+          <div className="flex -space-x-2">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="size-8 rounded-full border-2 border-primary bg-primary-foreground/20" />
+            ))}
+          </div>
+          <p>Trusted by 10k+ developers</p>
+        </div>
+      </div>
+
+      {/* Right side - Form */}
+      <div className="flex w-full lg:w-1/2 items-center justify-center p-8 sm:p-12">
+        <div className="mx-auto flex w-full max-w-sm flex-col justify-center space-y-6">
+          <div className="flex flex-col space-y-2 text-center lg:text-left">
+            <h1 className="text-3xl font-bold tracking-tight">
+              {mode === "login" ? "Welcome back" : "Create an account"}
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              {mode === "login"
+                ? "Enter your email below to login to your account"
+                : "Enter your details below to create your account"}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {mode === "register" && (
+              <div className="space-y-2">
+                <Label htmlFor="name">Full Name</Label>
+                <Input id="name" placeholder="John Doe" required />
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="m@example.com" required />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                {mode === "login" && (
+                  <Button type="button" variant="link" color="primary" className="h-auto p-0 text-xs">
+                    Forgot password?
+                  </Button>
+                )}
+              </div>
+              <Input id="password" type="password" required />
+            </div>
+            
+            {mode === "register" && (
+              <div className="flex items-center gap-2">
+                <Checkbox id="terms" required />
+                <Label htmlFor="terms" className="text-sm font-normal text-muted-foreground">
+                  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}>
+              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="flex items-center gap-4">
+            <Separator className="flex-1" />
+            <span className="text-xs text-muted-foreground uppercase">Or continue with</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <Button type="button" variant="outline" className="w-full">
+            <svg viewBox="0 0 24 24" className="mr-2 size-4" 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>
+
+          <p className="text-center text-sm text-muted-foreground">
+            {mode === "login" ? "Don't have an account? " : "Already have an account? "}
+            <Button
+              type="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>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}