gladvn 0.2.14 → 0.2.15

package/README.md

@@ -1,10 +1,10 @@
-# 🌊 gladcn
+# 🌊 gladvn
 
-> **✨ [Explore the Interactive Showcase & Documentation](https://gladcn.vercel.app/)**
+> **✨ [Explore the Interactive Showcase & Documentation](https://gladvn.vercel.app/)**
 
-A highly composable, accessible, and beautifully designed React component library. Built on top of [shadcn/ui](https://ui.shadcn.com/), [Base UI](https://base-ui.com/), and powered by **Tailwind CSS v4+**, `gladcn` provides a robust, zero-magic foundation for your next web application. 
+A highly composable, accessible, and beautifully designed React component library. Built on top of [shadcn/ui](https://ui.shadcn.com/), [Base UI](https://base-ui.com/), and powered by **Tailwind CSS v4+**, `gladvn` provides a robust, zero-magic foundation for your next web application. 
 
-Designed with strict architectural principles, `gladcn` is optimized not just for human developers, but specifically for **AI coding assistants**, ensuring predictable styling and maintenance.
+Designed with strict architectural principles, `gladvn` is optimized not just for human developers, but specifically for **AI coding assistants**, ensuring predictable styling and maintenance.
 
 ---
 
@@ -24,7 +24,7 @@ Designed with strict architectural principles, `gladcn` is optimized not just fo
 > [!WARNING]  
 > **Please use `npx` to clone the components into your project instead of installing via `npm`.** While installing via `npm` works, using `npx` (Option 1) gives you full control over the source code and styling, which is the core philosophy and intended way to use this library.
 
-There are two ways to use `gladcn` in your project. We highly recommend **Option 1** for maximum flexibility.
+There are two ways to use `gladvn` in your project. We highly recommend **Option 1** for maximum flexibility.
 
 ### Option 1: Clone components to your project (Recommended)
 
@@ -34,7 +34,7 @@ This approach automatically copies all component source code, hooks, and styles
 npx gladvn init
 ```
 
-*By default, this will create a `gladcn` folder at your project root. If you prefer to place it elsewhere, specify the path:*
+*By default, this will create a `gladvn` folder at your project root. If you prefer to place it elsewhere, specify the path:*
 ```bash
 npx gladvn init components/ui
 ```
@@ -42,7 +42,7 @@ npx gladvn init components/ui
 **Usage:**
 ```tsx
 // Import directly from your local folder
-import { Button } from "@/gladcn/components/micro/button";
+import { Button } from "@/gladvn/components/micro/button";
 ```
 
 ### Option 2: Install as an npm package
@@ -59,11 +59,11 @@ Update your main CSS file to scan the library for Tailwind utility classes and i
 ```css
 @import "tailwindcss";
 
-/* 1. Tell Tailwind to scan gladcn for utility classes */
+/* 1. Tell Tailwind to scan gladvn for utility classes */
 @source "../node_modules/gladvn/dist";
 
-/* 2. Import gladcn global CSS variables */
-@import "gladvn/gladcn.css";
+/* 2. Import gladvn global CSS variables */
+@import "gladvn/gladvn.css";
 ```
 
 **Usage:**
@@ -75,14 +75,14 @@ import { Button, Card, CardHeader, CardTitle, CardContent } from "gladvn";
 
 ## 🏗️ Architecture: Micro vs. Macro
 
-Most component libraries fail in their second year because developers become afraid to modify the core files. `gladcn` solves this with explicit architectural boundaries:
+Most component libraries fail in their second year because developers become afraid to modify the core files. `gladvn` solves this with explicit architectural boundaries:
 
 - **Micro Components** (`components/micro/`): "Dumb" presentational primitives (e.g., `Button`, `Badge`, `Input`). They do not contain internal React state (`useState`) or business logic. They strictly rely on props for rendering and avoid dictating layout boundaries (like `w-full`).
 - **Macro Components** (`components/macro/`): "Smart" presets and compositions (e.g., `DatePicker`, `SelectPreset`, `PaginationPreset`). These components combine multiple Micro components and manage complex state, accessibility (a11y), and interactions. Macro components strictly reuse Micro components via pure composition.
 
 ## 🎨 Theming & Customization
 
-`gladcn` uses standard CSS variables for theming, ensuring zero runtime parsing overhead. You can easily override these variables in your own CSS file.
+`gladvn` uses standard CSS variables for theming, ensuring zero runtime parsing overhead. You can easily override these variables in your own CSS file.
 
 ```css
 :root {
@@ -92,7 +92,7 @@ Most component libraries fail in their second year because developers become afr
 }
 ```
 
-If you cloned the components via `npx` (Option 1), you can modify the CSS directly inside the `gladcn/styles/` directory.
+If you cloned the components via `npx` (Option 1), you can modify the CSS directly inside the `gladvn/styles/` directory.
 
 ---
 

package/bin/cli.js

@@ -15,17 +15,17 @@ const reset = "\x1b[0m";
 if (process.argv.includes('--help') || process.argv.includes('-h')) {
   console.log(`
 Usage:
-  npx @duongy96/gladcn init [destination]
+  npx gladvn init [destination]
 
 Options:
-  [destination]   The folder where components will be copied. Defaults to "gladcn".
+  [destination]   The folder where components will be copied. Defaults to "gladvn".
   --help, -h      Show this help message.
 `);
   process.exit(0);
 }
 
 // Find destination
-let userDest = "gladcn";
+let userDest = "gladvn";
 const args = process.argv.slice(2);
 
 if (args[0] === "init") {
@@ -123,7 +123,7 @@ async function selectOption(message, options) {
 
 async function main() {
   console.log(`\n${cyan}╔══════════════════════════════════════════════════════════════════╗${reset}`);
-  console.log(`${cyan}║  ${bold}gladcn${reset}${cyan} — Initialization                                     ║${reset}`);
+  console.log(`${cyan}║  ${bold}gladvn${reset}${cyan} — Initialization                                     ║${reset}`);
   console.log(`${cyan}╚══════════════════════════════════════════════════════════════════╝${reset}\n`);
 
   let targetCss = "app/globals.css";
@@ -169,7 +169,7 @@ async function main() {
     console.log(`\x1b[32m✔\x1b[0m \x1b[1mFound global CSS file\x1b[0m \x1b[90m…\x1b[0m \x1b[36m${targetCss}\x1b[0m`);
   } else {
     // We have more than 1 file, and environment is TTY
-    targetCss = await selectOption("Which CSS file should we inject gladcn styles into?", cssFiles);
+    targetCss = await selectOption("Which CSS file should we inject gladvn styles into?", cssFiles);
   }
 
   let cssFilePath = null;
@@ -184,7 +184,7 @@ async function main() {
     dirsToCopy = fs.readdirSync(srcDir).filter(item => !excludeList.includes(item));
   }
 
-  console.log(`\n\x1b[36mInitializing gladcn components into ${userDest}...\x1b[0m`);
+  console.log(`\n\x1b[36mInitializing gladvn components into ${userDest}...\x1b[0m`);
 
   if (!fs.existsSync(destPath)) {
     fs.mkdirSync(destPath, { recursive: true });
@@ -211,10 +211,10 @@ async function main() {
 
   // 2. Inject CSS import
   if (cssFilePath && fs.existsSync(cssFilePath)) {
-    const gladcnCssPath = path.resolve(destPath, "styles", "gladcn.css");
+    const gladvnCssPath = path.resolve(destPath, "styles", "gladvn.css");
     const cssDir = path.dirname(cssFilePath);
     
-    let relPath = path.relative(cssDir, gladcnCssPath);
+    let relPath = path.relative(cssDir, gladvnCssPath);
     if (!relPath.startsWith('.')) {
       relPath = './' + relPath;
     }
@@ -238,15 +238,15 @@ async function main() {
       console.log(`\x1b[32m✔ Injected CSS import into ${targetCss}\x1b[0m`);
     }
   } else if (targetCss) {
-    console.log(`\x1b[33m⚠ CSS file not found at ${targetCss}. You will need to manually import ${userDest}/styles/gladcn.css\x1b[0m`);
+    console.log(`\x1b[33m⚠ CSS file not found at ${targetCss}. You will need to manually import ${userDest}/styles/gladvn.css\x1b[0m`);
   } else {
-    console.log(`\x1b[33m⚠ No CSS file configured. You will need to manually import ${userDest}/styles/gladcn.css into your project.\x1b[0m`);
+    console.log(`\x1b[33m⚠ No CSS file configured. You will need to manually import ${userDest}/styles/gladvn.css into your project.\x1b[0m`);
   }
 
   // 2.5 Configure tsconfig.json
   if (isTTY) {
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
-    const answer = await new Promise((resolve) => rl.question(`\n${yellow}? Do you want to configure tsconfig.json to use the @gladcn/* alias? (Y/n)${reset} `, resolve));
+    const answer = await new Promise((resolve) => rl.question(`\n${yellow}? Do you want to configure tsconfig.json to use the @gladvn/* alias? (Y/n)${reset} `, resolve));
     rl.close();
 
     if (answer.trim().toLowerCase() !== 'n') {
@@ -255,20 +255,20 @@ async function main() {
         let tsContent = fs.readFileSync(tsconfigPath, 'utf8');
         const aliasPath = `./${userDest}/*`;
 
-        if (tsContent.includes('"@gladcn/*"')) {
-          console.log(`\x1b[90m⏭  @gladcn/* alias already exists in tsconfig.json\x1b[0m`);
+        if (tsContent.includes('"@gladvn/*"')) {
+          console.log(`\x1b[90m⏭  @gladvn/* alias already exists in tsconfig.json\x1b[0m`);
         } else {
           const pathsRegex = /"paths"\s*:\s*\{/;
           if (pathsRegex.test(tsContent)) {
-            tsContent = tsContent.replace(pathsRegex, `"paths": {\n      "@gladcn/*": ["${aliasPath}"],`);
+            tsContent = tsContent.replace(pathsRegex, `"paths": {\n      "@gladvn/*": ["${aliasPath}"],`);
             fs.writeFileSync(tsconfigPath, tsContent);
-            console.log(`\x1b[32m✔ Injected @gladcn/* alias into existing paths\x1b[0m`);
+            console.log(`\x1b[32m✔ Injected @gladvn/* alias into existing paths\x1b[0m`);
           } else {
             const compilerOptionsRegex = /"compilerOptions"\s*:\s*\{/;
             if (compilerOptionsRegex.test(tsContent)) {
-              tsContent = tsContent.replace(compilerOptionsRegex, `"compilerOptions": {\n    "paths": {\n      "@gladcn/*": ["${aliasPath}"]\n    },`);
+              tsContent = tsContent.replace(compilerOptionsRegex, `"compilerOptions": {\n    "paths": {\n      "@gladvn/*": ["${aliasPath}"]\n    },`);
               fs.writeFileSync(tsconfigPath, tsContent);
-              console.log(`\x1b[32m✔ Injected paths object and @gladcn/* alias\x1b[0m`);
+              console.log(`\x1b[32m✔ Injected paths object and @gladvn/* alias\x1b[0m`);
             } else {
               console.log(`\x1b[33m⚠ Could not find compilerOptions in tsconfig.json. Please add manually.\x1b[0m`);
             }
@@ -316,7 +316,7 @@ async function main() {
   }
 
   if (!hasErrors) {
-    console.log(`\n\x1b[32m✨ Successfully initialized gladcn files in ${userDest}!\x1b[0m`);
+    console.log(`\n\x1b[32m✨ Successfully initialized gladvn files in ${userDest}!\x1b[0m`);
   }
 }
 

package/dist/dev/components/GladvnLogo.d.ts

@@ -0,0 +1,10 @@
+interface GladvnLogoProps {
+    className?: string;
+    /** Size of the icon SVG */
+    iconSize?: string;
+    /** Show icon only (default) or icon + wordmark */
+    variant?: "icon" | "wordmark";
+}
+export declare function GladvnLogo({ className, iconSize, variant, }: GladvnLogoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=GladvnLogo.d.ts.map

package/dist/dev/components/{GladcnLogo.d.ts.map → GladvnLogo.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"GladcnLogo.d.ts","sourceRoot":"","sources":["../../../src/dev/components/GladcnLogo.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAmB,EACnB,OAAgB,GACjB,EAAE,eAAe,+BAiEjB"}
+{"version":3,"file":"GladvnLogo.d.ts","sourceRoot":"","sources":["../../../src/dev/components/GladvnLogo.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAmB,EACnB,OAAgB,GACjB,EAAE,eAAe,+BAiEjB"}

package/dist/dev/showcase/overview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview.d.ts","sourceRoot":"","sources":["../../../src/dev/showcase/overview.tsx"],"names":[],"mappings":"AAiFA,MAAM,CAAC,OAAO,UAAU,eAAe,gCAggCtC"}
+{"version":3,"file":"overview.d.ts","sourceRoot":"","sources":["../../../src/dev/showcase/overview.tsx"],"names":[],"mappings":"AAmFA,MAAM,CAAC,OAAO,UAAU,eAAe,gCA2iCtC"}

package/llms.txt

@@ -1,21 +1,21 @@
-# gladcn UI - AI Guidelines
+# gladvn UI - AI Guidelines
 
-You are an AI Coding Assistant helping a developer use the `gladcn` UI library. 
-`gladcn` is a React component library built on top of Radix UI and Tailwind CSS, focusing on beautiful, accessible, and highly composable components.
+You are an AI Coding Assistant helping a developer use the `gladvn` UI library. 
+`gladvn` is a React component library built on top of Radix UI and Tailwind CSS, focusing on beautiful, accessible, and highly composable components.
 
-Follow these strict guidelines when generating or modifying code that uses `gladcn`:
+Follow these strict guidelines when generating or modifying code that uses `gladvn`:
 
 ## 1. Imports
 - **Always** import components directly from the package root:
-  `import { Button, Card, Dialog } from "@duongy96/gladcn";`
-- **Never** import from internal paths like `@duongy96/gladcn/dist/...` or `src/components/ui/...`.
+  `import { Button, Card, Dialog } from "gladvn";`
+- **Never** import from internal paths like `gladvn/dist/...` or `src/components/ui/...`.
 
 ## 2. Composition over Configuration
-`gladcn` heavily uses a composable architecture. When building complex UI, always use the provided sub-components rather than passing large configuration objects.
+`gladvn` heavily uses a composable architecture. When building complex UI, always use the provided sub-components rather than passing large configuration objects.
 
 **Correct (Composition):**
 ```tsx
-import { Card, CardHeader, CardTitle, CardContent } from "@duongy96/gladcn";
+import { Card, CardHeader, CardTitle, CardContent } from "gladvn";
 
 <Card>
   <CardHeader>
@@ -36,7 +36,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "@duongy96/gladcn";
 ## 3. Form Fields
 When building forms, use the `Field` wrapper to automatically handle accessibility, labels, and error messages.
 ```tsx
-import { Field, FieldLabel, FieldContent, FieldError, Input } from "@duongy96/gladcn";
+import { Field, FieldLabel, FieldContent, FieldError, Input } from "gladvn";
 
 <Field error={errors.email?.message}>
   <FieldLabel>Email Address</FieldLabel>
@@ -68,7 +68,7 @@ Always structure them with their respective Trigger and Content wrappers.
 ```
 
 ## 6. Icons
-`gladcn` does not bundle an icon library by default, but relies on standard SVG icons (like `lucide-react`). When adding icons inside components like `Button` or `Empty`, use standard SVG elements or Lucide components.
+`gladvn` does not bundle an icon library by default, but relies on standard SVG icons (like `lucide-react`). When adding icons inside components like `Button` or `Empty`, use standard SVG elements or Lucide components.
 
 ---
 *Note to AI: Always prioritize reading the JSDoc/TSDoc definitions of the imported components if you are unsure of the props.*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladvn",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "type": "module",
   "description": "DO NOT 'npm install'. Use 'npx gladvn init' instead! A highly composable React component library built with Tailwind CSS.",
   "keywords": [
@@ -16,7 +16,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "gladcn": "bin/cli.js"
+    "gladvn": "bin/cli.js"
   },
   "exports": {
     ".": {
@@ -29,7 +29,7 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./gladcn.css": "./src/styles/gladcn.css",
+    "./gladvn.css": "./src/styles/gladvn.css",
     "./tokens.css": "./src/styles/tokens.css"
   },
   "files": [

package/scripts/clean-imports.ts

@@ -1,11 +1,11 @@
 import { Project } from "ts-morph";
 
 const project = new Project({
-  tsConfigFilePath: "/Users/y/Desktop/github/gladcn/tsconfig.json",
+  tsConfigFilePath: "/Users/y/Desktop/github/gladvn/tsconfig.json",
 });
 
 const sourceFiles = project.getSourceFiles(
-  "/Users/y/Desktop/github/gladcn/src/dev/showcase/**/*.tsx",
+  "/Users/y/Desktop/github/gladvn/src/dev/showcase/**/*.tsx",
 );
 console.log(`Found ${sourceFiles.length} showcase files to process.`);
 

package/scripts/postinstall.cjs

@@ -85,7 +85,7 @@ function injectImports(cssFilePath, tokensRelPath) {
   let content = fs.readFileSync(cssFilePath, "utf8");
 
   // Check if already configured
-  if (content.includes("gladvn/gladcn.css")) {
+  if (content.includes("gladvn/gladvn.css")) {
     console.log(
       `${dim}   ⏭  gladvn already configured in this file — skipped${reset}`,
     );
@@ -95,7 +95,7 @@ function injectImports(cssFilePath, tokensRelPath) {
   // Build the import lines
   const sourceDirective = `@source "../node_modules/gladvn/dist";`;
   const tokensImport = `@import "${tokensRelPath}";`;
-  const globalsImport = `@import "gladvn/gladcn.css";`;
+  const globalsImport = `@import "gladvn/gladvn.css";`;
 
   const imports = `\n/* gladvn */\n${sourceDirective}\n${tokensImport}\n${globalsImport}\n`;
 
@@ -109,7 +109,7 @@ function injectImports(cssFilePath, tokensRelPath) {
 
   fs.writeFileSync(cssFilePath, content);
   console.log(
-    `${green}   ✅ Injected gladcn imports into ${path.basename(
+    `${green}   ✅ Injected gladvn imports into ${path.basename(
       cssFilePath,
     )}${reset}`,
   );
@@ -188,7 +188,7 @@ ${cyan}╔═══════════════════════
 ║      ${green}@import "tailwindcss";${cyan}                                      ║
 ║      ${green}@source "../node_modules/gladvn/dist";${cyan}             ║
 ║      ${green}@import "./tokens.css";${cyan}                                     ║
-║      ${green}@import "gladvn/gladcn.css";${cyan}                       ║
+║      ${green}@import "gladvn/gladvn.css";${cyan}                       ║
 ║                                                                  ║
 ║   ${yellow}3. Use components:${cyan}                                             ║
 ║                                                                  ║

package/src/dev/App.tsx

@@ -14,7 +14,7 @@ import {
 } from "../components/macro/command-preset";
 import { useDevContext } from "../dev/components/dev-context";
 import { SizeToggle } from "../dev/components/showcase";
-import { GladcnLogo } from "../dev/components/GladcnLogo";
+import { GladvnLogo } from "../dev/components/GladvnLogo";
 import { COMPONENTS } from "../dev/data";
 import OverviewSection from "../dev/showcase/overview";
 import {
@@ -164,7 +164,7 @@ export default function App() {
               )}
             </button>
             <a href="/" className="inline-flex items-center hover:opacity-80 transition-opacity">
-              <GladcnLogo variant="wordmark" />
+              <GladvnLogo variant="wordmark" />
             </a>
           </div>
 
@@ -187,7 +187,7 @@ export default function App() {
             <Button
               variant="ghost"
               iconOnly
-              render={<a href="https://github.com/duongacy/gladcn" target="_blank" rel="noreferrer" />}
+              render={<a href="https://github.com/duongacy/gladvn" target="_blank" rel="noreferrer" />}
               nativeButton={false}
               className="text-muted-foreground hover:text-foreground hidden sm:inline-flex"
             >
@@ -296,7 +296,7 @@ export default function App() {
         open={cmdOpen}
         onOpenChange={setCmdOpen}
         title="Tìm component"
-        description="Tìm kiếm nhanh component trong Gladcn UI"
+        description="Tìm kiếm nhanh component trong Gladvn UI"
       >
         <Command size="lg">
           <CommandInput placeholder="Nhập tên component..." autoFocus />

package/src/dev/components/{GladcnLogo.tsx → GladvnLogo.tsx}

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils";
 
-interface GladcnLogoProps {
+interface GladvnLogoProps {
   className?: string;
   /** Size of the icon SVG */
   iconSize?: string;
@@ -8,11 +8,11 @@ interface GladcnLogoProps {
   variant?: "icon" | "wordmark";
 }
 
-export function GladcnLogo({
+export function GladvnLogo({
   className,
   iconSize = "size-7",
   variant = "icon",
-}: GladcnLogoProps) {
+}: GladvnLogoProps) {
   const icon = (
     <svg
       viewBox="0 0 32 32"
@@ -70,7 +70,7 @@ export function GladcnLogo({
       <div className={cn("flex items-center gap-2.5", className)}>
         {icon}
         <span className="font-bold text-[15px] tracking-tight leading-none">
-          gladcn
+          gladvn
         </span>
       </div>
     );

package/src/dev/index.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @import "../styles/tokens.css";
-@import "../styles/gladcn.css";
+@import "../styles/gladvn.css";
 
 /* Consumer responsibility: set body bg/text using design tokens */
 body {

package/src/dev/sections/forms.tsx

@@ -138,7 +138,7 @@ export default function FormsSection() {
                   <InputGroupAddon>
                     <InputGroupText>https://</InputGroupText>
                   </InputGroupAddon>
-                  <InputGroupInput id="tf-group" placeholder="gladcn.ui" />
+                  <InputGroupInput id="tf-group" placeholder="gladvn.ui" />
                   <InputGroupAddon>
                     <InputGroupText>.com</InputGroupText>
                   </InputGroupAddon>

package/src/dev/sections/overview.tsx

@@ -69,7 +69,7 @@ export default function OverviewSection() {
           <div className="relative z-10 flex flex-col h-full">
             <div>
               <Badge color="secondary" className="mb-3 px-2.5 py-0.5 shadow-sm">
-                ✨ gladcn UI v0.2.1
+                ✨ gladvn UI v0.2.1
               </Badge>
               <h2 className="text-3xl font-bold tracking-tight mb-2">
                 Crafted for Perfection
@@ -143,7 +143,7 @@ export default function OverviewSection() {
               <h3 className="font-semibold">Quick Install</h3>
             </div>
             <p className="text-sm text-muted-foreground mb-4">
-              Available on npm. Add gladcn to your project in seconds.
+              Available on npm. Add gladvn to your project in seconds.
             </p>
             <div className="rounded-lg bg-muted/50 px-3 py-2.5 font-mono text-xs border border-border flex items-center justify-between">
               <span className="truncate">npm i gladvn</span>

package/src/dev/showcase/navigation-menu.tsx

@@ -72,7 +72,7 @@ function NavigationMenuMicroShowcase() {
               }
             >
               <div className="mb-2 mt-4 text-lg font-medium">
-                gladcn/ui
+                gladvn/ui
               </div>
               <p className="text-sm leading-tight text-muted-foreground">
                 Beautifully designed components built with Radix UI and
@@ -159,7 +159,7 @@ function NavigationMenuMicroShowcase() {
                         }
                       >
                         <div className="mb-2 mt-4 text-lg font-medium">
-                          gladcn/ui
+                          gladvn/ui
                         </div>
                         <p className="text-sm leading-tight text-muted-foreground">
                           Beautifully designed components built with Radix UI

package/src/dev/showcase/overview.tsx

@@ -17,9 +17,10 @@ import {
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { GladcnLogo } from "../../dev/components/GladcnLogo";
+import { GladvnLogo } from "../../dev/components/GladvnLogo";
 
 import { ProgressPreset as Progress } from "../../components/macro/progress-preset";
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/micro/avatar";
 import { Badge } from "../../components/micro/badge";
 import { Button } from "../../components/micro/button";
 import {
@@ -34,7 +35,8 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue, SelectPortal } from "../../components/micro/select";
+  SelectValue, SelectPortal
+} from "../../components/micro/select";
 import { Switch } from "../../components/micro/switch";
 import { ColorSwatch } from "../../dev/components/showcase";
 import { COLORS, STATS } from "../../dev/data";
@@ -139,7 +141,7 @@ export default function OverviewSection() {
             style={{ animationDelay: "200ms", animationFillMode: "both" }}
           >
             Component library thường đòi bạn follow quy tắc của họ mãi mãi.
-            gladcn đặt toàn bộ source code vào tay bạn ngay từ đầu —{" "}
+            gladvn đặt toàn bộ source code vào tay bạn ngay từ đầu —{" "}
             <strong className="text-foreground">
               không vendor lock-in, không breaking change bất ngờ, không
               node_modules ẩn.
@@ -212,18 +214,18 @@ export default function OverviewSection() {
                       <SelectValue placeholder="Chọn vùng" />
                     </SelectTrigger>
                     <SelectPortal>
-                                      <SelectContent>
-                                                            <SelectItem value="edge">
-                                                              Edge Network (Toàn cầu)
-                                                            </SelectItem>
-                                                            <SelectItem value="us-east">
-                                                              US East (Virginia)
-                                                            </SelectItem>
-                                                            <SelectItem value="ap-se">
-                                                              AP South East (Sing)
-                                                            </SelectItem>
-                                                          </SelectContent>
-                                      </SelectPortal>
+                      <SelectContent>
+                        <SelectItem value="edge">
+                          Edge Network (Toàn cầu)
+                        </SelectItem>
+                        <SelectItem value="us-east">
+                          US East (Virginia)
+                        </SelectItem>
+                        <SelectItem value="ap-se">
+                          AP South East (Sing)
+                        </SelectItem>
+                      </SelectContent>
+                    </SelectPortal>
                   </Select>
                 </div>
               </div>
@@ -304,7 +306,7 @@ export default function OverviewSection() {
           </h2>
           <p className="text-muted-foreground text-lg">
             Phần lớn component library hỏng ở năm thứ hai — khi team cần thay
-            đổi nhưng không ai dám sửa vì không biết gì sẽ vỡ. gladcn được xây
+            đổi nhưng không ai dám sửa vì không biết gì sẽ vỡ. gladvn được xây
             trên{" "}
             <strong className="text-foreground">Các nguyên tắc tường minh</strong>
             {" "}để bạn luôn biết mình đang sửa ở tầng nào và điều gì sẽ bị ảnh
@@ -966,7 +968,7 @@ export default function OverviewSection() {
               nền đen. Đây là điểm mà hầu hết thư viện bỏ cuộc.
             </p>
             <p className="text-muted-foreground text-xl leading-relaxed">
-              gladcn giải quyết bằng{" "}
+              gladvn giải quyết bằng{" "}
               <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">
                 {"<ThemeWrapper>"}
               </code>{" "}
@@ -986,7 +988,7 @@ export default function OverviewSection() {
           <div className="relative z-10 grid sm:grid-cols-2 gap-6 max-w-3xl">
             <div className="p-6 rounded-2xl border border-success/30 bg-success/10 shadow-sm flex flex-col gap-2">
               <div className="text-success font-semibold text-lg flex items-center gap-2">
-                ✅ gladcn — ThemeWrapper
+                ✅ gladvn — ThemeWrapper
               </div>
               <p className="text-success/80 text-sm leading-relaxed">
                 Theme được tunnel xuyên qua Portal boundary. Dialog, Tooltip,
@@ -1055,6 +1057,49 @@ export default function OverviewSection() {
         </div>
       </section>
 
+      {/* 🤝 CONTRIBUTORS */}
+      <section className="container max-w-6xl mx-auto px-4 mb-24">
+        <div className="flex flex-col items-center text-center space-y-8">
+          <div className="space-y-4 max-w-2xl">
+            <h2 className="text-3xl font-extrabold tracking-tight">
+              Contributors
+            </h2>
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-6">
+            {[
+              {
+                name: "Ý Le",
+                role: "Creator & Maintainer",
+                avatar: "https://github.com/duongacy.png",
+                url: "https://github.com/duongacy",
+              }
+            ].map((user) => (
+              <a
+                key={user.name}
+                href={user.url}
+                target="_blank"
+                rel="noreferrer"
+                className="group flex flex-col items-center gap-3 p-4 rounded-2xl hover:bg-muted/50 transition-colors"
+              >
+                <Avatar className="size-16 border-2 border-transparent group-hover:border-primary/20 transition-all duration-300 group-hover:scale-105">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="text-lg bg-primary/5 text-primary">{user.name.substring(0, 2).toUpperCase()}</AvatarFallback>
+                </Avatar>
+                <div className="text-center">
+                  <div className="font-semibold text-sm group-hover:text-primary transition-colors">{user.name}</div>
+                  <div className="text-xs text-muted-foreground mt-0.5">{user.role}</div>
+                </div>
+              </a>
+            ))}
+          </div>
+
+          <Button variant="outline" className="mt-4 rounded-full" render={<a href="https://github.com/duongacy/gladcn" target="_blank" rel="noreferrer" />}>
+            Trở thành Contributor
+          </Button>
+        </div>
+      </section>
+
       {/* 🚀 FINAL CTA */}
       <section className="container max-w-6xl mx-auto px-4">
         <div className="rounded-[2.5rem] border-2 border-primary/40 bg-gradient-to-br from-primary/10 via-background to-info/5 p-10 md:p-16 shadow-2xl shadow-primary/5 text-center relative overflow-hidden">

package/src/dev/showcase/separator.tsx

@@ -21,7 +21,7 @@ function SeparatorMicroShowcase() {
         codeString={`<div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
   <div className="space-y-1">
     <h4 className="text-sm font-medium leading-none">
-      Gladcn UI
+      Gladvn UI
     </h4>
     <p className="text-sm text-muted-foreground">
       Bộ UI Component mã nguồn mở.
@@ -36,7 +36,7 @@ function SeparatorMicroShowcase() {
       >
         <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
           <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Gladcn UI</h4>
+            <h4 className="text-sm font-medium leading-none">Gladvn UI</h4>
             <p className="text-sm text-muted-foreground">
               Bộ UI Component mã nguồn mở.
             </p>

package/src/styles/tokens.css

@@ -2,10 +2,10 @@
  * gladvn - Design Tokens (Default Theme)
  * ==========================================================================
  * Copy this file into your project's CSS and customize the values below.
- * These CSS variables control the entire look & feel of all gladcn components.
+ * These CSS variables control the entire look & feel of all gladvn components.
  *
  * Usage: Copy this content into your project's main CSS BEFORE the
- *        @import "gladvn/gladcn.css" line.
+ *        @import "gladvn/gladvn.css" line.
  *
  * Color format: oklch(lightness chroma hue)
  * Docs: https://oklch.com

package/dist/dev/components/GladcnLogo.d.ts

@@ -1,10 +0,0 @@
-interface GladcnLogoProps {
-    className?: string;
-    /** Size of the icon SVG */
-    iconSize?: string;
-    /** Show icon only (default) or icon + wordmark */
-    variant?: "icon" | "wordmark";
-}
-export declare function GladcnLogo({ className, iconSize, variant, }: GladcnLogoProps): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=GladcnLogo.d.ts.map