gladvn 0.2.15 → 0.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladvn",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "type": "module",
   "description": "DO NOT 'npm install'. Use 'npx gladvn init' instead! A highly composable React component library built with Tailwind CSS.",
   "keywords": [
@@ -12,6 +12,11 @@
     "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",

package/src/components/micro/combobox.tsx

@@ -78,6 +78,12 @@ function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
       data-slot="combobox-input"
       className={cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        // Clear standalone styles when inside InputGroup
+        "group-data-[slot=input-group]/input-group:border-0",
+        "group-data-[slot=input-group]/input-group:shadow-none",
+        "group-data-[slot=input-group]/input-group:h-auto",
+        "group-data-[slot=input-group]/input-group:rounded-none",
+        "group-data-[slot=input-group]/input-group:focus-visible:ring-0",
         className,
       )}
       {...props}

package/src/components/micro/input-group.tsx

@@ -224,9 +224,9 @@ const InputGroupInput = React.forwardRef<
       data-slot="input-group-control"
       className={cn(
         "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
-        "group-data-[size=sm]/input-group:h-7 group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:py-0.5 group-data-[size=sm]/input-group:text-xs",
-        "group-data-[size=md]/input-group:h-8 group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:py-1 group-data-[size=md]/input-group:text-sm",
-        "group-data-[size=lg]/input-group:h-9 group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-sm",
+        "group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:py-0.5 group-data-[size=sm]/input-group:text-xs",
+        "group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:py-1 group-data-[size=md]/input-group:text-sm",
+        "group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-sm",
         className,
       )}
       {...props}

package/src/dev/showcase/overview.tsx

@@ -129,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>
 
@@ -140,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.
-            gladvn đặ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>
@@ -302,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ỡ. 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
-            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>
 
@@ -325,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">
@@ -423,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>
 
@@ -442,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>
 
@@ -463,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>
 
@@ -488,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>
@@ -560,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>
@@ -588,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>
@@ -629,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>
@@ -661,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>
@@ -693,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>
@@ -727,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">
@@ -759,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>
@@ -792,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>
@@ -1106,15 +1098,14 @@ export default function OverviewSection() {
           <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