gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/tooltip.tsx

@@ -14,22 +14,16 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Micro Content (Only Micro exists)
-// ──────────────────────────────────────────────────────────
 function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Vị trí (Placements)"
-        description="Tooltip có thể được đặt ở bất kỳ cạnh nào của trigger bằng thuộc tính side."
-        codeString={`<div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
+    <div className="space-y-10">
+      <ShowcaseExample title="Vị trí (Placements)" description="Tooltip có thể được đặt ở bất kỳ cạnh nào của trigger bằng thuộc tính side." code={`<div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger
@@ -83,70 +77,68 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
         
       </Tooltip>
     </TooltipProvider>
-  </div>`}
-      >
-        <div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" size={globalSize}>
-                    Trên (Top)
-                  </Button>
-                }
-              />
+  </div>`} preview={
+                  <>
+          <div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button variant="outline" size={globalSize}>
+                              Trên (Top)
+                            </Button>
+                          }
+                        />
 
-                <TooltipContent side="top">Tooltip nằm trên</TooltipContent>
-              
-            </Tooltip>
+                          <TooltipContent side="top">Tooltip nằm trên</TooltipContent>
+                        
+                      </Tooltip>
 
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" size={globalSize}>
-                    Dưới (Bottom)
-                  </Button>
-                }
-              />
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button variant="outline" size={globalSize}>
+                              Dưới (Bottom)
+                            </Button>
+                          }
+                        />
 
-                <TooltipContent side="bottom">Tooltip nằm dưới</TooltipContent>
-              
-            </Tooltip>
+                          <TooltipContent side="bottom">Tooltip nằm dưới</TooltipContent>
+                        
+                      </Tooltip>
 
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" size={globalSize}>
-                    Trái (Left)
-                  </Button>
-                }
-              />
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button variant="outline" size={globalSize}>
+                              Trái (Left)
+                            </Button>
+                          }
+                        />
 
-                <TooltipContent side="left">Tooltip nằm trái</TooltipContent>
-              
-            </Tooltip>
+                          <TooltipContent side="left">Tooltip nằm trái</TooltipContent>
+                        
+                      </Tooltip>
 
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" size={globalSize}>
-                    Phải (Right)
-                  </Button>
-                }
-              />
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button variant="outline" size={globalSize}>
+                              Phải (Right)
+                            </Button>
+                          }
+                        />
 
-                <TooltipContent side="right">Tooltip nằm phải</TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </ExampleSection>
+                          <TooltipContent side="right">Tooltip nằm phải</TooltipContent>
+                        
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                  </>
+                } />
 
       <ExampleGrid>
