gladvn 0.2.17 → 0.2.19

package/src/dev/showcase/checkbox.tsx

@@ -1,19 +1,10 @@
-import { useDevContext } from "../../dev/components/dev-context";
+import { useState } from "react";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CheckIcon, MinusIcon } from "lucide-react";
-import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import {
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
-import { type Size } from "../../lib/types";
-
 import { CheckboxPreset } from "../../components/macro/checkbox-preset";
 import { Button } from "../../components/micro/button";
 import { Checkbox, CheckboxIndicator } from "../../components/micro/checkbox";
@@ -24,6 +15,15 @@ import {
   FieldLabel,
 } from "../../components/micro/field";
 import { Label } from "../../components/micro/label";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
 // RHF Form Demo (Macro)
@@ -111,11 +111,10 @@ function CheckboxMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Tiêu chuẩn"
           description="Checkbox cơ bản kèm nhãn và mô tả."
           codeString={`<CheckboxPreset
-  label="Đồng ý với điều khoản"
-  description="Bạn phải đồng ý với các điều khoản và điều kiện sử dụng."
-  className="w-full"
-/>
-`}
+    label="Đồng ý với điều khoản"
+    description="Bạn phải đồng ý với các điều khoản và điều kiện sử dụng."
+    className="w-full"
+  />`}
         >
           <CheckboxPreset
             size={globalSize}
@@ -129,12 +128,11 @@ function CheckboxMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi (Error)"
           description="Báo lỗi khi chưa check vào ô (thường dùng trong form)."
           codeString={`<div className="w-full flex flex-col gap-6">
-  <CheckboxPreset
-    label="Xác nhận đủ 18 tuổi"
-    errorMessage="Bạn phải xác nhận đủ tuổi để tiếp tục."
-  />
-</div>
-`}
+    <CheckboxPreset
+      label="Xác nhận đủ 18 tuổi"
+      errorMessage="Bạn phải xác nhận đủ tuổi để tiếp tục."
+    />
+  </div>`}
         >
           <div className="w-full flex flex-col gap-6">
             <CheckboxPreset
@@ -151,19 +149,18 @@ function CheckboxMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Khóa (Disabled)"
           description="Checkbox bị vô hiệu hóa, không thể click."
           codeString={`<div className="w-full flex flex-col gap-6">
-  <CheckboxPreset
-    label="Đăng ký nhận bản tin"
-    description="Tính năng này đang được bảo trì."
-    disabled
-  />
-  <CheckboxPreset
-    label="Cho phép thu thập log"
-    description="Hệ thống mặc định thu thập log bảo mật."
-    defaultChecked
-    disabled
-  />
-</div>
-`}
+    <CheckboxPreset
+      label="Đăng ký nhận bản tin"
+      description="Tính năng này đang được bảo trì."
+      disabled
+    />
+    <CheckboxPreset
+      label="Cho phép thu thập log"
+      description="Hệ thống mặc định thu thập log bảo mật."
+      defaultChecked
+      disabled
+    />
+  </div>`}
         >
           <div className="w-full flex flex-col gap-6">
             <CheckboxPreset
@@ -186,18 +183,17 @@ function CheckboxMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="React Node Label (Custom Content)"
           description="Label có thể chứa các component React phức tạp như Badge."
           codeString={`<CheckboxPreset
-  label={
-    <span className="flex items-center gap-2">
-      Tham gia chương trình BETA{" "}
-      <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
-        NEW
+    label={
+      <span className="flex items-center gap-2">
+        Tham gia chương trình BETA{" "}
+        <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+          NEW
+        </span>
       </span>
-    </span>
-  }
-  description="Được trải nghiệm sớm các tính năng mới trước khi phát hành chính thức. Có thể xảy ra lỗi."
-  className="w-full"
-/>
-`}
+    }
+    description="Được trải nghiệm sớm các tính năng mới trước khi phát hành chính thức. Có thể xảy ra lỗi."
+    className="w-full"
+  />`}
         >
           <CheckboxPreset
             size={globalSize}
@@ -219,16 +215,14 @@ function CheckboxMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="React State (Controlled Mode)"
           description="Sử dụng biến state của React để điều khiển."
-          codeString={`const [checked, setChecked] = useState(false);
-
-return (
+          codeString={`const [checked, setChecked] = useState(false); return (
   <CheckboxPreset
     checked={checked}
     onCheckedChange={(c) => setChecked(!!c)}
     label="Checkbox có kiểm soát"
     description="React quản lý trạng thái của checkbox này."
   />
-);`}
+  );`}
         >
           <div className="w-full flex flex-col gap-4">
             <CheckboxPreset
