gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/input-otp.tsx

@@ -1,16 +1,4 @@
-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 { ShieldIcon, WrenchIcon } from "lucide-react";
-import { useState } from "react";
 
 import { InputOTPPreset } from "../../components/macro/input-otp-preset";
 import {
@@ -25,6 +13,17 @@ import {
   InputOTPSeparator,
   InputOTPSlot,
 } from "../../components/micro/input-otp";
+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
@@ -37,11 +36,11 @@ function InputOTPMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Tiêu chuẩn (2 nhóm)"
           description="Chia mã 6 số thành 2 nhóm (mỗi nhóm 3 số) cách nhau bởi dấu gạch ngang."
           codeString={`<InputOTPPreset
-  groups={[3, 3]}
-  size="md"
-  label="Mã xác thực"
-  description="Vui lòng nhập mã 6 số được gửi tới điện thoại của bạn."
-/>`}
+    groups={[3, 3]}
+    size="md"
+    label="Mã xác thực"
+    description="Vui lòng nhập mã 6 số được gửi tới điện thoại của bạn."
+  />`}
         >
           <InputOTPPreset
             className="w-full"
@@ -56,11 +55,11 @@ function InputOTPMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi (Error)"
           description="Hiển thị viền đỏ và thông báo lỗi khi nhập sai mã."
           codeString={`<InputOTPPreset
-  groups={[3, 3]}
-  size="md"
-  label="Mã bảo mật"
-  errorMessage="Mã xác nhận không chính xác. Vui lòng thử lại."
-/>`}
+    groups={[3, 3]}
+    size="md"
+    label="Mã bảo mật"
+    errorMessage="Mã xác nhận không chính xác. Vui lòng thử lại."
+  />`}
         >
           <InputOTPPreset
             className="w-full"
@@ -77,12 +76,12 @@ function InputOTPMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Khóa / Bất hoạt (Disabled)"
           description="Người dùng không thể nhập mã khi ở trạng thái này."
           codeString={`<InputOTPPreset
-  groups={[4]}
-  size="md"
-  label="Mã khôi phục"
-  description="Tài khoản của bạn đang bị khóa tạm thời."
-  disabled
-/>`}
+    groups={[4]}
+    size="md"
+    label="Mã khôi phục"
+    description="Tài khoản của bạn đang bị khóa tạm thời."
+    disabled
+  />`}
         >
           <InputOTPPreset
             className="w-full"
@@ -98,11 +97,13 @@ function InputOTPMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Tuỳ biến Nhóm & Dấu phân cách"
           description="Dùng mảng groups tuỳ ý và đổi icon phân cách."
           codeString={`<InputOTPPreset
-  groups={[2, 2, 2]}
-  separator={<span className="text-muted-foreground/50">/</span>}
-  size="md"
-  label="Ngày sinh (DD/MM/YY)"
-/>`}
+    groups={[2, 2, 2]}
+    separator={
+      <span className="text-muted-foreground/50">/</span>
+    }
+    size="md"
+    label="Ngày sinh (DD/MM/YY)"
+  />`}
         >
           <div className="w-full flex flex-col gap-6">
             <InputOTPPreset