-        <ExampleSection
-          label="Nội dung dài (Long Content)"
-          description="Tooltip tự động giới hạn chiều rộng và xuống dòng khi nội dung quá dài."
-          codeString={`<TooltipProvider>
+        <ShowcaseExample title="Nội dung dài (Long Content)" description="Tooltip tự động giới hạn chiều rộng và xuống dòng khi nội dung quá dài." code={`<TooltipProvider>
     <Tooltip>
       <TooltipTrigger
         render={
@@ -166,34 +158,32 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
         </TooltipContent>
       
     </Tooltip>
-  </TooltipProvider>`}
-        >
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" size={globalSize} iconOnly>
-                    <InfoIcon />
-                  </Button>
-                }
-              />
+  </TooltipProvider>`} preview={
+                      <>
+              <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger
+                              render={
+                                <Button variant="outline" size={globalSize} iconOnly>
+                                  <InfoIcon />
+                                </Button>
+                              }
+                            />
 
-                <TooltipContent>
-                  <p>
-                    Đây là một đoạn nội dung tooltip khá dài nhằm mục đích trình
-                    diễn cách mà Tooltip tự động cắt và xuống dòng khi vượt quá
-                    chiều rộng tối đa (max-width) cho phép.
-                  </p>
-                </TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
-        </ExampleSection>
+                              <TooltipContent>
+                                <p>
+                                  Đây là một đoạn nội dung tooltip khá dài nhằm mục đích trình
+                                  diễn cách mà Tooltip tự động cắt và xuống dòng khi vượt quá
+                                  chiều rộng tối đa (max-width) cho phép.
+                                </p>
+                              </TooltipContent>
+                            
+                          </Tooltip>
+                        </TooltipProvider>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Trigger bị vô hiệu (Disabled Trigger)"
-          description="Để bắt sự kiện hover trên nút disabled, cần bọc nó trong một thẻ span có tabIndex."
-          codeString={`<TooltipProvider>
+        <ShowcaseExample title="Trigger bị vô hiệu (Disabled Trigger)" description="Để bắt sự kiện hover trên nút disabled, cần bọc nó trong một thẻ span có tabIndex." code={`<TooltipProvider>
     <Tooltip>
       <TooltipTrigger
         render={
@@ -218,43 +208,40 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
         </TooltipContent>
       
     </Tooltip>
-  </TooltipProvider>`}
-        >
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span
-                    tabIndex={0}
-                    className="inline-block cursor-not-allowed"
-                  >
-                    <Button
-                      variant="outline"
-                      size={globalSize}
-                      disabled
-                      className="pointer-events-none w-full h-full"
-                      iconOnly
-                    >
-                      <ShieldAlertIcon />
-                    </Button>
-                  </span>
-                }
-              />
+  </TooltipProvider>`} preview={
+                      <>
+              <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger
+                              render={
+                                <span
+                                  tabIndex={0}
+                                  className="inline-block cursor-not-allowed"
+                                >
+                                  <Button
+                                    variant="outline"
+                                    size={globalSize}
+                                    disabled
+                                    className="pointer-events-none w-full h-full"
+                                    iconOnly
+                                  >
+                                    <ShieldAlertIcon />
+                                  </Button>
+                                </span>
+                              }
+                            />
 
-                <TooltipContent side="right">
-                  <p>Bạn không có quyền thực hiện hành động này.</p>
-                </TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
-        </ExampleSection>
+                              <TooltipContent side="right">
+                                <p>Bạn không có quyền thực hiện hành động này.</p>
+                              </TooltipContent>
+                            
+                          </Tooltip>
+                        </TooltipProvider>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="Độ trễ tuỳ chỉnh (Custom Delay)"
-        description="Thay đổi thời gian trễ trước khi tooltip xuất hiện thông qua thuộc tính delay của TooltipProvider."
-        fullWidth
-        codeString={`<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <ShowcaseExample title="Độ trễ tuỳ chỉnh (Custom Delay)" description="Thay đổi thời gian trễ trước khi tooltip xuất hiện thông qua thuộc tính delay của TooltipProvider." code={`<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
     <TooltipProvider delay={0}>
       <Tooltip>
         <TooltipTrigger
@@ -305,81 +292,79 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
         
       </Tooltip>
     </TooltipProvider>
-  </div>`}
-      >
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <TooltipProvider delay={0}>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    size={globalSize}
-                    className="w-full"
-                  >
-                    Tức thì (0ms)
-                  </Button>
-                }
-              />
-              
-                <TooltipContent>Xuất hiện ngay lập tức</TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
+  </div>`} preview={
+                  <>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <TooltipProvider delay={0}>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button
+                              variant="outline"
+                              size={globalSize}
+                              className="w-full"
+                            >
+                              Tức thì (0ms)
+                            </Button>
+                          }
+                        />
+                        
+                          <TooltipContent>Xuất hiện ngay lập tức</TooltipContent>
+                        
+                      </Tooltip>
+                    </TooltipProvider>
 
-          <TooltipProvider delay={500}>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    size={globalSize}
-                    className="w-full"
-                  >
-                    Mặc định (500ms)
-                  </Button>
-                }
-              />
-              
-                <TooltipContent>Xuất hiện sau nửa giây</TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
+                    <TooltipProvider delay={500}>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button
+                              variant="outline"
+                              size={globalSize}
+                              className="w-full"
+                            >
+                              Mặc định (500ms)
+                            </Button>
+                          }
+                        />
+                        
+                          <TooltipContent>Xuất hiện sau nửa giây</TooltipContent>
+                        
+                      </Tooltip>
+                    </TooltipProvider>
 
-          <TooltipProvider delay={2000}>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    size={globalSize}
-                    className="w-full"
-                  >
-                    Chậm (2000ms)
-                  </Button>
-                }
-              />
-              
-                <TooltipContent>Xuất hiện sau 2 giây chờ đợi</TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </ExampleSection>
+                    <TooltipProvider delay={2000}>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button
+                              variant="outline"
+                              size={globalSize}
+                              className="w-full"
+                            >
+                              Chậm (2000ms)
+                            </Button>
+                          }
+                        />
+                        
+                          <TooltipContent>Xuất hiện sau 2 giây chờ đợi</TooltipContent>
+                        
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function TooltipShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Tooltip"
       description="Một popup nhỏ hiển thị thông tin bổ sung khi người dùng di chuột hoặc trỏ tiêu điểm vào một phần tử."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Tooltip (Gợi ý)</DocsH3>
           <DocsP>