@@ -272,15 +266,18 @@ function CheckboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Cơ bản (Primitive)"
           description="Kết nối thủ công Checkbox với thẻ Label html."
           codeString={`<div className="flex items-center gap-3">
-  <Checkbox id="cb-micro-default">
-    <CheckboxIndicator>
-      <CheckIcon />
-    </CheckboxIndicator>
-  </Checkbox>
-  <Label htmlFor="cb-micro-default" className="font-normal cursor-pointer">
-    Đồng ý với điều khoản
-  </Label>
-</div>`}
+    <Checkbox id="cb-micro-default">
+      <CheckboxIndicator>
+        <CheckIcon />
+      </CheckboxIndicator>
+    </Checkbox>
+    <Label
+      htmlFor="cb-micro-default"
+      className="font-normal cursor-pointer"
+    >
+      Đồng ý với điều khoản
+    </Label>
+  </div>`}
         >
           <div className="flex items-center gap-3">
             <Checkbox id="cb-micro-default" size={globalSize}>
@@ -301,15 +298,18 @@ function CheckboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Icon Tuỳ Biến (Custom Icon)"
           description="Vì dùng Composition, bạn có thể truyền bất kỳ icon nào (VD: MinusIcon) vào Indicator."
           codeString={`<div className="flex items-center gap-3">
-  <Checkbox id="cb-custom-icon">
-    <CheckboxIndicator>
-      <MinusIcon />
-    </CheckboxIndicator>
-  </Checkbox>
-  <Label htmlFor="cb-custom-icon" className="font-normal cursor-pointer">
-    Trạng thái vô định (Indeterminate)
-  </Label>
-</div>`}
+    <Checkbox id="cb-custom-icon">
+      <CheckboxIndicator>
+        <MinusIcon />
+      </CheckboxIndicator>
+    </Checkbox>
+    <Label
+      htmlFor="cb-custom-icon"
+      className="font-normal cursor-pointer"
+    >
+      Trạng thái vô định (Indeterminate)
+    </Label>
+  </div>`}
         >
           <div className="flex items-center gap-3">
             <Checkbox id="cb-custom-icon" size={globalSize}>
