gladvn 0.2.35 → 0.2.37

package/src/dev/showcase/select.tsx

@@ -30,15 +30,12 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// RHF Form Demo (Macro)
-// ──────────────────────────────────────────────────────────
 const formSchema = z.object({
   language: z.string().min(1, "Vui lòng chọn một ngôn ngữ.") });
 type FormValues = z.infer<typeof formSchema>;
@@ -112,17 +109,11 @@ function SelectForm({ size }: { size: Size }) {
   );
 }`;
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Macro Content
-// ──────────────────────────────────────────────────────────
 function SelectMacroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Tiêu chuẩn"
-          description="Trình thả xuống cơ bản với mảng options."
-          codeString={`<SelectPreset
+        <ShowcaseExample title="Tiêu chuẩn" description="Trình thả xuống cơ bản với mảng options." code={`<SelectPreset
     className="w-full"
     label="Trái cây yêu thích"
     description="Chọn một loại trái cây bạn thích nhất."
@@ -132,26 +123,24 @@ function SelectMacroShowcase({ globalSize }: { globalSize: Size }) {
       { value: "banana", label: "Chuối (Banana)" },
       { value: "cherry", label: "Anh đào (Cherry)" },
     ]}
-  />`}
-        >
-          <SelectPreset
-            className="w-full"
-            size={globalSize}
-            label="Trái cây yêu thích"
-            description="Chọn một loại trái cây bạn thích nhất."
-            placeholder="Chọn trái cây..."
-            options={[
-              { value: "apple", label: "Táo (Apple)" },
-              { value: "banana", label: "Chuối (Banana)" },
-              { value: "cherry", label: "Anh đào (Cherry)" },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <SelectPreset
+                          className="w-full"
+                          size={globalSize}
+                          label="Trái cây yêu thích"
+                          description="Chọn một loại trái cây bạn thích nhất."
+                          placeholder="Chọn trái cây..."
+                          options={[
+                            { value: "apple", label: "Táo (Apple)" },
+                            { value: "banana", label: "Chuối (Banana)" },
+                            { value: "cherry", label: "Anh đào (Cherry)" },
+                          ]}
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Trạng thái Lỗi (Error)"
-          description="Báo lỗi khi form submit mà user chưa chọn."
-          codeString={`<div className="w-full flex flex-col gap-6">
+        <ShowcaseExample title="Trạng thái Lỗi (Error)" description="Báo lỗi khi form submit mà user chưa chọn." code={`<div className="w-full flex flex-col gap-6">
     <SelectPreset
       label="Framework (Lỗi)"
       placeholder="Chọn một framework..."
@@ -161,28 +150,26 @@ function SelectMacroShowcase({ globalSize }: { globalSize: Size }) {
       ]}
       errorMessage="Vui lòng chọn một framework để tiếp tục."
     />
-  </div>`}
-        >
-          <div className="w-full flex flex-col gap-6">
-            <SelectPreset
-              size={globalSize}
-              label="Framework (Lỗi)"
-              placeholder="Chọn một framework..."
-              options={[
-                { value: "react", label: "React" },
-                { value: "vue", label: "Vue" },
-              ]}
-              errorMessage="Vui lòng chọn một framework để tiếp tục."
-            />
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="w-full flex flex-col gap-6">
+                          <SelectPreset
+                            size={globalSize}
+                            label="Framework (Lỗi)"
+                            placeholder="Chọn một framework..."
+                            options={[
+                              { value: "react", label: "React" },
+                              { value: "vue", label: "Vue" },
+                            ]}
+                            errorMessage="Vui lòng chọn một framework để tiếp tục."
+                          />
+                        </div>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Khóa / Bất hoạt (Disabled)"
-          description="Người dùng không thể mở danh sách."
-          codeString={`<SelectPreset
+        <ShowcaseExample title="Khóa / Bất hoạt (Disabled)" description="Người dùng không thể mở danh sách." code={`<SelectPreset
     className="w-full"
     label="Gói tài khoản"
     description="Bạn không thể thay đổi gói cước khi chưa thanh toán nợ."
@@ -193,27 +180,25 @@ function SelectMacroShowcase({ globalSize }: { globalSize: Size }) {
       { value: "pro", label: "Chuyên nghiệp (Pro)" },
     ]}
     disabled
-  />`}
-        >
-          <SelectPreset
-            className="w-full"
-            size={globalSize}
-            label="Gói tài khoản"
-            description="Bạn không thể thay đổi gói cước khi chưa thanh toán nợ."
-            placeholder="Chọn gói..."
-            value="pro"
-            options={[
-              { value: "basic", label: "Cơ bản (Free)" },
-              { value: "pro", label: "Chuyên nghiệp (Pro)" },
-            ]}
-            disabled
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <SelectPreset
+                          className="w-full"
+                          size={globalSize}
+                          label="Gói tài khoản"
+                          description="Bạn không thể thay đổi gói cước khi chưa thanh toán nợ."
+                          placeholder="Chọn gói..."
+                          value="pro"
+                          options={[
+                            { value: "basic", label: "Cơ bản (Free)" },
+                            { value: "pro", label: "Chuyên nghiệp (Pro)" },
+                          ]}
+                          disabled
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Nhãn phức tạp (Custom Content)"
-          description="Truyền React Node vào Label để tạo giao diện phong phú."
-          codeString={`<SelectPreset
+        <ShowcaseExample title="Nhãn phức tạp (Custom Content)" description="Truyền React Node vào Label để tạo giao diện phong phú." code={`<SelectPreset
     label={
       <span className="flex items-center gap-2">
         Quốc gia cư trú
@@ -227,50 +212,43 @@ function SelectMacroShowcase({ globalSize }: { globalSize: Size }) {
       { value: "vn", label: "Việt Nam" },
     ]}
   />
-`}
-        >
-          <SelectPreset
-            size={globalSize}
-            label={
-              <span className="flex items-center gap-2">
-                Quốc gia cư trú
-                <span className="text-destructive">*</span>
-              </span>
-            }
-            description="Thông tin này được sử dụng cho mục đích tính thuế, phải khớp với địa chỉ thanh toán."
-            placeholder="Chọn quốc gia..."
-            options={[
-              { value: "us", label: "United States" },
-              { value: "vn", label: "Việt Nam" },
-            ]}
-          />
-        </ExampleSection>
+`} preview={
+                      <>
+              <SelectPreset
+                          size={globalSize}
+                          label={
+                            <span className="flex items-center gap-2">
+                              Quốc gia cư trú
+                              <span className="text-destructive">*</span>
+                            </span>
+                          }
+                          description="Thông tin này được sử dụng cho mục đích tính thuế, phải khớp với địa chỉ thanh toán."
+                          placeholder="Chọn quốc gia..."
+                          options={[
+                            { value: "us", label: "United States" },
+                            { value: "vn", label: "Việt Nam" },
+                          ]}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Tích hợp React Hook Form"
-          description="Sử dụng Controller để bắt giá trị."
-          codeString={rhfCode}
-        >
-          <SelectForm size={globalSize} />
-        </ExampleSection>
+        <ShowcaseExample title="Tích hợp React Hook Form" description="Sử dụng Controller để bắt giá trị." code={rhfCode} preview={
+                      <>
+              <SelectForm size={globalSize} />
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content
-// ──────────────────────────────────────────────────────────
 function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Cơ bản (Primitive)"
-          description="Ghép nối thủ công bằng cách bọc Field."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Cơ bản (Primitive)" description="Ghép nối thủ công bằng cách bọc Field." code={`<Field className="w-full">
     <FieldLabel>Framework</FieldLabel>
     <FieldContent>
       <Select
@@ -296,36 +274,34 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
     <FieldDescription>
       Chọn công nghệ bạn muốn sử dụng.
     </FieldDescription>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Framework</FieldLabel>
-            <FieldContent>
-              <Select items={{ next: "Next.js", vite: "Vite", remix: "Remix" }}>
-                <SelectTrigger size={globalSize}>
-                  <SelectValue placeholder="Chọn framework..." />
-                </SelectTrigger>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Framework</FieldLabel>
+                          <FieldContent>
+                            <Select items={{ next: "Next.js", vite: "Vite", remix: "Remix" }}>
+                              <SelectTrigger size={globalSize}>
+                                <SelectValue placeholder="Chọn framework..." />
+                              </SelectTrigger>
 
-                  <SelectContent>
-                    <SelectScrollUpButton />
-                    <SelectItem value="next">Next.js</SelectItem>
-                    <SelectItem value="vite">Vite</SelectItem>
-                    <SelectItem value="remix">Remix</SelectItem>
-                    <SelectScrollDownButton />
-                  </SelectContent>
-                
-              </Select>
-            </FieldContent>
-            <FieldDescription>
-              Chọn công nghệ bạn muốn sử dụng.
-            </FieldDescription>
-          </Field>
-        </ExampleSection>
+                                <SelectContent>
+                                  <SelectScrollUpButton />
+                                  <SelectItem value="next">Next.js</SelectItem>
+                                  <SelectItem value="vite">Vite</SelectItem>
+                                  <SelectItem value="remix">Remix</SelectItem>
+                                  <SelectScrollDownButton />
+                                </SelectContent>
+                              
+                            </Select>
+                          </FieldContent>
+                          <FieldDescription>
+                            Chọn công nghệ bạn muốn sử dụng.
+                          </FieldDescription>
+                        </Field>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Phân nhóm (Grouped)"
-          description="Sử dụng SelectGroup, SelectLabel và SelectSeparator."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Phân nhóm (Grouped)" description="Sử dụng SelectGroup, SelectLabel và SelectSeparator." code={`<Field className="w-full">
     <FieldLabel>Trái cây</FieldLabel>
     <FieldContent>
       <Select
@@ -333,7 +309,7 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
           orange: "Orange",
           lemon: "Lemon",
           strawberry: "Strawberry",
-          blueberry: "Blueberry" }}
+          blueberry: "Việt quất" }}
       >
         <SelectTrigger>
           <SelectValue placeholder="Chọn loại quả..." />
