gladvn 0.2.35 → 0.2.37

package/README.md

@@ -6,7 +6,7 @@
   <p align="center">
     <a href="https://github.com/duongacy/gladvn/actions"><img src="https://img.shields.io/github/actions/workflow/status/duongacy/gladvn/ci.yml?branch=main" alt="Build Status"></a>
     <a href="https://github.com/duongacy/gladvn/stargazers"><img src="https://img.shields.io/github/stars/duongacy/gladvn" alt="GitHub Stars"></a>
-    <a href="https://github.com/duongacy/gladvn/blob/main/LICENSE"><img src="https://img.shields.io/github/license/duongacy/gladvn" alt="License"></a>
+    <a href="https://github.com/duongacy/gladvn/blob/main/LICENSE"><img src="https://img.shields.io/github/license/duongacy/gladvn?t=1" alt="License"></a>
   </p>
   <br/>
   <!-- Hero Image Placeholder -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladvn",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "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.",
@@ -35,6 +35,7 @@
   ],
   "scripts": {
     "dev": "vite",
+    "build": "npm run build:app",
     "build:app": "vite build -c vite.config.app.ts",
     "lint": "oxlint",
     "preview": "vite preview",

package/scripts/strip-comments.ts

@@ -0,0 +1,79 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+function stripCommentsFromFile(filePath: string) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  let result = '';
+  
+  const scanner = ts.createScanner(ts.ScriptTarget.Latest, false);
+  scanner.setText(content);
+  
+  let currentToken = scanner.scan();
+  let lastPos = 0;
+  
+  while (currentToken !== ts.SyntaxKind.EndOfFileToken) {
+    const tokenStart = scanner.getTokenPos();
+    const tokenEnd = scanner.getTextPos();
+    
+    if (currentToken === ts.SyntaxKind.SingleLineCommentTrivia) {
+      // It's a // comment. Strip it!
+      result += content.substring(lastPos, tokenStart);
+      lastPos = tokenEnd;
+    } else if (currentToken === ts.SyntaxKind.MultiLineCommentTrivia) {
+      // It's a /* */ comment.
+      const commentText = content.substring(tokenStart, tokenEnd);
+      if (commentText.startsWith('/**')) {
+        // Keep JSDoc
+      } else {
+        // Strip normal multiline comment
+        result += content.substring(lastPos, tokenStart);
+        lastPos = tokenEnd;
+      }
+    }
+    
+    currentToken = scanner.scan();
+  }
+  
+  
+  result += content.substring(lastPos);
+  
+  // Also clean up multiple blank lines left by deleted single line comments
+  // (Optional, but helps keep code clean)
+  result = result.replace(/\n\s*\n\s*\n/g, '\n\n');
+  
+  if (result !== content) {
+    fs.writeFileSync(filePath, result, 'utf8');
+    return true;
+  }
+  return false;
+}
+
+function processDirectory(dir: string) {
+  let count = 0;
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat.isDirectory()) {
+      count += processDirectory(fullPath);
+    } else if (fullPath.endsWith('.ts') || fullPath.endsWith('.tsx')) {
+      if (stripCommentsFromFile(fullPath)) {
+        count++;
+        console.log(`Stripped comments from: ${fullPath}`);
+      }
+    }
+  }
+  return count;
+}
+
+const targetDirs = ['src/components', 'src/blocks', 'src/dev'];
+let totalChanged = 0;
+
+for (const dir of targetDirs) {
+  if (fs.existsSync(dir)) {
+    totalChanged += processDirectory(dir);
+  }
+}
+
+console.log(`\nFinished! Stripped comments from ${totalChanged} files.`);

package/src/blocks/auth-form.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
+import { CheckboxPreset } from "../components/macro/checkbox-preset";
+import { InputPreset } from "../components/macro/input-preset";
 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);
@@ -32,44 +31,49 @@ export default function AuthCardBlock() {
         <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>
+              <InputPreset id="name" name="name" label="Full Name" placeholder="John Doe" required />
             )}
-            <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>
+
+            <InputPreset id="email" name="email" type="email" label="Email" placeholder="m@example.com" required />
+
+            <InputPreset
+              id="password"
+              name="password"
+              type="password"
+              label={
+                <div className="flex items-center justify-between w-full">
+                  <span>Mật khẩu</span>
+                  {mode === "login" && (
+                    <Button variant="link" color="primary" className="h-auto p-0 text-xs">
+                      Quên mật khẩu?
+                    </Button>
+                  )}
+                </div>
+              }
+              required
+            />
 
             {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>
+              <CheckboxPreset
+                id="terms"
+                name="terms"
+                required
+                label={
+                  <span className="text-sm font-normal text-muted-foreground">
+                    Tôi đồng ý với <a href="#" className="text-primary hover:underline">các điều khoản và điều kiện</a>
+                  </span>
+                }
+              />
             )}
 
             <Button type="submit" className="w-full" disabled={isLoading} aria-busy={isLoading}>
