gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/combobox.tsx

@@ -40,7 +40,7 @@ import {
   DocsCode,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -52,9 +52,6 @@ const allFrameworks = [...frontendFrameworks, ...backendFrameworks];
 const tagItems = ["bug", "feature", "enhancement", "docs"];
 const engineItems = ["v8", "spidermonkey"];
 
-// ──────────────────────────────────────────────────────────
-// RHF Form Demo (Macro)
-// ──────────────────────────────────────────────────────────
 const formSchema = z.object({
   framework: z.string().min(1, "Vui lòng chọn một framework.") });
 type FormValues = z.infer<typeof formSchema>;
@@ -133,17 +130,11 @@ function ComboboxForm({ size }: { size: Size }) {
   );
 }`;
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Macro Content
-// ──────────────────────────────────────────────────────────
 function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Tiêu chuẩn"
-          description="Tương tự Select nhưng có thể gõ để tìm kiếm."
-          codeString={`<ComboboxPreset
+        <ShowcaseExample title="Tiêu chuẩn" description="Tương tự Select nhưng có thể gõ để tìm kiếm." code={`<ComboboxPreset
     className="w-full"
     label="Framework"
     description="Hỗ trợ hàng ngàn bản ghi mà không lag."
@@ -156,29 +147,27 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
       { value: "angular", label: "Angular" },
       { value: "svelte", label: "Svelte" },
     ]}
-  />`}
-        >
-          <ComboboxPreset
-            className="w-full"
-            size={globalSize}
-            label="Framework"
-            description="Hỗ trợ hàng ngàn bản ghi mà không lag."
-            placeholder="Chọn framework..."
-            searchPlaceholder="Tìm kiếm framework..."
-            emptyText="Không tìm thấy framework nào."
-            options={[
-              { value: "react", label: "React" },
-              { value: "vue", label: "Vue" },
-              { value: "angular", label: "Angular" },
-              { value: "svelte", label: "Svelte" },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <ComboboxPreset
+                          className="w-full"
+                          size={globalSize}
+                          label="Framework"
+                          description="Hỗ trợ hàng ngàn bản ghi mà không lag."
+                          placeholder="Chọn framework..."
+                          searchPlaceholder="Tìm kiếm framework..."
+                          emptyText="Không tìm thấy framework nào."
+                          options={[
+                            { value: "react", label: "React" },
+                            { value: "vue", label: "Vue" },
+                            { value: "angular", label: "Angular" },
+                            { value: "svelte", label: "Svelte" },
+                          ]}
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Trạng thái Lỗi (Error)"
-          description="Báo lỗi khi bỏ trống form."
-          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 bỏ trống form." code={`<div className="w-full flex flex-col gap-6">
     <ComboboxPreset
       label="Khu vực (Lỗi)"
       placeholder="Chọn khu vực..."
@@ -187,25 +176,23 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
       ]}
       errorMessage="Khu vực là bắt buộc."
     />