@@ -390,11 +375,7 @@ export default function TooltipShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <TooltipMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <TooltipMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }

package/src/dev/showcase/why.tsx

@@ -23,7 +23,6 @@ export default function WhyGladvn() {
 
   return (
     <div className="space-y-24 overflow-hidden pb-24 font-sans max-w-5xl mx-auto">
-      {/* HERO SECTION */}
       <section className="relative pt-20 pb-16">
         <div className="absolute inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(var(--primary-rgb),0.2),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(var(--primary-rgb),0.15),rgba(255,255,255,0))]" />
         
@@ -70,14 +69,13 @@ export default function WhyGladvn() {
         </div>
       </section>
 
-      {/* THE PROBLEM */}
       <section className="px-4">
         <div className="rounded-[2.5rem] border border-destructive/20 bg-destructive/5 p-8 md:p-16 text-center">
           <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight mb-6">
             Most UI libraries force a choice:
           </h2>
           <p className="text-xl md:text-2xl text-muted-foreground mb-12">
-            Low-level pain <span className="text-destructive font-bold">OR</span> High-level lock-in.
+            Đau đầu với Low-level <span className="text-destructive font-bold">HOẶC</span> Bị gò bó bởi High-level.
           </p>
           
           <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-left">
@@ -106,7 +104,6 @@ export default function WhyGladvn() {
         </div>
       </section>
 
-      {/* THE SOLUTION */}
       <section className="px-4 space-y-12">
         <div className="text-center max-w-2xl mx-auto space-y-4">
           <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
@@ -123,7 +120,7 @@ export default function WhyGladvn() {
               <div className="inline-flex p-3 rounded-xl bg-primary/10 text-primary mb-6">
                 <CodeIcon className="size-6" />
               </div>
-              <h3 className="text-2xl font-bold mb-4">Micro: Build your way</h3>
+              <h3 className="text-2xl font-bold mb-4">Micro: Xây dựng theo cách của bạn</h3>
               <p className="text-muted-foreground mb-8">
                 Lắp ráp từng mảnh ghép để kiểm soát 100% UI.
               </p>
@@ -133,7 +130,7 @@ export default function WhyGladvn() {
               <span className="text-info">variant=</span><span className="text-success">"solid"</span>
               <span className="text-info"> color=</span><span className="text-success">"primary"</span>
               <span className="text-primary">{">"}</span>
-              <span className="text-foreground">Submit</span>
+              <span className="text-foreground">Xác nhận</span>
               <span className="text-primary">{"</Button>"}</span>
             </div>
           </div>
@@ -143,7 +140,7 @@ export default function WhyGladvn() {
               <div className="inline-flex p-3 rounded-xl bg-info/10 text-info mb-6">
                 <LayersIcon className="size-6" />
               </div>
-              <h3 className="text-2xl font-bold mb-4">Macro: Move fast</h3>
+              <h3 className="text-2xl font-bold mb-4">Macro: Triển khai thần tốc</h3>
               <p className="text-muted-foreground mb-8">
                 Dùng các preset làm sẵn để phát triển nhanh chóng.
               </p>
@@ -161,9 +158,8 @@ export default function WhyGladvn() {
         </div>
       </section>
 
-      {/* MORE REASONS */}
       <section className="px-4">
-        <h2 className="text-2xl font-bold mb-8 pl-4 border-l-4 border-primary">More Reasons to Choose Gladvn</h2>
+        <h2 className="text-2xl font-bold mb-8 pl-4 border-l-4 border-primary">Thêm lý do để chọn Gladvn</h2>
         <div className="grid md:grid-cols-3 gap-6">
           <Card className="hover:border-primary/50 transition-colors">
             <CardContent className="p-6 space-y-4">
@@ -195,7 +191,6 @@ export default function WhyGladvn() {
         </div>
       </section>
 
-      {/* VS SHADCN */}
       <section className="px-4">
         <h2 className="text-2xl font-bold mb-8 text-center">So sánh nhanh</h2>
         <div className="overflow-x-auto rounded-2xl border border-border bg-card">
@@ -250,12 +245,11 @@ export default function WhyGladvn() {
         </div>
       </section>
 
-      {/* CTA */}
       <section className="px-4 pb-20">
         <div className="rounded-[3rem] bg-foreground text-background p-12 md:p-20 text-center relative overflow-hidden">
           <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.1),transparent)]" />
           <div className="relative z-10">
-            <h2 className="text-4xl md:text-5xl font-black mb-8">Ready to build differently?</h2>
+            <h2 className="text-4xl md:text-5xl font-black mb-8">Sẵn sàng trải nghiệm khác biệt?</h2>
             <button
               onClick={handleCopy}
               className="bg-background text-foreground hover:bg-muted px-8 py-4 rounded-full font-mono text-base font-bold shadow-xl flex items-center gap-4 mx-auto transition-transform hover:scale-105"

package/src/hooks/use-mobile.test.ts

@@ -1,5 +1,6 @@
 import { act, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
 import { useIsMobile } from "./use-mobile";
 
 describe("useIsMobile hook", () => {
@@ -7,7 +8,7 @@ describe("useIsMobile hook", () => {
 
   beforeEach(() => {
     originalInnerWidth = window.innerWidth;
-    
+
     // Mock matchMedia
     Object.defineProperty(window, "matchMedia", {
       writable: true,
@@ -43,7 +44,7 @@ describe("useIsMobile hook", () => {
 
   it("should update when resize event changes innerWidth", () => {
     let changeCallback: () => void = () => {};
-    
+
     // Custom mock to capture the event listener
     Object.defineProperty(window, "matchMedia", {
       writable: true,

package/src/lib/utils.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { cn } from "./utils";
 
 describe("cn utility function", () => {
@@ -14,9 +15,9 @@ describe("cn utility function", () => {
   });
 
   it("should handle conditional classes", () => {
-    expect(cn("base-class", true && "truthy-class", false && "falsy-class")).toBe(
-      "base-class truthy-class"
-    );
+    expect(
+      cn("base-class", true && "truthy-class", false && "falsy-class"),
+    ).toBe("base-class truthy-class");
   });
 
   it("should handle arrays of classes", () => {
@@ -25,7 +26,7 @@ describe("cn utility function", () => {
 
   it("should ignore null and undefined values", () => {
     expect(cn("valid-class", null, undefined, "another-class")).toBe(
-      "valid-class another-class"
+      "valid-class another-class",
     );
   });
 });