-              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
+              {isLoading ? "Đang xử lý..." : mode === "login" ? "Đăng nhập" : "Tạo tài khoản"}
             </Button>
           </form>
 
           <div className="flex justify-center">
             <span className="text-[13px] font-medium text-muted-foreground uppercase">
-              Or continue with
+              Hoặc tiếp tục với
             </span>
           </div>
 

package/src/blocks/auth-recovery.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
+import { InputPreset } from "../components/macro/input-preset";
 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);
@@ -19,40 +18,37 @@ export default function AuthRecoveryBlock() {
   };
 
   return (
-    <div className="flex min-h-[50vh] w-full items-center justify-center p-4 bg-muted/20">
+    <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">
           <CardTitle className="text-2xl font-bold">
-            {isSent ? "Check your email" : "Forgot Password"}
+            {isSent ? "Kiểm tra email của bạn" : "Quên mật khẩu?"}
           </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."}
+              ? "Chúng tôi đã gửi link đặt lại mật khẩu đến email của bạn."
+              : "Không sao đâu, ai cũng có lúc quên mà. Nhập email vào đây để tụi mình gửi link reset cho nha."}
           </CardDescription>
         </CardHeader>
         <CardContent>
           {!isSent ? (
             <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" className="w-full" required />
-              </div>
+              <InputPreset id="recovery-email" type="email" label="Email" placeholder="m@example.com" required />
               <Button type="submit" className="w-full" disabled={isLoading}>
-                {isLoading ? "Sending link..." : "Send Reset Link"}
+                {isLoading ? "Đang gửi..." : "Gửi link reset mật khẩu"}
               </Button>
             </form>
           ) : (
             <div className="flex flex-col gap-4">
               <Button type="button" variant="outline" className="w-full" onClick={() => setIsSent(false)}>
-                Try another email
+                Thử email khác
               </Button>
             </div>
           )}
         </CardContent>
         <CardFooter className="flex justify-center">
           <Button variant="link" color="primary" className="text-sm">
-            Back to Login
+            Quay lại đăng nhập
           </Button>
         </CardFooter>
       </Card>

package/src/blocks/auth-split.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
+import { CheckboxPreset } from "../components/macro/checkbox-preset";
+import { InputPreset } from "../components/macro/input-preset";
 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() {
@@ -18,9 +17,7 @@ export default function AuthSplitBlock() {
 
   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">
@@ -42,58 +39,71 @@ export default function AuthSplitBlock() {
               <div key={i} className="size-8 rounded-full border-2 border-primary bg-primary-foreground/20" />
             ))}
           </div>
-          <p>Trusted by 10k+ developers</p>
+          <p>Được tin dùng bởi hơn 10k+ nhà phát triển</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"}
+              {mode === "login" ? "Chào mừng trở lại" : "Tạo tài khoản mới"}
             </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"}
+                ? "Nhập email của bạn bên dưới để đăng nhập vào tài khoản"
+                : "Nhập thông tin chi tiết bên dưới để tạo tài khoản của bạn"}
             </p>
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-4">
             {mode === "register" && (
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="name">Full Name</Label>
-                <Input id="name" placeholder="John Doe" className="w-full" required />
-              </div>
+              <InputPreset
+                id="name"
+                label="Họ và tên"
+                placeholder="Nguyễn Văn A"
+                required
+              />
             )}
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input id="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 type="button" variant="link" color="primary" className="h-auto p-0 text-xs">
-                    Forgot password?
-                  </Button>
-                )}
-              </div>
-              <Input id="password" type="password" className="w-full" required />
-            </div>
+
+            <InputPreset
+              id="email"
+              type="email"
+              label="Email"
+              placeholder="m@example.com"
+              required
+            />
+
+            <InputPreset
+              id="password"
+              type="password"
+              label={
+                <div className="flex items-center justify-between w-full">
+                  <span>Mật khẩu</span>
+                  {mode === "login" && (
+                    <Button type="button" variant="link" color="primary" className="h-auto p-0 text-xs">
+                      Quên mật khẩu?
+                    </Button>
+                  )}
+                </div>
+              }
+              required
+            />
 
             {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>
+              <CheckboxPreset
+                id="terms"
+                required
+                label={
+                  <span className="text-sm font-normal text-muted-foreground">
+                    Tôi đồng ý với các <a href="#" className="text-primary hover:underline">điều khoản và dịch vụ</a>
+                  </span>
+                }
+              />
             )}
 
             <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
+              {isLoading ? "Đang xử lý..." : mode === "login" ? "Đăng nhập" : "Tạo tài khoản"}
             </Button>
           </form>