gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/textarea.tsx

@@ -20,68 +20,58 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Macro Content
-// ──────────────────────────────────────────────────────────
 function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
   const [bio, setBio] = useState("");
   const maxLength = 280;
 
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Tiêu chuẩn"
-          description="Trường văn bản nhiều dòng với nhãn và mô tả."
-          codeString={`<TextareaPreset
+        <ShowcaseExample title="Tiêu chuẩn" description="Trường văn bản nhiều dòng với nhãn và mô tả." code={`<TextareaPreset
     label="Phản hồi (Feedback)"
     description="Đóng góp ý kiến của bạn về sản phẩm."
     placeholder="Viết phản hồi..."
     className="w-full"
-  />`}
-        >
-          <TextareaPreset
-            label="Phản hồi (Feedback)"
-            description="Đóng góp ý kiến của bạn về sản phẩm."
-            placeholder="Viết phản hồi..."
-            size={globalSize}
-            className="w-full"
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <TextareaPreset
+                          label="Phản hồi (Feedback)"
+                          description="Đóng góp ý kiến của bạn về sản phẩm."
+                          placeholder="Viết phản hồi..."
+                          size={globalSize}
+                          className="w-full"
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Lỗi xác thực (Validation Error)"
-          description="Hiển thị thông báo lỗi khi đầu vào không hợp lệ."
-          codeString={`<TextareaPreset
+        <ShowcaseExample title="Lỗi xác thực (Validation Error)" description="Hiển thị thông báo lỗi khi đầu vào không hợp lệ." code={`<TextareaPreset
     label="Khiếu nại"
     placeholder="Mô tả vấn đề..."
     errorMessage="Vui lòng cung cấp ít nhất 20 ký tự để chúng tôi hỗ trợ tốt hơn."
     className="w-full"
     rows={3}
-  />`}
-        >
-          <TextareaPreset
-            label="Khiếu nại"
-            placeholder="Mô tả vấn đề..."
-            errorMessage="Vui lòng cung cấp ít nhất 20 ký tự để chúng tôi hỗ trợ tốt hơn."
-            size={globalSize}
-            className="w-full"
-            rows={3}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <TextareaPreset
+                          label="Khiếu nại"
+                          placeholder="Mô tả vấn đề..."
+                          errorMessage="Vui lòng cung cấp ít nhất 20 ký tự để chúng tôi hỗ trợ tốt hơn."
+                          size={globalSize}
+                          className="w-full"
+                          rows={3}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Giới hạn ký tự (Character Count)"
-          description="Sử dụng React state và slot description để đếm ngược số ký tự."
-          codeString={`const [bio, setBio] = useState(""); const maxLength = 280;
+        <ShowcaseExample title="Giới hạn ký tự (Character Count)" description="Sử dụng React state và slot description để đếm ngược số ký tự." code={`const [bio, setBio] = useState(""); const maxLength = 280;
   return (
   <TextareaPreset
     label="Tiểu sử"
@@ -110,65 +100,60 @@ function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
     }
     rows={4}
   />
-  );`}
-        >
-          <TextareaPreset
-            label="Tiểu sử"
-            description={
-              <span className="flex justify-between">
-                <span>Mô tả ngắn gọn về bản thân bạn.</span>
-                <span
-                  data-invalid={bio.length > maxLength ? "" : undefined}
-                  className="data-invalid:text-destructive data-invalid:font-medium"
-                >
-                  {bio.length}/{maxLength}
-                </span>
-              </span>
-            }
-            placeholder="I'm a developer who loves..."
-            value={bio}
-            onChange={(e) => setBio(e.target.value)}
-            maxLength={maxLength}
-            errorMessage={
-              bio.length > maxLength
-                ? `Vượt quá ${bio.length - maxLength} ký tự.`
-                : undefined
-            }
-            size={globalSize}
-            className="w-full"
-            rows={4}
-          />
-        </ExampleSection>
+  );`} preview={
+                      <>
+              <TextareaPreset
+                          label="Tiểu sử"
+                          description={
+                            <span className="flex justify-between">
+                              <span>Mô tả ngắn gọn về bản thân bạn.</span>
+                              <span
+                                data-invalid={bio.length > maxLength ? "" : undefined}
+                                className="data-invalid:text-destructive data-invalid:font-medium"
+                              >
+                                {bio.length}/{maxLength}
+                              </span>
+                            </span>
+                          }
+                          placeholder="I'm a developer who loves..."
+                          value={bio}
+                          onChange={(e) => setBio(e.target.value)}
+                          maxLength={maxLength}
+                          errorMessage={
+                            bio.length > maxLength
+                              ? `Vượt quá ${bio.length - maxLength} ký tự.`
+                              : undefined
+                          }
+                          size={globalSize}
+                          className="w-full"
+                          rows={4}
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Khóa / Bất hoạt (Disabled)"
-          description="Trường văn bản không thể tương tác."
-          codeString={`<TextareaPreset
+        <ShowcaseExample title="Khóa / Bất hoạt (Disabled)" description="Trường văn bản không thể tương tác." code={`<TextareaPreset
     label="Ghi chú lưu trữ"
     description="Những ghi chú này ở dạng chỉ đọc."
     defaultValue="Dự án này đã hoàn thành vào năm 2023. Không thể thay đổi nội dung."
     disabled
     className="w-full"
     rows={4}
-  />`}
-        >
-          <TextareaPreset
-            label="Ghi chú lưu trữ"
-            description="Những ghi chú này ở dạng chỉ đọc."
-            defaultValue="Dự án này đã hoàn thành vào năm 2023. Không thể thay đổi nội dung."
-            disabled
-            size={globalSize}
-            className="w-full"
-            rows={4}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <TextareaPreset
+                          label="Ghi chú lưu trữ"
+                          description="Những ghi chú này ở dạng chỉ đọc."
+                          defaultValue="Dự án này đã hoàn thành vào năm 2023. Không thể thay đổi nội dung."
+                          disabled
+                          size={globalSize}
+                          className="w-full"
+                          rows={4}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="Thực tế sử dụng (Real-world Form)"
-        description="Bố cục thực tế trong một form hoàn chỉnh."
-        fullWidth
-        codeString={`<div className="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-sm">
+      <ShowcaseExample title="Thực tế sử dụng (Real-world Form)" description="Bố cục thực tế trong một form hoàn chỉnh." code={`<div className="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-sm">
     <h3 className="mb-4 font-semibold">
       Tạo Ticket Hỗ Trợ
     </h3>
@@ -179,20 +164,21 @@ function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
       className="w-full"
       rows={6}
     />
-  </div>`}
-      >
-        <div className="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-sm">
-          <h3 className="mb-4 font-semibold">Tạo Ticket Hỗ Trợ</h3>
-          <TextareaPreset
-            label="Mô tả sự cố"
-            description="Vui lòng cung cấp chi tiết lỗi, các bước tái hiện và cấu hình môi trường."
-            placeholder="Ví dụ: Khi tôi click vào nút Submit, hệ thống báo lỗi 500..."
-            size={globalSize}
-            className="w-full"
-            rows={6}
-          />
-        </div>
-      </ExampleSection>
+  </div>`} preview={
+                  <>
+          <div className="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-sm">
+                    <h3 className="mb-4 font-semibold">Tạo Ticket Hỗ Trợ</h3>
+                    <TextareaPreset
+                      label="Mô tả sự cố"
+                      description="Vui lòng cung cấp chi tiết lỗi, các bước tái hiện và cấu hình môi trường."
+                      placeholder="Ví dụ: Khi tôi click vào nút Submit, hệ thống báo lỗi 500..."
+                      size={globalSize}
+                      className="w-full"
+                      rows={6}
+                    />
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
@@ -202,49 +188,42 @@ function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
 // ──────────────────────────────────────────────────────────
 function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Cơ bản (Primitive)"
-          description="Khung nhập văn bản nhiều dòng không có nhãn."
-          codeString={`<Textarea
+        <ShowcaseExample title="Cơ bản (Primitive)" description="Khung nhập văn bản nhiều dòng không có nhãn." code={`<Textarea
     rows={4}
     placeholder="Viết một đoạn văn dài ở đây..."
     className="w-full"
-  />`}
-        >
-          <Textarea
-            size={globalSize}
-            rows={4}
-            placeholder="Viết một đoạn văn dài ở đây..."
-            className="w-full"
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <Textarea
+                          size={globalSize}
+                          rows={4}
+                          placeholder="Viết một đoạn văn dài ở đây..."
+                          className="w-full"
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Auto Resize (CSS content)"
-          description="Giãn chiều cao tự động nhờ class field-sizing-content (nếu trình duyệt hỗ trợ)."
-          codeString={`<Textarea
+        <ShowcaseExample title="Auto Resize (CSS content)" description="Giãn chiều cao tự động nhờ class field-sizing-content (nếu trình duyệt hỗ trợ)." code={`<Textarea
   placeholder="Gõ nhiều dòng để xem nó tự giãn..."
   defaultValue={"Dòng 1\nDòng 2\nDòng 3\nDòng 4"}
   className="w-full"
 />
-`}
-        >
-          <Textarea
-            size={globalSize}
-            placeholder="Gõ nhiều dòng để xem nó tự giãn..."
-            defaultValue={"Dòng 1\nDòng 2\nDòng 3\nDòng 4"}
-            className="w-full"
-          />
-        </ExampleSection>
+`} preview={
+                      <>
+              <Textarea
+                          size={globalSize}
+                          placeholder="Gõ nhiều dòng để xem nó tự giãn..."
+                          defaultValue={"Dòng 1\nDòng 2\nDòng 3\nDòng 4"}
+                          className="w-full"
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="InputGroup + Textarea"
-          description="Textarea bên trong InputGroup với Addon. Sử dụng InputGroupTextarea."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="InputGroup + Textarea" description="Textarea bên trong InputGroup với Addon. Sử dụng InputGroupTextarea." code={`<Field className="w-full">
     <FieldLabel htmlFor="tf-group-textarea">
       Bình luận
     </FieldLabel>
@@ -260,29 +239,27 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
         />
       </InputGroup>
     </FieldContent>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel htmlFor="tf-group-textarea">Bình luận</FieldLabel>
-            <FieldContent>
-              <InputGroup size={globalSize} className="items-start">
-                <InputGroupAddon align="start" className="mt-2">
-                  <InputGroupText>💬</InputGroupText>
-                </InputGroupAddon>
-                <InputGroupTextarea
-                  id="tf-group-textarea"
-                  rows={3}
-                  placeholder="Để lại bình luận của bạn..."
-                />
-              </InputGroup>
-            </FieldContent>
-          </Field>
-        </ExampleSection>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel htmlFor="tf-group-textarea">Bình luận</FieldLabel>
+                          <FieldContent>
+                            <InputGroup size={globalSize} className="items-start">
+                              <InputGroupAddon align="start" className="mt-2">
+                                <InputGroupText>💬</InputGroupText>
+                              </InputGroupAddon>
+                              <InputGroupTextarea
+                                id="tf-group-textarea"
+                                rows={3}
+                                placeholder="Để lại bình luận của bạn..."
+                              />
+                            </InputGroup>
+                          </FieldContent>
+                        </Field>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Trạng thái Lỗi thủ công"
-          description="Tự gắn aria-invalid vào Textarea và dùng FieldError."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Trạng thái Lỗi thủ công" description="Tự gắn aria-invalid vào Textarea và dùng FieldError." code={`<Field className="w-full">
     <FieldLabel htmlFor="tf-invalid">
       Mô tả hệ thống
     </FieldLabel>
@@ -298,31 +275,27 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
     <FieldError>
       Mô tả không đạt đủ độ dài tối thiểu.
     </FieldError>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel htmlFor="tf-invalid">Mô tả hệ thống</FieldLabel>
-            <FieldContent>
-              <Textarea
-                id="tf-invalid"
-                size={globalSize}
-                rows={3}
-                aria-invalid
-                placeholder="Mô tả..."
-                defaultValue="Quá ngắn"
-              />
-            </FieldContent>
-            <FieldError>Mô tả không đạt đủ độ dài tối thiểu.</FieldError>
-          </Field>
-        </ExampleSection>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel htmlFor="tf-invalid">Mô tả hệ thống</FieldLabel>
+                          <FieldContent>
+                            <Textarea
+                              id="tf-invalid"
+                              size={globalSize}
+                              rows={3}
+                              aria-invalid
+                              placeholder="Mô tả..."
+                              defaultValue="Quá ngắn"
+                            />
+                          </FieldContent>
+                          <FieldError>Mô tả không đạt đủ độ dài tối thiểu.</FieldError>
+                        </Field>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="🧭 Use Case Comparison"
-        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 */}
+      <ShowcaseExample title="🧭 So sánh Use Case" description="So sánh nhanh khi nào dùng Micro và Macro." code={`<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">
       <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">
@@ -364,7 +337,6 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
       </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">
@@ -408,92 +380,93 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
         </InputGroup>
       </div>
     </div>
-  </div>`}
-      >
-        <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 lấy thông tin thông thường
-                </h3>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              Bạn cần ô nhập có tên trường rõ ràng, có gợi ý nhập liệu. Chỉ việc
-              truyền props vào <DocsCode>TextareaPreset</DocsCode> là xong.
-            </p>
-            <div className="rounded-lg bg-muted/50 p-3">
-              <TextareaPreset
-                size="sm"
-                label="Mục tiêu nghề nghiệp"
-                description="Tối đa 500 từ."
-                className="w-full"
-              />
-            </div>
-          </div>
+  </div>`} preview={
+                  <>
+          <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 lấy thông tin thông thường
+                          </h3>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">
+                        Bạn cần ô nhập có tên trường rõ ràng, có gợi ý nhập liệu. Chỉ việc
+                        truyền props vào <DocsCode>TextareaPreset</DocsCode> là xong.
+                      </p>
+                      <div className="rounded-lg bg-muted/50 p-3">
+                        <TextareaPreset
+                          size="sm"
+                          label="Mục tiêu nghề nghiệp"
+                          description="Tối đa 500 từ."
+                          className="w-full"
+                        />
+                      </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">
-                  Layout kết hợp Addon đặc thù
-                </h3>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              Khi bạn cần nối một icon vào ngay bên cạnh khung textarea giống
-              như giao diện chat. Macro không hỗ trợ layout này cho Textarea.
-            </p>
-            <div className="rounded-lg bg-muted/50 p-3">
-              <InputGroup size="sm" className="items-end w-full">
-                <InputGroupTextarea rows={2} placeholder="Tin nhắn..." />
-                <button className="h-full px-3 shrink-0 rounded-r-md border-l border-input bg-muted/50 text-xs font-semibold text-primary transition-colors hover:bg-muted">
-                  GỬI
-                </button>
-              </InputGroup>
-            </div>
-          </div>
-        </div>
-      </ExampleSection>
+                    {/* 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">
+                            Layout kết hợp Addon đặc thù
+                          </h3>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">
+                        Khi bạn cần nối một icon vào ngay bên cạnh khung textarea giống
+                        như giao diện chat. Macro không hỗ trợ layout này cho Textarea.
+                      </p>
+                      <div className="rounded-lg bg-muted/50 p-3">
+                        <InputGroup size="sm" className="items-end w-full">
+                          <InputGroupTextarea rows={2} placeholder="Tin nhắn..." />
+                          <button className="h-full px-3 shrink-0 rounded-r-md border-l border-input bg-muted/50 text-xs font-semibold text-primary transition-colors hover:bg-muted">
+                            GỬI
+                          </button>
+                        </InputGroup>
+                      </div>
+                    </div>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
@@ -507,36 +480,10 @@ export default function TextareaShowcase() {
     <Showcase
       title="Textarea"
       description="Trường văn bản nhiều dòng dành cho nội dung dài, phản hồi hoặc mô tả."
-      generalConcept={
-        <div className="space-y-4">
-          <ShowcaseDocs>
-            <DocsH3>Khi nào nên dùng Macro</DocsH3>
-            <DocsP>
-              <DocsCode>TextareaPreset</DocsCode> là một component hoàn chỉnh,
-              tích hợp sẵn Label, Description và Error Message. Sử dụng nó cho
-              đa số các trường hợp để giữ code ngắn gọn và đảm bảo tính nhất
-              quán (Accessibility).
-            </DocsP>
-          </ShowcaseDocs>
-          <ShowcaseDocs>
-            <DocsH3>Khi nào nên dùng Micro</DocsH3>
-            <DocsP>
-              <DocsCode>Textarea</DocsCode> chỉ là một ô nhập liệu độc lập. Dùng
-              nó khi bạn tự quản lý <DocsCode>Field</DocsCode> thủ công hoặc khi
-              chèn Textarea vào bên trong một <DocsCode>InputGroup</DocsCode>.
-            </DocsP>
-          </ShowcaseDocs>
-        </div>
-      }
+      
 
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <TextareaMicroShowcase globalSize={globalSize} /> },
-        {
-          label: "Macro (Preset)",
-          content: <TextareaMacroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <TextareaMicroShowcase globalSize={globalSize} /> }}
+      macro={{ content: <TextareaMacroShowcase globalSize={globalSize} /> }}
     />
   );
 }