gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/slider.tsx

@@ -1,14 +1,3 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsCode,
-  DocsH3,
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
-import { type Size } from "../../lib/types";
 import { useState } from "react";
 
 import { SliderPreset } from "../../components/macro/slider-preset";
@@ -26,6 +15,17 @@ import {
   SliderThumb,
   SliderTrack,
 } from "../../components/micro/slider";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsH3,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content
@@ -40,14 +40,14 @@ function SliderMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Tiêu chuẩn"
           description="Thanh trượt cơ bản có nhãn và mô tả."
-          codeString={`<SliderPreset className="w-full"
+          codeString={`<SliderPreset
+    className="w-full"
     label="Âm lượng"
     description="Điều chỉnh âm lượng hệ thống."
     defaultValue={[50]}
     max={100}
     step={1}
-  />
-`}
+  />`}
         >
           <SliderPreset
             className="w-full"
@@ -64,15 +64,14 @@ function SliderMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi (Error)"
           description="Báo lỗi khi giá trị không hợp lệ."
           codeString={`<div className="w-full flex flex-col gap-6">
-  <SliderPreset
-    label="Mức âm lượng (Lỗi)"
-    defaultValue={[110]}
-    max={100}
-    step={1}
-    errorMessage="Mức âm lượng không được vượt quá 100."
-  />
-</div>
-`}
+    <SliderPreset
+      label="Mức âm lượng (Lỗi)"
+      defaultValue={[110]}
+      max={100}
+      step={1}
+      errorMessage="Mức âm lượng không được vượt quá 100."
+    />
+  </div>`}
         >
           <div className="w-full flex flex-col gap-6">
             <SliderPreset
@@ -91,9 +90,8 @@ function SliderMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Thanh trượt Khoảng (Range Slider)"
           description="Truyền mảng 2 giá trị vào defaultValue hoặc value để tạo Range Slider."
-          codeString={`const [rangeVal, setRangeVal] = useState([20, 80]);
-
-return (
+          codeString={`const [rangeVal, setRangeVal] = useState([20, 80]); return
+  (
   <SliderPreset
     label="Khoảng giá"
     value={rangeVal}
@@ -102,7 +100,7 @@ return (
     step={5}
     description={\`Từ $\${rangeVal[0]} đến $\${rangeVal[1]}\`}
   />
-);`}
+  );`}
         >
           <SliderPreset
             className="w-full"
@@ -119,14 +117,14 @@ return (
         <ExampleSection
           label="Khóa / Bất hoạt (Disabled)"
           description="Người dùng không thể tương tác với thanh trượt."
-          codeString={`<SliderPreset className="w-full"
+          codeString={`<SliderPreset
+    className="w-full"
     label="Độ sáng màn hình"
     description="Độ sáng đang được hệ thống điều khiển tự động (Auto-brightness)."
     defaultValue={[75]}
     max={100}
     disabled
-  />
-`}
+  />`}
         >
           <SliderPreset
             className="w-full"
@@ -144,16 +142,14 @@ return (
         <ExampleSection
           label="Controlled Mode"
           description="Sử dụng biến state của React để điều khiển."
-          codeString={`const [val, setVal] = useState([50]);
-
-return (
+          codeString={`const [val, setVal] = useState([50]); return (
   <SliderPreset
     value={val}
     onValueChange={setVal}
     label="Giá trị có kiểm soát"
     description={\`Giá trị hiện tại là: \${val[0]}\`}
   />
-);`}
+  );`}
         >
           <div className="w-full max-w-sm flex flex-col gap-4">
             <SliderPreset
@@ -181,19 +177,18 @@ function SliderMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Cơ bản (Primitive)"
           description="Slider đơn giản không có Field hay Label bọc ngoài."
           codeString={`<CompositionalSlider
-  defaultValue={[40]}
-  max={100}
-  step={1}
-  className="w-full"
->
-  <SliderControl>
-    <SliderTrack>
-      <SliderIndicator />
-    </SliderTrack>
-    <SliderThumb />
-  </SliderControl>
-</CompositionalSlider>
-`}
+    defaultValue={[40]}
+    max={100}
+    step={1}
+    className="w-full"
+  >
+    <SliderControl>
+      <SliderTrack>
+        <SliderIndicator />
+      </SliderTrack>
+      <SliderThumb />
+    </SliderControl>
+  </CompositionalSlider>`}
         >
           <CompositionalSlider
             size={globalSize}