@@ -134,17 +135,17 @@ function InputOTPMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Cơ bản (Primitive)"
           description="Mã 6 chữ số liền mạch không có dấu phân cách."
           codeString={`<Field size="md">
-  <FieldLabel htmlFor="otp-basic">Mã PIN</FieldLabel>
-  <FieldContent>
-    <InputOTP id="otp-basic" size="md" maxLength={6}>
-      <InputOTPGroup>
-        {Array.from({ length: 6 }).map((_, i) => (
-          <InputOTPSlot key={i} index={i} />
-        ))}
-      </InputOTPGroup>
-    </InputOTP>
-  </FieldContent>
-</Field>`}
+    <FieldLabel htmlFor="otp-basic">Mã PIN</FieldLabel>
+    <FieldContent>
+      <InputOTP id="otp-basic" size="md" maxLength={6}>
+        <InputOTPGroup>
+          {Array.from({ length: 6 }).map((_, i) => (
+            <InputOTPSlot key={i} index={i} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+    </FieldContent>
+  </Field>`}
         >
           <Field className="w-full" size={globalSize}>
             <FieldLabel htmlFor="tf-otp-0">Mã PIN</FieldLabel>
@@ -167,23 +168,23 @@ function InputOTPMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Phân tách thủ công"
           description="Tự chèn InputOTPSeparator vào giữa các nhóm."
           codeString={`<Field size="md">
-  <FieldLabel htmlFor="otp-sep">Mã bảo mật</FieldLabel>
-  <FieldContent>
-    <InputOTP id="otp-sep" size="md" maxLength={6}>
-      <InputOTPGroup>
-        {Array.from({ length: 3 }).map((_, i) => (
-          <InputOTPSlot key={i} index={i} />
-        ))}
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        {Array.from({ length: 3 }).map((_, i) => (
-          <InputOTPSlot key={i + 3} index={i + 3} />
-        ))}
-      </InputOTPGroup>
-    </InputOTP>
-  </FieldContent>
-</Field>`}
+    <FieldLabel htmlFor="otp-sep">Mã bảo mật</FieldLabel>
+    <FieldContent>
+      <InputOTP id="otp-sep" size="md" maxLength={6}>
+        <InputOTPGroup>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <InputOTPSlot key={i} index={i} />
+          ))}
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <InputOTPSlot key={i + 3} index={i + 3} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+    </FieldContent>
+  </Field>`}
         >
           <Field className="w-full" size={globalSize}>
             <FieldLabel htmlFor="tf-otp-1">Mã bảo mật</FieldLabel>
@@ -217,18 +218,18 @@ function InputOTPMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi thủ công"
           description="Gắn data-invalid vào Field để thay đổi màu sắc."
           codeString={`<Field size="md" data-invalid={true}>
-  <FieldLabel htmlFor="otp-err">Mã xác minh</FieldLabel>
-  <FieldContent>
-    <InputOTP id="otp-err" size="md" maxLength={4}>
-      <InputOTPGroup>
-        {Array.from({ length: 4 }).map((_, i) => (
-          <InputOTPSlot key={i} index={i} />
-        ))}
-      </InputOTPGroup>
-    </InputOTP>
-  </FieldContent>
-  <FieldError>Mã không hợp lệ.</FieldError>
-</Field>`}
+    <FieldLabel htmlFor="otp-err">Mã xác minh</FieldLabel>
+    <FieldContent>
+      <InputOTP id="otp-err" size="md" maxLength={4}>
+        <InputOTPGroup>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <InputOTPSlot key={i} index={i} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+    </FieldContent>
+    <FieldError>Mã không hợp lệ.</FieldError>
+  </Field>`}
         >
           <Field className="w-full" size={globalSize} data-invalid={true}>
             <FieldLabel htmlFor="tf-otp-err">Mã xác minh</FieldLabel>
@@ -252,17 +253,22 @@ function InputOTPMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Disabled thủ công"
           description="Truyền thuộc tính disabled."
           codeString={`<Field size="md">
-  <FieldLabel htmlFor="otp-disabled">Mã OTP</FieldLabel>
-  <FieldContent>
-    <InputOTP id="otp-disabled" size="md" maxLength={4} disabled>
-      <InputOTPGroup>
-        {Array.from({ length: 4 }).map((_, i) => (
-          <InputOTPSlot key={i} index={i} />
-        ))}
-      </InputOTPGroup>
-    </InputOTP>
-  </FieldContent>
-</Field>`}
+    <FieldLabel htmlFor="otp-disabled">Mã OTP</FieldLabel>
+    <FieldContent>
+      <InputOTP
+        id="otp-disabled"
+        size="md"
+        maxLength={4}
+        disabled
+      >
+        <InputOTPGroup>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <InputOTPSlot key={i} index={i} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+    </FieldContent>
+  </Field>`}
         >
           <Field className="w-full" size={globalSize}>
             <FieldLabel htmlFor="tf-otp-d">Mã OTP</FieldLabel>
@@ -287,22 +293,26 @@ function InputOTPMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="So sánh nhanh khi nào dùng Micro và Macro."
         fullWidth
         codeString={`{/* Macro — đơn giản, 1 dòng khai báo */}
-<InputOTPPreset groups={[3, 3]} size="md" label="Mã xác thực" />
+  <InputOTPPreset
+    groups={[3, 3]}
+    size="md"
+    label="Mã xác thực"
+  />
 
-{/* Micro — khi cần custom từng slot */}
-<InputOTP size="md" maxLength={6}>
-  <InputOTPGroup>
-    {Array.from({ length: 3 }).map((_, i) => (
-      <InputOTPSlot key={i} index={i} />
-    ))}
-  </InputOTPGroup>
-  <InputOTPSeparator />
-  <InputOTPGroup>
-    {Array.from({ length: 3 }).map((_, i) => (
-      <InputOTPSlot key={i + 3} index={i + 3} />
-    ))}
-  </InputOTPGroup>
-</InputOTP>`}
+  {/* Micro — khi cần custom từng slot */}
+  <InputOTP size="md" maxLength={6}>
+    <InputOTPGroup>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <InputOTPSlot key={i} index={i} />
+      ))}
+    </InputOTPGroup>
+    <InputOTPSeparator />
+    <InputOTPGroup>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <InputOTPSlot key={i + 3} index={i + 3} />
+      ))}
+    </InputOTPGroup>
+  </InputOTP>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}