@@ -361,47 +337,45 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
         
       </Select>
     </FieldContent>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Trái cây</FieldLabel>
-            <FieldContent>
-              <Select
-                items={{
-                  orange: "Orange",
-                  lemon: "Lemon",
-                  strawberry: "Strawberry",
-                  blueberry: "Blueberry" }}
-              >
-                <SelectTrigger size={globalSize}>
-                  <SelectValue placeholder="Chọn loại quả..." />
-                </SelectTrigger>
-                
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Họ cam chanh (Citrus)</SelectLabel>
-                      <SelectItem value="orange">Orange</SelectItem>
-                      <SelectItem value="lemon">Lemon</SelectItem>
-                    </SelectGroup>
-                    <SelectSeparator />
-                    <SelectGroup>
-                      <SelectLabel>Họ dâu (Berry)</SelectLabel>
-                      <SelectItem value="strawberry">Strawberry</SelectItem>
-                      <SelectItem value="blueberry">Blueberry</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                
-              </Select>
-            </FieldContent>
-          </Field>
-        </ExampleSection>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Trái cây</FieldLabel>
+                          <FieldContent>
+                            <Select
+                              items={{
+                                orange: "Orange",
+                                lemon: "Lemon",
+                                strawberry: "Strawberry",
+                                blueberry: "Việt quất" }}
+                            >
+                              <SelectTrigger size={globalSize}>
+                                <SelectValue placeholder="Chọn loại quả..." />
+                              </SelectTrigger>
+                              
+                                <SelectContent>
+                                  <SelectGroup>
+                                    <SelectLabel>Họ cam chanh (Citrus)</SelectLabel>
+                                    <SelectItem value="orange">Orange</SelectItem>
+                                    <SelectItem value="lemon">Lemon</SelectItem>
+                                  </SelectGroup>
+                                  <SelectSeparator />
+                                  <SelectGroup>
+                                    <SelectLabel>Họ dâu (Berry)</SelectLabel>
+                                    <SelectItem value="strawberry">Strawberry</SelectItem>
+                                    <SelectItem value="blueberry">Blueberry</SelectItem>
+                                  </SelectGroup>
+                                </SelectContent>
+                              
+                            </Select>
+                          </FieldContent>
+                        </Field>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Trạng thái Lỗi thủ công"
-          description="Tự gắn aria-invalid vào Select."
-          codeString={`<Field data-invalid={true} className="w-full">
+        <ShowcaseExample title="Trạng thái Lỗi thủ công" description="Tự gắn aria-invalid vào Select." code={`<Field data-invalid={true} className="w-full">
     <FieldLabel>Dự án</FieldLabel>
     <FieldContent>
       <Select items={{ p1: "Project 1" }}>
@@ -416,30 +390,28 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
       </Select>
     </FieldContent>
     <FieldError>Vui lòng chọn một dự án hợp lệ.</FieldError>
-  </Field>`}
-        >
-          <Field size={globalSize} data-invalid={true} className="w-full">
-            <FieldLabel>Dự án</FieldLabel>
-            <FieldContent>
-              <Select items={{ p1: "Project 1" }}>
-                <SelectTrigger size={globalSize} aria-invalid={true}>
-                  <SelectValue placeholder="Chọn dự án..." />
-                </SelectTrigger>
-                
-                  <SelectContent>
-                    <SelectItem value="p1">Project 1</SelectItem>
-                  </SelectContent>
-                
-              </Select>
-            </FieldContent>
-            <FieldError>Vui lòng chọn một dự án hợp lệ.</FieldError>
-          </Field>
-        </ExampleSection>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} data-invalid={true} className="w-full">
+                          <FieldLabel>Dự án</FieldLabel>
+                          <FieldContent>
+                            <Select items={{ p1: "Project 1" }}>
+                              <SelectTrigger size={globalSize} aria-invalid={true}>
+                                <SelectValue placeholder="Chọn dự án..." />
+                              </SelectTrigger>
+                              
+                                <SelectContent>
+                                  <SelectItem value="p1">Project 1</SelectItem>
+                                </SelectContent>
+                              
+                            </Select>
+                          </FieldContent>
+                          <FieldError>Vui lòng chọn một dự án hợp lệ.</FieldError>
+                        </Field>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Disabled thủ công"
-          description="Khóa SelectTrigger."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Disabled thủ công" description="Khóa SelectTrigger." code={`<Field className="w-full">
     <FieldLabel>Múi giờ</FieldLabel>
     <FieldContent>
       <Select items={{ gmt: "GMT+7" }}>
@@ -458,34 +430,31 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
     <FieldDescription>
       Múi giờ tự động lấy theo hệ thống.
     </FieldDescription>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Múi giờ</FieldLabel>
-            <FieldContent>
-              <Select items={{ gmt: "GMT+7" }}>
-                <SelectTrigger size={globalSize} disabled>
-                  <SelectValue placeholder="Chọn múi giờ..." />
-                </SelectTrigger>
-                
-                  <SelectContent>
-                    <SelectItem value="gmt">GMT+7 (Indochina Time)</SelectItem>
-                  </SelectContent>
-                
-              </Select>
-            </FieldContent>
-            <FieldDescription>
-              Múi giờ tự động lấy theo hệ thống.
-            </FieldDescription>
-          </Field>
-        </ExampleSection>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Múi giờ</FieldLabel>
+                          <FieldContent>
+                            <Select items={{ gmt: "GMT+7" }}>
+                              <SelectTrigger size={globalSize} disabled>
+                                <SelectValue placeholder="Chọn múi giờ..." />
+                              </SelectTrigger>
+                              
+                                <SelectContent>
+                                  <SelectItem value="gmt">GMT+7 (Indochina Time)</SelectItem>
+                                </SelectContent>
+                              
+                            </Select>
+                          </FieldContent>
+                          <FieldDescription>
+                            Múi giờ tự động lấy theo hệ thống.
+                          </FieldDescription>
+                        </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">
+      <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">
     {/* 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">
@@ -556,120 +525,91 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
         <DocsCode>SelectItem</DocsCode>.
       </p>
     </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 nhập Quốc tịch
-                </h3>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              Bạn có 195 quốc gia để chọn, tất cả đều chỉ là chữ. Thay vì viết
-              195 thẻ <DocsCode>SelectItem</DocsCode>, bạn vứt mảng JSON 195
-              phần tử đó vào thuộc tính <DocsCode>options</DocsCode> của Macro.
-            </p>
-          </div>
+  </div>`} preview={
+                  <>
+          <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">
+                          <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 Quốc tịch
+                          </h3>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">
+                        Bạn có 195 quốc gia để chọn, tất cả đều chỉ là chữ. Thay vì viết
+                        195 thẻ <DocsCode>SelectItem</DocsCode>, bạn vứt mảng JSON 195
+                        phần tử đó vào thuộc tính <DocsCode>options</DocsCode> của Macro.
+                      </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">
-                  Menu Chọn Tài khoản
-                </h3>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              Bạn muốn trong danh sách thả xuống, mỗi dòng không chỉ là Tên, mà
-              còn có cả Avatar (ảnh tròn) và Email (chữ mờ ở dưới). Bạn bắt buộc
-              phải dùng Micro để tự thiết kế nội dung bên trong{" "}
-              <DocsCode>SelectItem</DocsCode>.
-            </p>
-          </div>
-        </div>
-      </ExampleSection>
+                    <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">
+                            Menu Chọn Tài khoản
+                          </h3>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">
+                        Bạn muốn trong danh sách thả xuống, mỗi dòng không chỉ là Tên, mà
+                        còn có cả Avatar (ảnh tròn) và Email (chữ mờ ở dưới). Bạn bắt buộc
+                        phải dùng Micro để tự thiết kế nội dung bên trong{" "}
+                        <DocsCode>SelectItem</DocsCode>.
+                      </p>
+                    </div>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function SelectShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Select"
       description="Thành phần điều khiển hiển thị danh sách các tùy chọn thả xuống để người dùng chọn."
-      generalConcept={
-        <ShowcaseDocs>
-          <DocsH3>Khi nào nên dùng Macro</DocsH3>
-          <DocsP>
-            <DocsCode>SelectPreset</DocsCode> đóng gói sẵn cấu trúc 8 thẻ của
-            Select nguyên thuỷ thành 1 Component duy nhất. Nó dùng prop{" "}
-            <DocsCode>options</DocsCode> để render danh sách thả xuống. Dùng
-            Macro cho 90% trường hợp form nhập liệu chọn 1 giá trị thông thường.
-          </DocsP>
-          <DocsH3>Khi nào nên dùng Micro</DocsH3>
-          <DocsP>
-            Dùng <DocsCode>Select</DocsCode> và các thành phần con nguyên thuỷ
-            khi bạn cần một danh sách thả xuống có phân nhóm (
-            <DocsCode>SelectGroup</DocsCode>, <DocsCode>SelectLabel</DocsCode>)
-            hoặc khi mỗi tuỳ chọn (<DocsCode>SelectItem</DocsCode>) có thiết kế
-            phức tạp (chứa icon, ảnh đại diện, subtext) thay vì chỉ là text đơn
-            thuần.
-          </DocsP>
-        </ShowcaseDocs>
-      }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <SelectMicroShowcase globalSize={globalSize} /> },
-        {
-          label: "Macro (Preset)",
-          content: <SelectMacroShowcase globalSize={globalSize} /> },
-      ]}
+      
+      micro={{ content: <SelectMicroShowcase globalSize={globalSize} /> }}
+      macro={{ content: <SelectMacroShowcase globalSize={globalSize} /> }}
     />
   );
 }