gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/tooltip.tsx

@@ -1,3 +1,13 @@
+import { InfoIcon, ShieldAlertIcon } from "lucide-react";
+
+import { Button } from "../../components/micro/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../components/micro/tooltip";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -8,17 +18,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import { InfoIcon, ShieldAlertIcon } from "lucide-react";
-import { useState } from "react";
-
-import { Button } from "../../components/micro/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  TooltipPortal,
-} from "../../components/micro/tooltip";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -31,45 +30,60 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
         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">
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline">Trên (Top)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent side="top">Tooltip nằm trên</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline">Trên (Top)</Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent side="top">
+            Tooltip nằm trên
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
 
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline">Dưới (Bottom)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent side="bottom">Tooltip nằm dưới</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline">Dưới (Bottom)</Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent side="bottom">
+            Tooltip nằm dưới
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
 
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline">Trái (Left)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent side="left">Tooltip nằm trái</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline">Trái (Left)</Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent side="left">
+            Tooltip nằm trái
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
 
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline">Phải (Right)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent side="right">Tooltip nằm phải</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
-  </TooltipProvider>
-</div>
-`}
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline">Phải (Right)</Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent side="right">
+            Tooltip nằm phải
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
+  </div>`}
       >
         <div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
           <TooltipProvider>
@@ -137,24 +151,26 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>
-  <Tooltip>
-    <TooltipTrigger
-      render={
-        <Button variant="outline" iconOnly>
-          <InfoIcon />
-        </Button>
-      }
-    />
-    <TooltipPortal>
-      <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>
-    </TooltipPortal>
-  </Tooltip>
-</TooltipProvider>
-`}
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button variant="outline" iconOnly>
+            <InfoIcon />
+          </Button>
+        }
+      />
+      <TooltipPortal>
+        <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>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>`}
         >
           <TooltipProvider>
             <Tooltip>
@@ -183,29 +199,31 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>
-  <Tooltip>
-    <TooltipTrigger
-      render={
-        <span tabIndex={0} className="inline-block cursor-not-allowed">
-          <Button
-            variant="outline"
-            disabled
-            className="pointer-events-none w-full h-full"
-            iconOnly
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            tabIndex={0}
+            className="inline-block cursor-not-allowed"
           >
-            <ShieldAlertIcon />
-          </Button>
-        </span>
-      }
-    />
-    <TooltipPortal>
-      <TooltipContent side="right">
-        <p>Bạn không có quyền thực hiện hành động này.</p>
-      </TooltipContent>
-    </TooltipPortal>
-  </Tooltip>
-</TooltipProvider>
-`}
+            <Button
+              variant="outline"
+              disabled
+              className="pointer-events-none w-full h-full"
+              iconOnly
+            >
+              <ShieldAlertIcon />
+            </Button>
+          </span>
+        }
+      />
+      <TooltipPortal>
+        <TooltipContent side="right">
+          <p>Bạn không có quyền thực hiện hành động này.</p>
+        </TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>`}
         >
           <TooltipProvider>
             <Tooltip>
@@ -243,40 +261,57 @@ function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
         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">
-  <TooltipProvider delay={0}>
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline" className="w-full">Tức thì (0ms)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent>Xuất hiện ngay lập tức</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
-  </TooltipProvider>
+    <TooltipProvider delay={0}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline" className="w-full">
+              Tức thì (0ms)
+            </Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent>
+            Xuất hiện ngay lập tức
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
 
-  <TooltipProvider delay={500}>
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline" className="w-full">Mặc định (500ms)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent>Xuất hiện sau nửa giây</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
-  </TooltipProvider>
+    <TooltipProvider delay={500}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline" className="w-full">
+              Mặc định (500ms)
+            </Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent>
+            Xuất hiện sau nửa giây
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
 
-  <TooltipProvider delay={2000}>
-    <Tooltip>
-      <TooltipTrigger
-        render={<Button variant="outline" className="w-full">Chậm (2000ms)</Button>}
-      />
-      <TooltipPortal>
-        <TooltipContent>Xuất hiện sau 2 giây chờ đợi</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
-  </TooltipProvider>
-</div>
-`}
+    <TooltipProvider delay={2000}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button variant="outline" className="w-full">
+              Chậm (2000ms)
+            </Button>
+          }
+        />
+        <TooltipPortal>
+          <TooltipContent>
+            Xuất hiện sau 2 giây chờ đợi
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
+  </div>`}
       >
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <TooltipProvider delay={0}>

package/src/lib/utils.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { cn } from "./utils";
 
 describe("utils", () => {

package/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

package/src/styles/gladvn.css

@@ -8,7 +8,7 @@
  * importing this file. Copy tokens.css into your project and customize it.
  * ========================================================================== */
 
-@import "tw-animate-css";
+@import "tw-animate-css/dist/tw-animate.css";
 
 @custom-variant dark (&:is(.dark *));