@@ -215,21 +210,20 @@ function SliderMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Nhiều Thumb (Multi-thumb)"
           description="Chỉ cần render nhiều SliderThumb, hệ thống sẽ tự chia."
           codeString={`<CompositionalSlider
-  defaultValue={[20, 50, 80]}
-  max={100}
-  step={1}
-  className="w-full"
->
-  <SliderControl>
-    <SliderTrack>
-      <SliderIndicator />
-    </SliderTrack>
-    <SliderThumb />
-    <SliderThumb />
-    <SliderThumb />
-  </SliderControl>
-</CompositionalSlider>
-`}
+    defaultValue={[20, 50, 80]}
+    max={100}
+    step={1}
+    className="w-full"
+  >
+    <SliderControl>
+      <SliderTrack>
+        <SliderIndicator />
+      </SliderTrack>
+      <SliderThumb />
+      <SliderThumb />
+      <SliderThumb />
+    </SliderControl>
+  </CompositionalSlider>`}
         >
           <CompositionalSlider
             size={globalSize}
@@ -255,26 +249,25 @@ function SliderMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Ghép nối Field thủ công"
           description="Lắp ráp với Field để có nhãn và mô tả."
           codeString={`<Field className="w-full">
-  <FieldLabel>Mật độ hiển thị</FieldLabel>
-  <FieldContent>
-    <CompositionalSlider
-      defaultValue={[50]}
-      max={100}
-      step={1}
-    >
-      <SliderControl>
-        <SliderTrack>
-          <SliderIndicator />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderControl>
-    </CompositionalSlider>
-  </FieldContent>
-  <FieldDescription>
-    Điều chỉnh khoảng cách giữa các phần tử.
-  </FieldDescription>
-</Field>
-`}
+    <FieldLabel>Mật độ hiển thị</FieldLabel>
+    <FieldContent>
+      <CompositionalSlider
+        defaultValue={[50]}
+        max={100}
+        step={1}
+      >
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+          </SliderTrack>
+          <SliderThumb />
+        </SliderControl>
+      </CompositionalSlider>
+    </FieldContent>
+    <FieldDescription>
+      Điều chỉnh khoảng cách giữa các phần tử.
+    </FieldDescription>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel>Mật độ hiển thị</FieldLabel>
@@ -303,25 +296,24 @@ function SliderMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi thủ công"
           description="Tự gắn aria-invalid vào Slider và dùng FieldError."
           codeString={`<Field className="w-full gap-2" data-invalid={true}>