-  </div>`}
-        >
-          <div className="w-full flex flex-col gap-6">
-            <ComboboxPreset
-              size={globalSize}
-              label="Khu vực (Lỗi)"
-              placeholder="Chọn khu vực..."
-              options={[{ value: "ap", label: "Châu Á Thái Bình Dương" }]}
-              errorMessage="Khu vực là bắt buộc."
-            />
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="w-full flex flex-col gap-6">
+                          <ComboboxPreset
+                            size={globalSize}
+                            label="Khu vực (Lỗi)"
+                            placeholder="Chọn khu vực..."
+                            options={[{ value: "ap", label: "Châu Á Thái Bình Dương" }]}
+                            errorMessage="Khu vực là bắt buộc."
+                          />
+                        </div>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Khóa / Bất hoạt (Disabled)"
-          description="Người dùng không thể click hay gõ vào ô."
-          codeString={`<ComboboxPreset
+        <ShowcaseExample title="Khóa / Bất hoạt (Disabled)" description="Người dùng không thể click hay gõ vào ô." code={`<ComboboxPreset
     className="w-full"
     label="Đội nhóm (Team)"
     description="Bạn không có quyền thay đổi đội trong dự án này."
@@ -216,27 +203,25 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
     ]}
     value="engineering"
     disabled
-  />`}
-        >
-          <ComboboxPreset
-            className="w-full"
-            size={globalSize}
-            label="Đội nhóm (Team)"
-            description="Bạn không có quyền thay đổi đội trong dự án này."
-            placeholder="Chọn đội..."
-            options={[
-              { value: "engineering", label: "Engineering" },
-              { value: "design", label: "Design" },
-            ]}
-            value="engineering"
-            disabled
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <ComboboxPreset
+                          className="w-full"
+                          size={globalSize}
+                          label="Đội nhóm (Team)"
+                          description="Bạn không có quyền thay đổi đội trong dự án này."
+                          placeholder="Chọn đội..."
+                          options={[
+                            { value: "engineering", label: "Engineering" },
+                            { value: "design", label: "Design" },
+                          ]}
+                          value="engineering"
+                          disabled
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Cuộn danh sách dài (Long List)"
-          description="Trải nghiệm mượt mà với danh sách ảo hoá."
-          codeString={`<ComboboxPreset
+        <ShowcaseExample title="Cuộn danh sách dài (Long List)" description="Trải nghiệm mượt mà với danh sách ảo hoá." code={`<ComboboxPreset
     className="w-full"
 
     label="Múi giờ (Timezone)"
@@ -246,30 +231,29 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
     options={Array.from({ length: 50 }).map((_, i) => ({
       value: \`utc\${i - 12}\`,
       label: \`UTC \${i - 12 > 0 ? "+" : ""}\${i - 12}:00\` }))}
-  />`}
-        >
-          <ComboboxPreset
-            className="w-full"
-            size={globalSize}
-            label="Múi giờ (Timezone)"
-            placeholder="Chọn múi giờ..."
-            searchPlaceholder="Tìm kiếm múi giờ..."
-            emptyText="Không tìm thấy múi giờ."
-            options={Array.from({ length: 50 }).map((_, i) => ({
-              value: `utc${i - 12}`,
-              label: `UTC ${i - 12 > 0 ? "+" : ""}${i - 12}:00` }))}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <ComboboxPreset
+                          className="w-full"
+                          size={globalSize}
+                          label="Múi giờ (Timezone)"
+                          placeholder="Chọn múi giờ..."
+                          searchPlaceholder="Tìm kiếm múi giờ..."
+                          emptyText="Không tìm thấy múi giờ."
+                          options={Array.from({ length: 50 }).map((_, i) => ({
+                            value: `utc${i - 12}`,
+                            label: `UTC ${i - 12 > 0 ? "+" : ""}${i - 12}:00` }))}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Tích hợp React Hook Form"
-          description="Sử dụng Controller để bắt giá trị."
-          codeString={rhfCode}
-        >
-          <ComboboxForm size={globalSize} />
-        </ExampleSection>
+        <ShowcaseExample title="Tích hợp React Hook Form" description="Sử dụng Controller để bắt giá trị." code={rhfCode} preview={
+                      <>
+              <ComboboxForm size={globalSize} />
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
@@ -280,12 +264,9 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
 // ──────────────────────────────────────────────────────────
 function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Cơ bản & Phân nhóm"
-          description="Sử dụng InputGroup, ComboboxAnchor, ComboboxGroup."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Cơ bản & Phân nhóm" description="Sử dụng InputGroup, ComboboxAnchor, ComboboxGroup." code={`<Field className="w-full">
     <FieldLabel>Tìm kiếm Framework</FieldLabel>
     <FieldContent>
       <Combobox items={allFrameworks}>
@@ -330,52 +311,50 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         
       </Combobox>
     </FieldContent>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Tìm kiếm Framework</FieldLabel>
-            <FieldContent>
-              <Combobox items={allFrameworks}>
-                <ComboboxAnchor className="w-full">
-                  <InputGroup size={globalSize} className="w-full">
-                    <ComboboxInput
-                      placeholder="Tìm framework..."
-                      render={<InputGroupInput />}
-                    />
-                    <InputGroupAddon align="end">
-                      <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
-                      <ComboboxClear />
-                    </InputGroupAddon>
-                  </InputGroup>
-                </ComboboxAnchor>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Tìm kiếm Framework</FieldLabel>
+                          <FieldContent>
+                            <Combobox items={allFrameworks}>
+                              <ComboboxAnchor className="w-full">
+                                <InputGroup size={globalSize} className="w-full">
+                                  <ComboboxInput
+                                    placeholder="Tìm framework..."
+                                    render={<InputGroupInput />}
+                                  />
+                                  <InputGroupAddon align="end">
+                                    <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
+                                    <ComboboxClear />
+                                  </InputGroupAddon>
+                                </InputGroup>
+                              </ComboboxAnchor>
 
-                  <ComboboxContent>
-                    <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
-                    <ComboboxList>
-                      <ComboboxGroup>
-                        <ComboboxLabel>Frontend</ComboboxLabel>
-                        <ComboboxItem value="react">React</ComboboxItem>
-                        <ComboboxItem value="vue">Vue</ComboboxItem>
-                        <ComboboxItem value="svelte">Svelte</ComboboxItem>
-                      </ComboboxGroup>
-                      <ComboboxSeparator />
-                      <ComboboxGroup>
-                        <ComboboxLabel>Backend</ComboboxLabel>
-                        <ComboboxItem value="express">Express</ComboboxItem>
-                        <ComboboxItem value="nest">NestJS</ComboboxItem>
-                      </ComboboxGroup>
-                    </ComboboxList>
-                  </ComboboxContent>
-                
-              </Combobox>
-            </FieldContent>
-          </Field>
-        </ExampleSection>
+                                <ComboboxContent>
+                                  <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
+                                  <ComboboxList>
+                                    <ComboboxGroup>
+                                      <ComboboxLabel>Frontend</ComboboxLabel>
+                                      <ComboboxItem value="react">React</ComboboxItem>
+                                      <ComboboxItem value="vue">Vue</ComboboxItem>
+                                      <ComboboxItem value="svelte">Svelte</ComboboxItem>
+                                    </ComboboxGroup>
+                                    <ComboboxSeparator />
+                                    <ComboboxGroup>
+                                      <ComboboxLabel>Backend</ComboboxLabel>
+                                      <ComboboxItem value="express">Express</ComboboxItem>
+                                      <ComboboxItem value="nest">NestJS</ComboboxItem>
+                                    </ComboboxGroup>
+                                  </ComboboxList>
+                                </ComboboxContent>
+                              
+                            </Combobox>
+                          </FieldContent>
+                        </Field>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Chọn nhiều (Multi-select Chips)"
-          description="Sử dụng ComboboxChips và ComboboxChip thay cho Input."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Chọn nhiều (Multi-select Chips)" description="Sử dụng ComboboxChips và ComboboxChip thay cho Input." code={`<Field className="w-full">
     <FieldLabel>Gán thẻ (Tags)</FieldLabel>
     <FieldContent>
       <Combobox items={tagItems} multiple>
@@ -412,46 +391,44 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
     <FieldDescription>
       Bạn có thể chọn nhiều thẻ cùng lúc.
     </FieldDescription>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Gán thẻ (Tags)</FieldLabel>
-            <FieldContent>
-              <Combobox items={tagItems} multiple>
-                <ComboboxChips size={globalSize}>
-                  <ComboboxChip value="bug">Lỗi (Bug)</ComboboxChip>
-                  <ComboboxChip value="feature">
-                    Tính năng (Feature)
-                  </ComboboxChip>
-                  <ComboboxChipsInput placeholder="Thêm thẻ..." />
-                </ComboboxChips>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Gán thẻ (Tags)</FieldLabel>
+                          <FieldContent>
+                            <Combobox items={tagItems} multiple>
+                              <ComboboxChips size={globalSize}>
+                                <ComboboxChip value="bug">Lỗi (Bug)</ComboboxChip>
+                                <ComboboxChip value="feature">
+                                  Tính năng (Feature)
+                                </ComboboxChip>
+                                <ComboboxChipsInput placeholder="Thêm thẻ..." />
+                              </ComboboxChips>
 
-                  <ComboboxContent>
-                    <ComboboxEmpty>Không tìm thấy thẻ.</ComboboxEmpty>
-                    <ComboboxList>
-                      <ComboboxItem value="bug">Lỗi (Bug)</ComboboxItem>
-                      <ComboboxItem value="feature">
-                        Tính năng (Feature)
-                      </ComboboxItem>
-                      <ComboboxItem value="enhancement">Cải thiện</ComboboxItem>
-                      <ComboboxItem value="docs">Tài liệu</ComboboxItem>
-                    </ComboboxList>
-                  </ComboboxContent>
-                
-              </Combobox>
-            </FieldContent>
-            <FieldDescription>
-              Bạn có thể chọn nhiều thẻ cùng lúc.
-            </FieldDescription>
-          </Field>
-        </ExampleSection>
+                                <ComboboxContent>
+                                  <ComboboxEmpty>Không tìm thấy thẻ.</ComboboxEmpty>
+                                  <ComboboxList>
+                                    <ComboboxItem value="bug">Lỗi (Bug)</ComboboxItem>
+                                    <ComboboxItem value="feature">
+                                      Tính năng (Feature)
+                                    </ComboboxItem>
+                                    <ComboboxItem value="enhancement">Cải thiện</ComboboxItem>
+                                    <ComboboxItem value="docs">Tài liệu</ComboboxItem>
+                                  </ComboboxList>
+                                </ComboboxContent>
+                              
+                            </Combobox>
+                          </FieldContent>
+                          <FieldDescription>
+                            Bạn có thể chọn nhiều thẻ cùng lúc.
+                          </FieldDescription>
+                        </Field>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Disabled thủ công"
-          description="Truyền disabled vào InputGroupInput và ComboboxTrigger."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Disabled thủ công" description="Truyền disabled vào InputGroupInput và ComboboxTrigger." code={`<Field className="w-full">
     <FieldLabel>Tìm kiếm (Disabled)</FieldLabel>
     <FieldContent>
       <Combobox items={["react"]}>
@@ -481,43 +458,41 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         
       </Combobox>
     </FieldContent>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Tìm kiếm (Disabled)</FieldLabel>
-            <FieldContent>
-              <Combobox items={["react"]}>
-                <ComboboxAnchor className="w-full">
-                  <InputGroup size={globalSize} className="w-full">
-                    <ComboboxInput
-                      placeholder="Tìm kiếm..."
-                      disabled
-                      render={<InputGroupInput disabled />}
-                    />
-                    <InputGroupAddon align="end">
-                      <ComboboxTrigger
-                        className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50"
-                        disabled
-                      />
-                    </InputGroupAddon>
-                  </InputGroup>
-                </ComboboxAnchor>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Tìm kiếm (Disabled)</FieldLabel>
+                          <FieldContent>
+                            <Combobox items={["react"]}>
+                              <ComboboxAnchor className="w-full">
+                                <InputGroup size={globalSize} className="w-full">
+                                  <ComboboxInput
+                                    placeholder="Tìm kiếm..."
+                                    disabled
+                                    render={<InputGroupInput disabled />}
+                                  />
+                                  <InputGroupAddon align="end">
+                                    <ComboboxTrigger
+                                      className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50"
+                                      disabled
+                                    />
+                                  </InputGroupAddon>
+                                </InputGroup>
+                              </ComboboxAnchor>
 
-                  <ComboboxContent>
-                    <ComboboxList>
-                      <ComboboxItem value="react">React</ComboboxItem>
-                    </ComboboxList>
-                  </ComboboxContent>
-                
-              </Combobox>
-            </FieldContent>
-          </Field>
-        </ExampleSection>
+                                <ComboboxContent>
+                                  <ComboboxList>
+                                    <ComboboxItem value="react">React</ComboboxItem>
+                                  </ComboboxList>
+                                </ComboboxContent>
+                              
+                            </Combobox>
+                          </FieldContent>
+                        </Field>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Trạng thái Lỗi (Invalid)"
-          description="Gắn aria-invalid vào ô nhập liệu."
-          codeString={`<Field data-invalid={true} className="w-full">
+        <ShowcaseExample title="Trạng thái Lỗi (Invalid)" description="Gắn aria-invalid vào ô nhập liệu." code={`<Field data-invalid={true} className="w-full">
     <FieldLabel>Mã giảm giá</FieldLabel>
     <FieldContent>
       <Combobox items={["sale20", "sale50"]}>
@@ -552,46 +527,44 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
       </Combobox>
     </FieldContent>
     <FieldError>Mã này đã hết hạn.</FieldError>
-  </Field>`}
-        >
-          <Field size={globalSize} data-invalid={true} className="w-full">
-            <FieldLabel>Mã giảm giá</FieldLabel>
-            <FieldContent>
-              <Combobox items={["sale20", "sale50"]}>
-                <ComboboxAnchor className="w-full">
-                  <InputGroup size={globalSize} className="w-full">
-                    <ComboboxInput
-                      placeholder="Nhập mã..."
-                      aria-invalid={true}
-                      render={<InputGroupInput />}
-                    />
-                    <InputGroupAddon align="end">
-                      <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
-                      <ComboboxClear />
-                    </InputGroupAddon>
-                  </InputGroup>
-                </ComboboxAnchor>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} data-invalid={true} className="w-full">
+                          <FieldLabel>Mã giảm giá</FieldLabel>
+                          <FieldContent>
+                            <Combobox items={["sale20", "sale50"]}>
+                              <ComboboxAnchor className="w-full">
+                                <InputGroup size={globalSize} className="w-full">
+                                  <ComboboxInput
+                                    placeholder="Nhập mã..."
+                                    aria-invalid={true}
+                                    render={<InputGroupInput />}
+                                  />
+                                  <InputGroupAddon align="end">
+                                    <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
+                                    <ComboboxClear />
+                                  </InputGroupAddon>
+                                </InputGroup>
+                              </ComboboxAnchor>
 
-                  <ComboboxContent>
-                    <ComboboxEmpty>Không tìm thấy mã.</ComboboxEmpty>
-                    <ComboboxList>
-                      <ComboboxItem value="sale20">Giảm 20%</ComboboxItem>
-                      <ComboboxItem value="sale50">Giảm 50%</ComboboxItem>
-                    </ComboboxList>
-                  </ComboboxContent>
-                
-              </Combobox>
-            </FieldContent>
-            <FieldError>Mã này đã hết hạn.</FieldError>
-          </Field>
-        </ExampleSection>
+                                <ComboboxContent>
+                                  <ComboboxEmpty>Không tìm thấy mã.</ComboboxEmpty>
+                                  <ComboboxList>
+                                    <ComboboxItem value="sale20">Giảm 20%</ComboboxItem>
+                                    <ComboboxItem value="sale50">Giảm 50%</ComboboxItem>
+                                  </ComboboxList>
+                                </ComboboxContent>
+                              
+                            </Combobox>
+                          </FieldContent>
+                          <FieldError>Mã này đã hết hạn.</FieldError>
+                        </Field>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Giao diện Nút (With Trigger)"
-          description="Combobox dùng nút bấm (giống Select) thay vì ô nhập chữ (Input)."
-          codeString={`<Field className="w-full">
+        <ShowcaseExample title="Giao diện Nút (With Trigger)" description="Combobox dùng nút bấm (giống Select) thay vì ô nhập chữ (Input)." code={`<Field className="w-full">
     <FieldLabel>Chọn Engine</FieldLabel>
     <FieldContent>
       <Combobox items={engineItems}>
@@ -621,46 +594,42 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         
       </Combobox>
     </FieldContent>
-  </Field>`}
-        >
-          <Field size={globalSize} className="w-full">
-            <FieldLabel>Chọn Engine</FieldLabel>
-            <FieldContent>
-              <Combobox items={engineItems}>
-                <ComboboxTrigger className="w-full justify-between flex items-center border border-border rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-                  <ComboboxValue placeholder="Chọn một engine" />
-                </ComboboxTrigger>
+  </Field>`} preview={
+                      <>
+              <Field size={globalSize} className="w-full">
+                          <FieldLabel>Chọn Engine</FieldLabel>
+                          <FieldContent>
+                            <Combobox items={engineItems}>
+                              <ComboboxTrigger className="w-full justify-between flex items-center border border-border rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+                                <ComboboxValue placeholder="Chọn một engine" />
+                              </ComboboxTrigger>
 
-                  <ComboboxContent>
-                    <div className="p-1">
-                      <InputGroup size={globalSize} className="w-full">
-                        <ComboboxInput
-                          placeholder="Tìm engine..."
-                          render={<InputGroupInput />}
-                        />
-                      </InputGroup>
-                    </div>
-                    <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
-                    <ComboboxList>
-                      <ComboboxItem value="v8">V8 (Chrome)</ComboboxItem>
-                      <ComboboxItem value="spidermonkey">
-                        SpiderMonkey (Firefox)
-                      </ComboboxItem>
-                    </ComboboxList>
-                  </ComboboxContent>
-                
-              </Combobox>
-            </FieldContent>
-          </Field>
-        </ExampleSection>
+                                <ComboboxContent>
+                                  <div className="p-1">
+                                    <InputGroup size={globalSize} className="w-full">
+                                      <ComboboxInput
+                                        placeholder="Tìm engine..."
+                                        render={<InputGroupInput />}
+                                      />
+                                    </InputGroup>
+                                  </div>
+                                  <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
+                                  <ComboboxList>
+                                    <ComboboxItem value="v8">V8 (Chrome)</ComboboxItem>
+                                    <ComboboxItem value="spidermonkey">
+                                      SpiderMonkey (Firefox)
+                                    </ComboboxItem>
+                                  </ComboboxList>
+                                </ComboboxContent>
+                              
+                            </Combobox>
+                          </FieldContent>
+                        </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">
@@ -696,7 +665,6 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
       </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">
@@ -730,93 +698,89 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         cụm <DocsCode>{\`<ComboboxChips />\`}</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">
-                  Single Select tự động hoàn thành
-                </h3>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              Bạn cần một form chọn Thành phố. Số lượng thành phố quá lớn nên
-              không dùng Select được, phải dùng Combobox để gõ tìm.{" "}
-              <DocsCode>ComboboxPreset</DocsCode> sinh ra để giải quyết đúng bài
-              toán chọn 1 giá trị từ tập lớn này.
-            </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">
+                            Single Select tự động hoàn thành
+                          </h3>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">
+                        Bạn cần một form chọn Thành phố. Số lượng thành phố quá lớn nên
+                        không dùng Select được, phải dùng Combobox để gõ tìm.{" "}
+                        <DocsCode>ComboboxPreset</DocsCode> sinh ra để giải quyết đúng bài
+                        toán chọn 1 giá trị từ tập lớn này.
+                      </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">
-                  Gán thẻ (Multi-select)
-                </h3>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              Bạn làm form tạo bài viết mới và cần gán nhiều Thẻ (Tags) cho bài
-              viết. Macro không hỗ trợ Multi-select. Bạn buộc phải dùng Micro
-              kết hợp với cụm <DocsCode>{`<ComboboxChips />`}</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">
+                            Gán thẻ (Multi-select)
+                          </h3>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">
+                        Bạn làm form tạo bài viết mới và cần gán nhiều Thẻ (Tags) cho bài
+                        viết. Macro không hỗ trợ Multi-select. Bạn buộc phải dùng Micro
+                        kết hợp với cụm <DocsCode>{`<ComboboxChips />`}</DocsCode>.
+                      </p>
+                    </div>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function ComboboxShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Combobox"
       description="Thành phần mở rộng của Select, cho phép người dùng gõ phím để tìm kiếm và lọc qua các tập dữ liệu lớn."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để chọn một hoặc nhiều giá trị từ một danh sách lớn. Khác với
@@ -825,14 +789,8 @@ export default function ComboboxShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <ComboboxMicroShowcase globalSize={globalSize} /> },
-        {
-          label: "Macro (Preset)",
-          content: <ComboboxMacroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <ComboboxMicroShowcase globalSize={globalSize} /> }}
+      macro={{ content: <ComboboxMacroShowcase globalSize={globalSize} /> }}
     />
   );
 }