gladvn 0.2.14 → 0.2.16

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,gCAkiCtC"}

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.16",
   "type": "module",
   "description": "DO NOT 'npm install'. Use 'npx gladvn init' instead! A highly composable React component library built with Tailwind CSS.",
   "keywords": [
@@ -12,11 +12,16 @@
     "radix-ui"
   ],
   "license": "MIT",
+  "homepage": "https://gladvn.vercel.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/duongacy/gladcn"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "gladcn": "bin/cli.js"
+    "gladvn": "bin/cli.js"
   },
   "exports": {
     ".": {
@@ -29,7 +34,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";
@@ -127,10 +129,10 @@ export default function OverviewSection() {
             style={{ animationDelay: "100ms", animationFillMode: "both" }}
           >
             <span className="block text-foreground drop-shadow-sm">
-              Mọi component.
+              Tinh tế. Đẳng cấp.
             </span>
             <span className="block mt-2 bg-gradient-to-r leading-[1.2] from-primary via-info to-primary bg-[length:200%_auto] bg-clip-text text-transparent animate-[spin_8s_linear_infinite] [animation-name:gradient] [animation-duration:8s] [animation-timing-function:linear] [animation-iteration-count:infinite]">
-              Trong thư mục của bạn.
+              Sạch sẽ.
             </span>
           </h1>
 
@@ -138,11 +140,11 @@ export default function OverviewSection() {
             className="max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed mb-10 animate-fade-up"
             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 —{" "}
+            Đa số component library bắt bạn phải phụ thuộc vào họ mãi mãi.
+            gladvn copy thẳng source code vào dự án của bạn —{" "}
             <strong className="text-foreground">
-              không vendor lock-in, không breaking change bất ngờ, không
-              node_modules ẩn.
+              không node_modules ẩn, không breaking change bất ngờ, không
+              vendor lock-in.
             </strong>
           </p>
         </div>
@@ -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>
@@ -300,15 +302,14 @@ export default function OverviewSection() {
       <section className="container max-w-6xl mx-auto space-y-12 px-4">
         <div className="text-center max-w-2xl mx-auto space-y-4">
           <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
-            Tường minh từ thiết kế. Bền vững theo thời gian.
+            Rõ ràng từ đầu. Dùng lâu không sợ vỡ.
           </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
-            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
-            hưởng.
+            Nhiều dự án bắt đầu gãy ở năm thứ hai — ai cũng muốn sửa nhưng
+            không ai dám sửa vì không biết cái gì sẽ hỏng theo. gladvn chia code
+            thành{" "}
+            <strong className="text-foreground">các tầng rõ ràng</strong>
+            {", "}nên bạn luôn biết mình đang sửa ở đâu và ảnh hưởng đến đâu.
           </p>
         </div>
 
@@ -323,19 +324,19 @@ export default function OverviewSection() {
                 <SparklesIcon className="size-4" /> Điểm khác biệt lớn nhất
               </div>
               <h3 className="text-3xl md:text-5xl font-extrabold tracking-tight">
-                Sở hữu 100% mã nguồn
+                Code là của bạn, 100%
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-2xl">
-                Chạy một lệnh duy nhất — toàn bộ source code (components, hooks,
-                styles, contexts) được sao chép thẳng vào thư mục{" "}
+                Chạy một lệnh — toàn bộ components, hooks, styles, contexts
+                được copy thẳng vào thư mục{" "}
                 <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
                   src/
                 </code>{" "}
-                của dự án bạn.{" "}
+                của bạn.{" "}
                 <strong className="text-foreground">
-                  Không cài qua node_modules, không bị vendor lock-in
+                  Không qua node_modules, không bị khóa vào bất kỳ ai
                 </strong>{" "}
-                — bạn đọc được, sửa được, xoá được từng dòng code.
+                — bạn đọc được, sửa được, xoá được từng dòng.
               </p>
 
               <div className="flex items-center gap-4 pt-2">
@@ -421,13 +422,13 @@ export default function OverviewSection() {
                   Sửa Macro — an toàn nhất
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  Đây là nơi bạn nên chỉnh trước tiên. Mỗi Macro là một preset
-                  độc lập — thêm footer cho DatePicker, bỏ nút đóng của Dialog,
-                  điều chỉnh placeholder của Combobox.{" "}
+                  Bắt đầu ở đây. Mỗi Macro là một preset độc lập — thêm footer
+                  cho DatePicker, bỏ nút đóng của Dialog, chỉnh placeholder
+                  Combobox.{" "}
                   <strong className="text-foreground">
-                    Thay đổi chỉ ảnh hưởng đúng preset đó
+                    Sửa cái nào chỉ ảnh hưởng cái đó
                   </strong>
-                  , không lan ra component nào khác.
+                  , không lan sang đâu cả.
                 </p>
               </div>
 
@@ -440,15 +441,15 @@ export default function OverviewSection() {
                   src/components/micro/
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Sửa Micro — ảnh hưởng rộng
+                  Sửa Micro — cẩn thận hơn
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  Micro là nền tảng — mọi Macro đều xây trên chúng. Sửa một
-                  variant của Button hay thay animation của Tooltip sẽ{" "}
+                  Micro là nền — mọi Macro đều xây trên nó. Sửa variant của
+                  Button hay animation của Tooltip thì{" "}
                   <strong className="text-foreground">
-                    tác động đồng loạt đến toàn bộ nơi dùng component đó
-                  </strong>{" "}
-                  trong ứng dụng. Chỉ chỉnh khi bạn rõ mình đang làm gì.
+                    tất cả nơi dùng component đó đều thay đổi theo
+                  </strong>
+                  . Chỉ sửa khi bạn rõ mình đang làm gì.
                 </p>
               </div>
 
@@ -461,16 +462,15 @@ export default function OverviewSection() {
                   src/index.css
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Sửa CSS — chạm toàn bộ hệ thống
+                  Sửa CSS — ảnh hưởng toàn bộ
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  CSS token là ngôn ngữ chung của mọi component — màu sắc,
-                  typography, border-radius. Thay đổi một token ở đây{" "}
+                  CSS token quyết định màu, font, border-radius cho tất cả.
+                  Đổi một token ở đây thì{" "}
                   <strong className="text-foreground">
-                    tức thời cập nhật toàn bộ giao diện
+                    toàn bộ giao diện cập nhật ngay
                   </strong>
-                  , từ Button đến Dialog. Dùng khi bạn muốn rebrand hoặc thay
-                  đổi design language, không phải để vá từng chỗ.
+                  . Dùng khi muốn rebrand, không phải để vá lỗi lẻ tẻ.
                 </p>
               </div>
 
@@ -486,15 +486,13 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4 mb-10">
               <h3 className="text-2xl md:text-4xl font-extrabold tracking-tight">
-                Micro &amp; Macro Architecture
+                Micro & Macro
               </h3>
               <p className="text-muted-foreground max-w-lg text-lg leading-relaxed">
-                Tách biệt rõ ràng Core components linh hoạt (Micro) và các
-                pattern tiện dụng (Macro).
-                <strong className="text-foreground">
-                  Micro tuyệt đối không áp đặt layout phức tạp (Opinionated).
-                  Mọi logic lắp ráp giao diện đều phải uỷ quyền (Delegate) hoàn
-                  toàn cho Macro.
+                Micro là component thuần — chỉ lo style, không ép layout.
+                Macro là preset — lắp ghép Micro thành giao diện hoàn chỉnh.
+                <strong className="text-foreground block mt-2">
+                  Micro không bao giờ tự quyết layout. Việc đó thuộc về Macro.
                 </strong>
               </p>
             </div>
@@ -558,12 +556,11 @@ export default function OverviewSection() {
                 Style Encapsulation
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Mỗi component là một hộp đen styling. Consumer chỉ tác động
-                vào bên trong qua{" "}
-                <code>data-slot</code> — contract đã được khai báo chính thức
-                trong API.{" "}
+                Mỗi component là một hộp kín về style. Muốn tuỳ chỉnh từ ngoài
+                thì dùng{" "}
+                <code>data-slot</code> — đã có sẵn contract rõ ràng.{" "}
                 <strong className="text-foreground">
-                  Refactor nội tại không bao giờ phá vỡ code của người dùng.
+                  Refactor bên trong thoải mái mà không phá code bên ngoài.
                 </strong>
               </p>
             </div>
@@ -586,11 +583,11 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4">
               <h3 className="text-2xl md:text-4xl font-extrabold tracking-tight">
-                Orthogonal Styling
+                Variant × Color
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-lg">
-                Tách biệt rõ ràng trục cấu trúc (Variant) và trục màu sắc
-                (Color) thành các style độc lập, giúp tránh bùng nổ tổ hợp CSS
+                Variant (solid, outline, ghost...) và Color (primary, destructive...)
+                là hai trục hoàn toàn độc lập. Kết hợp tự do mà không bị bùng nổ
                 class.
               </p>
             </div>
@@ -627,10 +624,10 @@ export default function OverviewSection() {
                 Zero-prop Defaults
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-lg">
-                Component phải hoạt động mượt mà và render đúng UI chuẩn kể cả
-                khi dev không truyền bất kỳ prop nào vào.{" "}
+                Quẳng component vào mà không truyền prop nào — nó vẫn chạy đẹp,
+                vẫn đúng behavior.{" "}
                 <strong className="text-foreground">
-                  Nếu không, mỗi lần dùng là một lần tra tài liệu.
+                  Không phải tra docs mỗi lần dùng.
                 </strong>
               </p>
             </div>
@@ -659,14 +656,13 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4">
               <h3 className="text-2xl font-extrabold tracking-tight">
-                Headless Behavior Layer
+                Headless + Style
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Keyboard navigation, focus management, ARIA state — tất cả được
-                tách sang lớp Headless UI (Base UI). Micro component chỉ wrap
-                và thêm visual style, không tự implement logic tương tác.{" "}
+                Keyboard, focus, ARIA — Base UI lo hết. Micro component chỉ
+                thêm lớp style lên trên, không tự viết logic tương tác.{" "}
                 <strong className="text-foreground">
-                  Behavior đúng mặc định, không cần test lại từng lần.
+                  Behavior đúng sẵn, không cần test lại.
                 </strong>
               </p>
             </div>
@@ -691,14 +687,13 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4">
               <h3 className="text-2xl md:text-4xl font-extrabold tracking-tight">
-                CSS Token Architecture
+                CSS Token
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-lg">
-                Không component nào được hardcode màu sắc, spacing hay
-                border-radius trực tiếp. Tất cả tham chiếu CSS custom property
-                từ hệ thống token.{" "}
+                Không component nào hardcode màu hay spacing. Tất cả đều
+                tham chiếu từ hệ thống token chung.{" "}
                 <strong className="text-foreground">
-                  Thay đổi một token — toàn hệ thống cập nhật tức thì.
+                  Đổi một token — cả app cập nhật.
                 </strong>
               </p>
             </div>
@@ -725,11 +720,12 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4">
               <h3 className="text-2xl font-extrabold tracking-tight">
-                Strict Polymorphism
+                Polymorphism
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Dùng pattern <code>asChild</code> hoặc <code>render</code> prop
-                để thay đổi thẻ HTML root, không đẻ bừa các prop lồng nhau.
+                Dùng <code>render</code> prop để đổi thẻ HTML root —
+                ví dụ biến Button thành Link. Không cần prop <code>as</code>
+                {" "}hay tạo wrapper lồng nhau.
               </p>
             </div>
             <div className="relative z-10 mt-auto pt-6 space-y-3">
@@ -757,15 +753,14 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4">
               <h3 className="text-2xl font-extrabold tracking-tight">
-                Dumb Primitives
+                Stateless Primitive
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Micro component không được chứa{" "}
-                <code>useState</code> hay <code>useEffect</code>. Chúng hoàn
-                toàn stateless — mọi state đều thuộc về Headless UI hoặc Macro
-                preset.{" "}
+                Micro component không chứa{" "}
+                <code>useState</code> hay <code>useEffect</code>. State nằm ở
+                Headless UI hoặc Macro.{" "}
                 <strong className="text-foreground">
-                  Primitive càng "ngu" càng dễ test và dễ tin tưởng.
+                  Component càng đơn giản, càng ít bug.
                 </strong>
               </p>
             </div>
@@ -790,14 +785,13 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4">
               <h3 className="text-2xl font-extrabold tracking-tight">
-                Accessibility First
+                Accessibility
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Ưu tiên HTML semantic, liên kết form qua{" "}
-                <code>aria-describedby</code>, ẩn icon trang trí bằng{" "}
-                <code>aria-hidden</code> để đảm bảo WCAG AAA/AA.{" "}
+                Semantic HTML, <code>aria-describedby</code> cho form,
+                icon trang trí tự ẩn khỏi screen reader.{" "}
                 <strong className="text-foreground">
-                  Accessibility là thứ không ai để ý — cho đến khi bị audit.
+                  Chuẩn WCAG — không cần nghĩ thêm.
                 </strong>
               </p>
             </div>
@@ -966,7 +960,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 +980,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,21 +1049,63 @@ 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">
           <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_60%_at_50%_0%,rgba(var(--primary-rgb),0.15),transparent)] pointer-events-none" />
           <div className="relative z-10 space-y-6 max-w-2xl mx-auto">
             <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">
-              Sẵn sàng bắt đầu?
+              Thử ngay?
             </h2>
             <p className="text-muted-foreground text-lg leading-relaxed">
-              Toàn bộ source code sẽ nằm trong thư mục{" "}
+              30 giây — toàn bộ code nằm trong{" "}
               <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
                 src/
               </code>{" "}
-              của bạn trong vòng 30 giây. Không cần config. Không cần đọc thêm
-              tài liệu.
+              của bạn. Không config, không đọc docs.
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
               <button

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