-  <FieldLabel>Ngân sách tối đa</FieldLabel>
-  <FieldContent>
-    <CompositionalSlider
-      defaultValue={[120]}
-      max={100}
-      step={1}
-      aria-invalid={true}
-    >
-      <SliderControl>
-        <SliderTrack>
-          <SliderIndicator />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderControl>
-    </CompositionalSlider>
-  </FieldContent>
-  <FieldError>Ngân sách của bạn chỉ còn \$100.</FieldError>
-</Field>
-`}
+    <FieldLabel>Ngân sách tối đa</FieldLabel>
+    <FieldContent>
+      <CompositionalSlider
+        defaultValue={[120]}
+        max={100}
+        step={1}
+        aria-invalid={true}
+      >
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+          </SliderTrack>
+          <SliderThumb />
+        </SliderControl>
+      </CompositionalSlider>
+    </FieldContent>
+    <FieldError>Ngân sách của bạn chỉ còn $100.</FieldError>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full gap-2" data-invalid={true}>
             <FieldLabel>Ngân sách tối đa</FieldLabel>
@@ -351,39 +343,76 @@ function SliderMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="So sánh nhanh khi nào dùng Micro và Macro."
         fullWidth
         codeString={`<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-  {/* Story 1: Macro wins */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Story 1 · Dùng Macro</p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">Bộ lọc sản phẩm</h3>
+    {/* Story 1: Macro wins */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 1 · Dùng Macro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Bộ lọc sản phẩm
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn cần làm bộ lọc "Khoảng giá" ở cột Sidebar cho
+        trang Ecommerce. <DocsCode>SliderPreset</DocsCode>{" "}
+        sẽ giúp bạn tiết kiệm hàng tá dòng code bọc Field
+        loằng ngoằng.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn cần làm bộ lọc "Khoảng giá" ở cột Sidebar cho trang Ecommerce. <DocsCode>SliderPreset</DocsCode> sẽ giúp bạn tiết kiệm hàng tá dòng code bọc Field loằng ngoằng.
-    </p>
-  </div>
 
-  {/* Story 2: Micro wins */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Story 2 · Dùng Micro</p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">Thanh thời lượng Video (Video Player)</h3>
+    {/* Story 2: Micro wins */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 2 · Dùng Micro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Thanh thời lượng Video (Video Player)
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn đang làm một trình phát Video giống Youtube.
+        Thanh Timeline chạy dưới đáy không hề có Label hay
+        Description. Ở đây bạn BẮT BUỘC dùng Micro để dựng
+        độc lập.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn đang làm một trình phát Video giống Youtube. Thanh Timeline chạy dưới đáy không hề có Label hay Description. Ở đây bạn BẮT BUỘC dùng Micro để dựng độc lập.
-    </p>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}

package/src/dev/showcase/sonner.tsx

@@ -248,11 +248,9 @@ toast.dismiss(toastId);`}
         label="Position"
         description="Toaster nhận prop position để xác định vị trí hiển thị — cấu hình một lần ở root layout. Nhấn vào từng vùng để xem toast xuất hiện ở đâu."
         codeString={`// Trong root layout (app/layout.tsx):
-<Toaster position="bottom-right" /> // mặc định
-
-// Các vị trí hỗ trợ:
-// "top-left" | "top-center" | "top-right"
-// "bottom-left" | "bottom-center" | "bottom-right"`}
+  <Toaster position="bottom-right" /> // mặc định // Các vị
+  trí hỗ trợ: // "top-left" | "top-center" | "top-right" //
+  "bottom-left" | "bottom-center" | "bottom-right"`}
       >
         {/* Visual 3×2 position grid */}
         <div className="w-full max-w-sm">

package/src/dev/showcase/spinner.tsx

@@ -1,8 +1,5 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import { useState } from "react";
-
 import { Spinner } from "../../components/micro/spinner";
-import { type Size } from "../../lib/types";
+import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsH3,
@@ -12,6 +9,7 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content
@@ -24,9 +22,9 @@ function SpinnerMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Default"
         description="Spinner mặc định với kích thước được kiểm soát bởi size toggle ở trên."
         codeString={`<Spinner />
-<Spinner size="sm" />
-<Spinner size="md" />
-<Spinner size="lg" />`}
+  <Spinner size="sm" />
+  <Spinner size="md" />
+  <Spinner size="lg" />`}
       >
         <Spinner size={globalSize} />
       </ExampleSection>
@@ -37,9 +35,9 @@ function SpinnerMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Custom Colors"
           description="Truyền className để override màu sắc — Spinner kế thừa currentColor của SVG."
           codeString={`<Spinner className="text-primary" />
-<Spinner className="text-destructive" />
-<Spinner className="text-warning" />
-<Spinner className="text-success" />`}
+  <Spinner className="text-destructive" />
+  <Spinner className="text-warning" />
+  <Spinner className="text-success" />`}
         >
           <div className="flex items-center gap-4">
             <Spinner size={globalSize} className="text-primary" />
@@ -52,10 +50,16 @@ function SpinnerMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="In Context — Button Loading"
           description="Kết hợp Spinner trong Button để mô phỏng trạng thái loading."
-          codeString={`<button disabled className="flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm opacity-70">
-  <Spinner size="sm" className="text-primary-foreground" />
-  Đang lưu...
-</button>`}
+          codeString={`<button
+    disabled
+    className="flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm opacity-70"
+  >
+    <Spinner
+      size="sm"
+      className="text-primary-foreground"
+    />
+    Đang lưu...
+  </button>`}
         >
           <button
             disabled
@@ -72,10 +76,10 @@ function SpinnerMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Overlay Loading"
         description="Đặt Spinner trên một overlay để chặn tương tác trong khi tải nội dung."
         codeString={`<div className="relative rounded-xl border border-border bg-card h-32">
-  <div className="absolute inset-0 flex items-center justify-center bg-background/60 rounded-xl">
-    <Spinner size="lg" className="text-primary" />
-  </div>
-</div>`}
+    <div className="absolute inset-0 flex items-center justify-center bg-background/60 rounded-xl">
+      <Spinner size="lg" className="text-primary" />
+    </div>
+  </div>`}
       >
         <div className="relative rounded-xl border border-border bg-card h-32 w-full max-w-sm">
           <div className="absolute inset-0 flex items-center justify-center bg-background/60 rounded-xl">