package/src/dev/showcase/input.tsx

@@ -1,18 +1,6 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsCode,
-  DocsH3,
-  DocsLi,
-  DocsP,
-  DocsUl,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import { LinkIcon, SearchIcon } from "lucide-react";
-import { useState } from "react";
 
+import { InputPreset } from "../../components/macro/input-preset";
 import {
   Field,
   FieldContent,
@@ -27,10 +15,20 @@ import {
   InputGroupInput,
   InputGroupText,
 } from "../../components/micro/input-group";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsH3,
+  DocsLi,
+  DocsP,
+  DocsUl,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-import { InputPreset } from "../../components/macro/input-preset";
-
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content
 // ──────────────────────────────────────────────────────────
@@ -359,38 +357,76 @@ function InputMicroShowcase({ 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">Form nhập liệu tiêu chuẩn</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">
+            Form nhập liệu tiêu chuẩn
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Khi bạn cần một trường nhập liệu đầy đủ nhãn
+        (Label), mô tả (Description), báo lỗi (Error) mà
+        không muốn phải lắp ráp thủ công bằng{" "}
+        <DocsCode>Field</DocsCode>.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Khi bạn cần một trường nhập liệu đầy đủ nhãn (Label), mô tả (Description), báo lỗi (Error) mà không muốn phải lắp ráp thủ công bằng <DocsCode>Field</DocsCode>.
-    </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">Input nằm trong Navbar hoặc Toolbar</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">
+            Input nằm trong Navbar hoặc Toolbar
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Chỉ cần một thẻ <DocsCode>Input</DocsCode> đơn giản
+        để tìm kiếm nhanh, không cần nhãn hay mô tả cầu kỳ,
+        hoặc khi phải nhúng nó vào một component phức tạp
+        khác.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Chỉ cần một thẻ <DocsCode>Input</DocsCode> đơn giản để tìm kiếm nhanh, không cần nhãn hay mô tả cầu kỳ, hoặc khi phải nhúng nó vào một component phức tạp khác.
-    </p>
-  </div>
-</div>`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">