gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/carousel.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { CarouselPreset } from "../../components/macro/carousel-preset";
 import { Card, CardContent } from "../../components/micro/card";
 import {
@@ -16,7 +18,6 @@ import {
   ShowcaseDocs,
 } from "../../dev/components/showcase";
 import { cn } from "../../lib/utils";
-import { useState } from "react";
 
 const SLIDES = [
   {
@@ -127,12 +128,45 @@ function CarouselMacroShowcase() {
           label="Tiêu chuẩn (Standard)"
           description="Băng chuyền cơ bản nhất với cầu trượt."
           codeString={`<CarouselPreset
-  items={[
-    { id: "std-1", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg"><span className="text-4xl font-semibold">1</span></div></div> },
-    { id: "std-2", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg"><span className="text-4xl font-semibold">2</span></div></div> },
-    { id: "std-3", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg"><span className="text-4xl font-semibold">3</span></div></div> },
-  ]}
-/>`}
+    items={[
+      {
+        id: "std-1",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg">
+              <span className="text-4xl font-semibold">
+                1
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "std-2",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg">
+              <span className="text-4xl font-semibold">
+                2
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "std-3",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg">
+              <span className="text-4xl font-semibold">
+                3
+              </span>
+            </div>
+          </div>
+        ),
+      },
+    ]}
+  />`}
         >
           <div className="w-full max-w-sm px-12">
             <CarouselPreset
@@ -176,12 +210,39 @@ function CarouselMacroShowcase() {
           label="Thư viện ảnh (Image Gallery)"
           description="Sử dụng hình ảnh thực làm nội dung slide."
           codeString={`<CarouselPreset
-  items={[
-    { id: "img-1", content: <img src="https://images.unsplash.com/photo-1707343843437-caacff5cfa74?q=80&w=600&h=400&auto=format&fit=crop" alt="Slide 1" className="rounded-xl object-cover" /> },
-    { id: "img-2", content: <img src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?q=80&w=600&h=400&auto=format&fit=crop" alt="Slide 2" className="rounded-xl object-cover" /> },
-    { id: "img-3", content: <img src="https://images.unsplash.com/photo-1707343843437-caacff5cfa74?q=80&w=600&h=400&auto=format&fit=crop" alt="Slide 3" className="rounded-xl object-cover" /> },
-  ]}
-/>`}
+    items={[
+      {
+        id: "img-1",
+        content: (
+          <img
+            src="https://images.unsplash.com/photo-1707343843437-caacff5cfa74?q=80&w=600&h=400&auto=format&fit=crop"
+            alt="Slide 1"
+            className="rounded-xl object-cover"
+          />
+        ),
+      },
+      {
+        id: "img-2",
+        content: (
+          <img
+            src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?q=80&w=600&h=400&auto=format&fit=crop"
+            alt="Slide 2"
+            className="rounded-xl object-cover"
+          />
+        ),
+      },
+      {
+        id: "img-3",
+        content: (
+          <img
+            src="https://images.unsplash.com/photo-1707343843437-caacff5cfa74?q=80&w=600&h=400&auto=format&fit=crop"
+            alt="Slide 3"
+            className="rounded-xl object-cover"
+          />
+        ),
+      },
+    ]}
+  />`}
         >
           <div className="w-full max-w-sm px-12">
             <CarouselPreset
@@ -227,14 +288,47 @@ function CarouselMacroShowcase() {
           label="Vòng lặp vô hạn (Loop Enabled)"
           description="Chỉ hiển thị dấu chấm (ẩn mũi tên)."
           codeString={`<CarouselPreset
-  opts={{ loop: true }}
-  showArrows={false}
-  items={[
-    { id: "loop-1", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-gradient-to-tr from-violet-500 to-purple-500 rounded-lg text-white"><span className="text-4xl font-semibold">1</span></div></div> },
-    { id: "loop-2", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-gradient-to-tr from-pink-500 to-rose-500 rounded-lg text-white"><span className="text-4xl font-semibold">2</span></div></div> },
-    { id: "loop-3", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-gradient-to-tr from-blue-500 to-cyan-500 rounded-lg text-white"><span className="text-4xl font-semibold">3</span></div></div> },
-  ]}
-/>`}
+    opts={{ loop: true }}
+    showArrows={false}
+    items={[
+      {
+        id: "loop-1",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-gradient-to-tr from-violet-500 to-purple-500 rounded-lg text-white">
+              <span className="text-4xl font-semibold">
+                1
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "loop-2",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-gradient-to-tr from-pink-500 to-rose-500 rounded-lg text-white">
+              <span className="text-4xl font-semibold">
+                2
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "loop-3",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-gradient-to-tr from-blue-500 to-cyan-500 rounded-lg text-white">
+              <span className="text-4xl font-semibold">
+                3
+              </span>
+            </div>
+          </div>
+        ),
+      },
+    ]}
+  />`}
         >
           <div className="w-full max-w-sm">
             <CarouselPreset
@@ -280,13 +374,46 @@ function CarouselMacroShowcase() {
           label="Chỉ mũi tên (Arrows Only)"
           description="Mũi tên điều hướng không có dấu chấm."
           codeString={`<CarouselPreset
-  showDots={false}
-  items={[
-    { id: "arr-1", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg"><span className="text-4xl font-semibold">A</span></div></div> },
-    { id: "arr-2", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg"><span className="text-4xl font-semibold">B</span></div></div> },
-    { id: "arr-3", content: <div className="p-1 border border-border rounded-xl"><div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg"><span className="text-4xl font-semibold">C</span></div></div> },
-  ]}
-/>`}
+    showDots={false}
+    items={[
+      {
+        id: "arr-1",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg">
+              <span className="text-4xl font-semibold">
+                A
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "arr-2",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg">
+              <span className="text-4xl font-semibold">
+                B
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "arr-3",
+        content: (
+          <div className="p-1 border border-border rounded-xl">
+            <div className="flex aspect-square items-center justify-center p-6 bg-muted/20 rounded-lg">
+              <span className="text-4xl font-semibold">
+                C
+              </span>
+            </div>
+          </div>
+        ),
+      },
+    ]}
+  />`}
         >
           <div className="w-full max-w-sm px-12">
             <CarouselPreset
@@ -349,16 +476,37 @@ return (
           label="Theo chiều dọc (Vertical Orientation)"
           description="Băng chuyền macro cuộn theo chiều dọc."
           codeString={`<CarouselPreset
-  className="w-full"
-  orientation="vertical"
-  contentClassName="h-[300px]"
-  itemClassName="basis-[250px]"
-  items={[
-    { id: "v1", content: <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">A</div> },
-    { id: "v2", content: <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">B</div> },
-    { id: "v3", content: <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">C</div> },
-  ]}
-/>`}
+    className="w-full"
+    orientation="vertical"
+    contentClassName="h-[300px]"
+    itemClassName="basis-[250px]"
+    items={[
+      {
+        id: "v1",
+        content: (
+          <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
+            A
+          </div>
+        ),
+      },
+      {
+        id: "v2",
+        content: (
+          <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
+            B
+          </div>
+        ),
+      },
+      {
+        id: "v3",
+        content: (
+          <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
+            C
+          </div>
+        ),
+      },
+    ]}
+  />`}
         >
           <div className="w-full max-w-sm px-12 py-12 flex justify-center">
             <CarouselPreset
@@ -409,18 +557,21 @@ function CarouselMicroShowcase() {
       <ExampleSection
         label="Hero Banner (Overlay Navigation)"
         description="Mũi tên kính mờ nằm đè trên Banner, chỉ hiện khi hover. Dấu chấm nằm sát mép dưới."
-        codeString={`<Carousel opts={{ loop: true }} className="group relative w-full overflow-hidden rounded-2xl shadow-xl">
-  <CarouselContent className="-ml-4">
-    <CarouselItem className="pl-4">...</CarouselItem>
-  </CarouselContent>
-  <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-between p-4 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-    <CarouselPrevious className="pointer-events-auto bg-background/50 backdrop-blur-md" />
-    <CarouselNext className="pointer-events-auto bg-background/50 backdrop-blur-md" />
-  </div>
-  <div className="absolute bottom-4 left-0 right-0 z-10">
-    <CarouselDots className="[&>[data-slot=carousel-dot][data-active]]:bg-white [&>[data-slot=carousel-dot]]:bg-white/40" />
-  </div>
-</Carousel>`}
+        codeString={`<Carousel
+    opts={{ loop: true }}
+    className="group relative w-full overflow-hidden rounded-2xl shadow-xl"
+  >
+    <CarouselContent className="-ml-4">
+      <CarouselItem className="pl-4">...</CarouselItem>
+    </CarouselContent>
+    <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-between p-4 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+      <CarouselPrevious className="pointer-events-auto bg-background/50 backdrop-blur-md" />
+      <CarouselNext className="pointer-events-auto bg-background/50 backdrop-blur-md" />
+    </div>
+    <div className="absolute bottom-4 left-0 right-0 z-10">
+      <CarouselDots className="[&>[data-slot=carousel-dot][data-active]]:bg-white [&>[data-slot=carousel-dot]]:bg-white/40" />
+    </div>
+  </Carousel>`}
       >
         <div className="mx-auto w-full max-w-4xl">
           <Carousel
@@ -463,35 +614,46 @@ function CarouselMicroShowcase() {
         label="Nhiều phần tử trên 1 slide (Product Gallery)"
         description="Hiển thị nhiều Card (vd: basis-1/2, lg:basis-1/3) trên cùng một Slide của Băng chuyền."
         codeString={`<div className="mx-auto w-full max-w-5xl px-12">
-  <Carousel opts={{ align: "start" }} className="w-full relative">
-    <CarouselContent className="-ml-4">
-      {Array.from({ length: 10 }).map((_, index) => (
-        <CarouselItem key={index} className="pl-4 md:basis-1/2 lg:basis-1/3">
-          <div className="p-1">
-            <Card className="overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
-              <div className="aspect-4/3 bg-muted flex items-center justify-center relative group">
-                <span className="text-4xl font-black text-muted-foreground/30 transition-transform duration-500 group-hover:scale-110">
-                  0{index + 1}
-                </span>
-                <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 flex items-end p-4">
-                  <span className="text-white font-medium">View Item {index + 1}</span>
+    <Carousel
+      opts={{ align: "start" }}
+      className="w-full relative"
+    >
+      <CarouselContent className="-ml-4">
+        {Array.from({ length: 10 }).map((_, index) => (
+          <CarouselItem
+            key={index}
+            className="pl-4 md:basis-1/2 lg:basis-1/3"
+          >
+            <div className="p-1">
+              <Card className="overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+                <div className="aspect-4/3 bg-muted flex items-center justify-center relative group">
+                  <span className="text-4xl font-black text-muted-foreground/30 transition-transform duration-500 group-hover:scale-110">
+                    0{index + 1}
+                  </span>
+                  <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 flex items-end p-4">
+                    <span className="text-white font-medium">
+                      View Item {index + 1}
+                    </span>
+                  </div>
                 </div>
-              </div>
-              <CardContent className="p-4">
-                <div className="text-sm font-medium text-muted-foreground mb-1">Category</div>
-                <h4 className="font-semibold text-lg leading-none">Featured Item {index + 1}</h4>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
+                <CardContent className="p-4">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">
+                    Category
+                  </div>
+                  <h4 className="font-semibold text-lg leading-none">
+                    Featured Item {index + 1}
+                  </h4>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
 
-    <CarouselPrevious className="absolute -left-12 top-1/2 -translate-y-1/2 border-border shadow-sm hover:bg-accent" />
-    <CarouselNext className="absolute -right-12 top-1/2 -translate-y-1/2 border-border shadow-sm hover:bg-accent" />
-  </Carousel>
-</div>
-`}
+      <CarouselPrevious className="absolute -left-12 top-1/2 -translate-y-1/2 border-border shadow-sm hover:bg-accent" />
+      <CarouselNext className="absolute -right-12 top-1/2 -translate-y-1/2 border-border shadow-sm hover:bg-accent" />
+    </Carousel>
+  </div>`}
       >
         <div className="mx-auto w-full max-w-5xl px-12">
           <Carousel opts={{ align: "start" }} className="w-full relative">

package/src/dev/showcase/chart.tsx

@@ -23,10 +23,11 @@ export default function ChartShowcase() {
       generalConcept={
         <ShowcaseDocs>
           <DocsP>
-            Component wrapper cho thư viện <DocsCode>Recharts</DocsCode>. Cung cấp{" "}
-            <DocsCode>ChartContainer</DocsCode> để cấu hình theme màu sắc,{" "}
-            <DocsCode>ChartTooltip</DocsCode> và <DocsCode>ChartLegend</DocsCode>{" "}
-            để hiển thị thông tin bổ sung khi hover.
+            Component wrapper cho thư viện <DocsCode>Recharts</DocsCode>. Cung
+            cấp <DocsCode>ChartContainer</DocsCode> để cấu hình theme màu sắc,{" "}
+            <DocsCode>ChartTooltip</DocsCode> và{" "}
+            <DocsCode>ChartLegend</DocsCode> để hiển thị thông tin bổ sung khi
+            hover.
           </DocsP>
         </ShowcaseDocs>
       }