@@ -332,23 +332,27 @@ function CheckboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Ghép nối với Field"
           description="Lắp ráp thủ công các thành phần Field khi cần layout phức tạp."
           codeString={`<Field className="flex items-start gap-3">
-  {/* 1 khoảng trắng vô hình để căn chỉnh cho Label và Checkbox thẳng hàng với nhau theo dòng chữ đầu tiên */}
-  <div className="flex items-center text-sm leading-snug group-data-[size=sm]/field:text-xs">
-    &#8203;
-    <Checkbox id="cb-field-micro">
-      <CheckboxIndicator><CheckIcon /></CheckboxIndicator>
-    </Checkbox>
-  </div>
-  <div className="grid gap-1.5 leading-none">
-    <FieldLabel htmlFor="cb-field-micro" className="font-medium cursor-pointer">
-      Lưu mật khẩu
-    </FieldLabel>
-    <FieldDescription>
-      Tự động đăng nhập vào lần sau.
-    </FieldDescription>
-  </div>
-</Field>
-`}
+    {/* 1 khoảng trắng vô hình để căn chỉnh cho Label và Checkbox thẳng hàng với nhau theo dòng chữ đầu tiên */}
+    <div className="flex items-center text-sm leading-snug group-data-[size=sm]/field:text-xs">
+      &#8203;
+      <Checkbox id="cb-field-micro">
+        <CheckboxIndicator>
+          <CheckIcon />
+        </CheckboxIndicator>
+      </Checkbox>
+    </div>
+    <div className="grid gap-1.5 leading-none">
+      <FieldLabel
+        htmlFor="cb-field-micro"
+        className="font-medium cursor-pointer"
+      >
+        Lưu mật khẩu
+      </FieldLabel>
+      <FieldDescription>
+        Tự động đăng nhập vào lần sau.
+      </FieldDescription>
+    </div>
+  </Field>`}
         >
           <Field className="flex items-start gap-3" data-size={globalSize}>
             {/* 1 khoảng trắng vô hình để căn chỉnh cho Label và Checkbox thẳng hàng với nhau theo dòng chữ đầu tiên */}
@@ -377,19 +381,28 @@ function CheckboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Trạng thái Lỗi thủ công"
           description="Tự gắn aria-invalid vào Checkbox và dùng FieldError."
-          codeString={`<Field className="flex flex-row items-start gap-3" data-invalid={true}>
-  <div className="flex items-center text-sm leading-snug group-data-[size=sm]/field:text-xs">
-    &#8203;
-    <Checkbox id="cb-err-micro" aria-invalid={true}>
-      <CheckboxIndicator><CheckIcon /></CheckboxIndicator>
-    </Checkbox>
-  </div>
-  <div className="grid gap-1.5 leading-none">
-    <FieldLabel htmlFor="cb-err-micro" className="font-medium cursor-pointer">Đồng ý quy định</FieldLabel>
-    <FieldError>Bắt buộc phải chọn ô này.</FieldError>
-  </div>
-</Field>
-`}
+          codeString={`<Field
+    className="flex flex-row items-start gap-3"
+    data-invalid={true}
+  >
+    <div className="flex items-center text-sm leading-snug group-data-[size=sm]/field:text-xs">
+      &#8203;
+      <Checkbox id="cb-err-micro" aria-invalid={true}>
+        <CheckboxIndicator>
+          <CheckIcon />
+        </CheckboxIndicator>
+      </Checkbox>
+    </div>
+    <div className="grid gap-1.5 leading-none">
+      <FieldLabel
+        htmlFor="cb-err-micro"
+        className="font-medium cursor-pointer"
+      >
+        Đồng ý quy định
+      </FieldLabel>
+      <FieldError>Bắt buộc phải chọn ô này.</FieldError>
+    </div>
+  </Field>`}
         >
           <Field
             className="flex flex-row items-start gap-3"
@@ -422,55 +435,108 @@ function CheckboxMicroShowcase({ 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">Checkbox trong trang Cài đặt</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">
+            Checkbox trong trang Cài đặt
+          </h3>
+        </div>
       </div>
-    </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Form cài đặt có rất nhiều tuỳ chọn dạng "Bật / Tắt" với mô tả dài. Code sẽ rất sạch và ngắn.
-    </p>
-    <div className="rounded-lg bg-muted/50 p-3 flex flex-col gap-4">
-      <CheckboxPreset size="sm" label="Nhận Email Marketing" description="Gửi email cho bạn về các chương trình khuyến mãi hàng tuần." />
-      <CheckboxPreset size="sm" label="Thông báo bảo mật" description="Cảnh báo khi có thiết bị lạ đăng nhập." defaultChecked />
-    </div>
-  </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">Table Row Selection</h3>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Form cài đặt có rất nhiều tuỳ chọn dạng "Bật / Tắt"
+        với mô tả dài. Code sẽ rất sạch và ngắn.
+      </p>
+      <div className="rounded-lg bg-muted/50 p-3 flex flex-col gap-4">
+        <CheckboxPreset
+          size="sm"
+          label="Nhận Email Marketing"
+          description="Gửi email cho bạn về các chương trình khuyến mãi hàng tuần."
+        />
+        <CheckboxPreset
+          size="sm"
+          label="Thông báo bảo mật"
+          description="Cảnh báo khi có thiết bị lạ đăng nhập."
+          defaultChecked
+        />
       </div>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn cần ô Checkbox ở đầu mỗi dòng trong bảng để chọn nhiều hàng. Ở đây Checkbox đứng độc lập, hoàn toàn không cần Label hay Description đi kèm.
-    </p>
-    <div className="rounded-lg bg-muted/50 p-3">
-      <div className="border border-border rounded-md divide-y overflow-hidden">
-        <div className="flex items-center gap-3 p-2 bg-muted">
-          <Checkbox size="sm"><CheckboxIndicator><MinusIcon /></CheckboxIndicator></Checkbox>
-          <span className="text-xs font-semibold">Tên nhân viên</span>
+
+    {/* 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">
+            Table Row Selection
+          </h3>
         </div>
-        <div className="flex items-center gap-3 p-2 bg-background hover:bg-muted/50">
-          <Checkbox size="sm" defaultChecked><CheckboxIndicator><CheckIcon /></CheckboxIndicator></Checkbox>
-          <span className="text-xs">John Doe</span>
+      </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn cần ô Checkbox ở đầu mỗi dòng trong bảng để chọn
+        nhiều hàng. Ở đây Checkbox đứng độc lập, hoàn toàn
+        không cần Label hay Description đi kèm.
+      </p>
+      <div className="rounded-lg bg-muted/50 p-3">
+        <div className="border border-border rounded-md divide-y overflow-hidden">
+          <div className="flex items-center gap-3 p-2 bg-muted">
+            <Checkbox size="sm">
+              <CheckboxIndicator>
+                <MinusIcon />
+              </CheckboxIndicator>
+            </Checkbox>
+            <span className="text-xs font-semibold">
+              Tên nhân viên
+            </span>
+          </div>
+          <div className="flex items-center gap-3 p-2 bg-background hover:bg-muted/50">
+            <Checkbox size="sm" defaultChecked>
+              <CheckboxIndicator>
+                <CheckIcon />
+              </CheckboxIndicator>
+            </Checkbox>
+            <span className="text-xs">John Doe</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}