gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/kbd.tsx

@@ -27,59 +27,47 @@ import {
   DocsCode,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function KbdMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      {/* ── Kbd đơn ── */}
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Kbd — Phím đơn"
-          description="Hiển thị một phím bàn phím riêng lẻ dùng thẻ <kbd> semantic."
-          codeString={`<p className="text-sm text-muted-foreground">
+        <ShowcaseExample title="Kbd — Phím đơn" description="Hiển thị một phím bàn phím riêng lẻ dùng thẻ <kbd> semantic." code={`<p className="text-sm text-muted-foreground">
     Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
-  </p>`}
-        >
-          <p className="text-sm text-muted-foreground">
-            Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
-          </p>
-        </ExampleSection>
+  </p>`} preview={
+                      <>
+              <p className="text-sm text-muted-foreground">
+                          Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
+                        </p>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="KbdGroup — Tổ hợp phím"
-          description="Nhóm nhiều phím cạnh nhau với khoảng cách đều. Dùng khi biểu diễn tổ hợp phím như Ctrl+Shift+P."
-          codeString={`<p className="text-sm text-muted-foreground flex items-center gap-2">
+        <ShowcaseExample title="KbdGroup — Tổ hợp phím" description="Nhóm nhiều phím cạnh nhau với khoảng cách đều. Dùng khi biểu diễn tổ hợp phím như Ctrl+Shift+P." code={`<p className="text-sm text-muted-foreground flex items-center gap-2">
     Open Command Palette
     <KbdGroup>
       <Kbd>⌘</Kbd>
       <Kbd>⇧</Kbd>
       <Kbd>P</Kbd>
     </KbdGroup>
-  </p>`}
-        >
-          <p className="text-sm text-muted-foreground flex items-center gap-2">
-            Open Command Palette
-            <KbdGroup>
-              <Kbd>⌘</Kbd>
-              <Kbd>⇧</Kbd>
-              <Kbd>P</Kbd>
-            </KbdGroup>
-          </p>
-        </ExampleSection>
+  </p>`} preview={
+                      <>
+              <p className="text-sm text-muted-foreground flex items-center gap-2">
+                          Open Command Palette
+                          <KbdGroup>
+                            <Kbd>⌘</Kbd>
+                            <Kbd>⇧</Kbd>
+                            <Kbd>P</Kbd>
+                          </KbdGroup>
+                        </p>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── Ký tự & Symbols ── */}
-      <ExampleSection
-        label="Ký tự & Symbols"
-        description="Kbd có thể chứa ký tự Unicode, chữ cái, số hoặc tên phím dài."
-        codeString={`<div className="flex flex-wrap items-center gap-2">
+      <ShowcaseExample title="Ký tự & Symbols" description="Kbd có thể chứa ký tự Unicode, chữ cái, số hoặc tên phím dài." code={`<div className="flex flex-wrap items-center gap-2">
     <Kbd>Ctrl</Kbd>
     <Kbd>Alt</Kbd>
     <Kbd>⌘</Kbd>
@@ -90,27 +78,24 @@ function KbdMicroShowcase() {
     <Kbd>Esc</Kbd>
     <Kbd>F1</Kbd>
     <Kbd>→</Kbd>
-  </div>`}
-      >
-        <div className="flex flex-wrap items-center gap-2">
-          <Kbd>Ctrl</Kbd>
-          <Kbd>Alt</Kbd>
-          <Kbd>⌘</Kbd>
-          <Kbd>⇧</Kbd>
-          <Kbd>⌫</Kbd>
-          <Kbd>↵</Kbd>
-          <Kbd>Tab</Kbd>
-          <Kbd>Esc</Kbd>
-          <Kbd>F1</Kbd>
-          <Kbd>→</Kbd>
-        </div>
-      </ExampleSection>
+  </div>`} preview={
+                  <>
+          <div className="flex flex-wrap items-center gap-2">
+                    <Kbd>Ctrl</Kbd>
+                    <Kbd>Alt</Kbd>
+                    <Kbd>⌘</Kbd>
+                    <Kbd>⇧</Kbd>
+                    <Kbd>⌫</Kbd>
+                    <Kbd>↵</Kbd>
+                    <Kbd>Tab</Kbd>
+                    <Kbd>Esc</Kbd>
+                    <Kbd>F1</Kbd>
+                    <Kbd>→</Kbd>
+                  </div>
+                  </>
+                } />
 
-      {/* ── Kbd trong Tooltip ── */}
-      <ExampleSection
-        label="Kbd trong Tooltip"
-        description="Kbd tự đổi màu khi nằm trong TooltipContent — màu nền sáng trên nền tối của tooltip, không cần thêm class."
-        codeString={`<TooltipProvider>
+      <ShowcaseExample title="Kbd trong Tooltip" description="Kbd tự đổi màu khi nằm trong TooltipContent — màu nền sáng trên nền tối của tooltip, không cần thêm class." code={`<TooltipProvider>
     <Tooltip>
       <TooltipTrigger
         render={
@@ -124,52 +109,49 @@ function KbdMicroShowcase() {
         <Kbd>S</Kbd>
       </TooltipContent>
     </Tooltip>
-  </TooltipProvider>`}
-      >
-        <div className="flex items-center gap-3">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" iconOnly>
-                    <SaveIcon aria-hidden="true" />
-                  </Button>
-                }
-              />
-              
-                <TooltipContent>
-                  Lưu tài liệu <Kbd>⌘</Kbd>
-                  <Kbd>S</Kbd>
-                </TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
+  </TooltipProvider>`} preview={
+                  <>
+          <div className="flex items-center gap-3">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button variant="outline" iconOnly>
+                              <SaveIcon aria-hidden="true" />
+                            </Button>
+                          }
+                        />
+                        
+                          <TooltipContent>
+                            Lưu tài liệu <Kbd>⌘</Kbd>
+                            <Kbd>S</Kbd>
+                          </TooltipContent>
+                        
+                      </Tooltip>
+                    </TooltipProvider>
 
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button variant="outline" iconOnly>
-                    <CopyIcon aria-hidden="true" />
-                  </Button>
-                }
-              />
-              
-                <TooltipContent>
-                  Sao chép <Kbd>⌘</Kbd>
-                  <Kbd>C</Kbd>
-                </TooltipContent>
-              
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </ExampleSection>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <Button variant="outline" iconOnly>
+                              <CopyIcon aria-hidden="true" />
+                            </Button>
+                          }
+                        />
+                        
+                          <TooltipContent>
+                            Sao chép <Kbd>⌘</Kbd>
+                            <Kbd>C</Kbd>
+                          </TooltipContent>
+                        
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                  </>
+                } />
 
-      {/* ── Use case thực tế: Menu với shortcuts ── */}
-      <ExampleSection
-        label="Use case — Menu với Keyboard Shortcut"
-        description="Kbd dùng trong DropdownMenuItem để hiển thị phím tắt bên cạnh label — pattern phổ biến trong text editor, IDE, Figma."
-        codeString={`<DropdownMenuItem>
+      <ShowcaseExample title="Use case — Menu với Keyboard Shortcut" description="Kbd dùng trong DropdownMenuItem để hiển thị phím tắt bên cạnh label — pattern phổ biến trong text editor, IDE, Figma." code={`<DropdownMenuItem>
     <FileIcon />
     New File
     <KbdGroup className="ml-auto">
@@ -185,93 +167,88 @@ function KbdMicroShowcase() {
       <Kbd>⌘</Kbd>
       <Kbd>S</Kbd>
     </KbdGroup>
-  </DropdownMenuItem>`}
-      >
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={<Button variant="outline">File menu</Button>}
-          />
-          
-            <DropdownMenuContent className="w-56">
-              <DropdownMenuItem>
-                <FilePlusIcon aria-hidden="true" />
-                New File
-                <KbdGroup className="ml-auto">
-                  <Kbd>⌘</Kbd>
-                  <Kbd>N</Kbd>
-                </KbdGroup>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <FolderOpenIcon aria-hidden="true" />
-                Open...
-                <KbdGroup className="ml-auto">
-                  <Kbd>⌘</Kbd>
-                  <Kbd>O</Kbd>
-                </KbdGroup>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                <SaveIcon aria-hidden="true" />
-                Save
-                <KbdGroup className="ml-auto">
-                  <Kbd>⌘</Kbd>
-                  <Kbd>S</Kbd>
-                </KbdGroup>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <FileIcon aria-hidden="true" />
-                Save As...
-                <KbdGroup className="ml-auto">
-                  <Kbd>⌘</Kbd>
-                  <Kbd>⇧</Kbd>
-                  <Kbd>S</Kbd>
-                </KbdGroup>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          
-        </DropdownMenu>
-      </ExampleSection>
+  </DropdownMenuItem>`} preview={
+                  <>
+          <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={<Button variant="outline">File menu</Button>}
+                    />
+                    
+                      <DropdownMenuContent className="w-56">
+                        <DropdownMenuItem>
+                          <FilePlusIcon aria-hidden="true" />
+                          New File
+                          <KbdGroup className="ml-auto">
+                            <Kbd>⌘</Kbd>
+                            <Kbd>N</Kbd>
+                          </KbdGroup>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <FolderOpenIcon aria-hidden="true" />
+                          Open...
+                          <KbdGroup className="ml-auto">
+                            <Kbd>⌘</Kbd>
+                            <Kbd>O</Kbd>
+                          </KbdGroup>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                          <SaveIcon aria-hidden="true" />
+                          Save
+                          <KbdGroup className="ml-auto">
+                            <Kbd>⌘</Kbd>
+                            <Kbd>S</Kbd>
+                          </KbdGroup>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <FileIcon aria-hidden="true" />
+                          Save As...
+                          <KbdGroup className="ml-auto">
+                            <Kbd>⌘</Kbd>
+                            <Kbd>⇧</Kbd>
+                            <Kbd>S</Kbd>
+                          </KbdGroup>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    
+                  </DropdownMenu>
+                  </>
+                } />
 
-      {/* ── Gợi ý inline trong form ── */}
-      <ExampleSection
-        label="Gợi ý inline trong văn bản"
-        description="Kbd dùng inline trong đoạn văn bản để gợi ý phím tắt — phổ biến trong help text, onboarding, documentation."
-        codeString={`<p className="text-sm text-muted-foreground">
+      <ShowcaseExample title="Gợi ý inline trong văn bản" description="Kbd dùng inline trong đoạn văn bản để gợi ý phím tắt — phổ biến trong help text, onboarding, documentation." code={`<p className="text-sm text-muted-foreground">
     Nhấn <Kbd>Enter</Kbd> để gửi, hoặc{" "}
     <KbdGroup>
       <Kbd>⇧</Kbd>
       <Kbd>Enter</Kbd>
     </KbdGroup>{" "}
     để xuống dòng.
-  </p>`}
-      >
-        <div className="space-y-3">
-          <p className="text-sm text-muted-foreground">
-            Nhấn <Kbd>Enter</Kbd> để gửi, hoặc{" "}
-            <KbdGroup>
-              <Kbd>⇧</Kbd>
-              <Kbd>Enter</Kbd>
-            </KbdGroup>{" "}
-            để xuống dòng.
-          </p>
-          <p className="text-sm text-muted-foreground">
-            Dùng <Kbd>Tab</Kbd> để chuyển trường, <Kbd>Esc</Kbd> để huỷ.
-          </p>
-        </div>
-      </ExampleSection>
+  </p>`} preview={
+                  <>
+          <div className="space-y-3">
+                    <p className="text-sm text-muted-foreground">
+                      Nhấn <Kbd>Enter</Kbd> để gửi, hoặc{" "}
+                      <KbdGroup>
+                        <Kbd>⇧</Kbd>
+                        <Kbd>Enter</Kbd>
+                      </KbdGroup>{" "}
+                      để xuống dòng.
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      Dùng <Kbd>Tab</Kbd> để chuyển trường, <Kbd>Esc</Kbd> để huỷ.
+                    </p>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point (export default)
-// ──────────────────────────────────────────────────────────
 export default function KbdShowcase() {
   return (
     <Showcase
       title="Keyboard Shortcut"
       description="Hiển thị phím tắt bàn phím dạng inline với thẻ HTML semantic <kbd>."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             <DocsCode>Kbd</DocsCode> dùng thẻ HTML semantic{" "}
@@ -286,7 +263,7 @@ export default function KbdShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[{ label: "Micro (Primitive)", content: <KbdMicroShowcase /> }]}
+      micro={{ content: <KbdMicroShowcase /> }}
     />
   );
 }

package/src/dev/showcase/label.tsx

@@ -3,60 +3,48 @@ import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsP,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Default"
-        description="Cách sử dụng nhãn tiêu chuẩn."
-        codeString={`<Label htmlFor="terms">Accept terms and conditions</Label>`}
-      >
-        <Label htmlFor="terms" size={globalSize}>
-          Accept terms and conditions
-        </Label>
-      </ExampleSection>
+    <div className="space-y-10">
+      <ShowcaseExample title="Default" description="Cách sử dụng nhãn tiêu chuẩn." code={`<Label htmlFor="terms">Chấp nhận điều khoản và điều kiện</Label>`} preview={
+                  <>
+          <Label htmlFor="terms" size={globalSize}>
+                    Chấp nhận điều khoản và điều kiện
+                  </Label>
+                  </>
+                } />
 
-      <ExampleSection
-        label="Disabled"
-        description="Trạng thái bị vô hiệu hóa khi nằm trong group bị vô hiệu."
-        codeString={`<div data-disabled="true" className="group">
-    <Label htmlFor="disabled">This label is disabled</Label>
-  </div>`}
-      >
-        <div data-disabled="true" className="group">
-          <Label htmlFor="disabled" size={globalSize}>
-            This label is disabled
-          </Label>
-        </div>
-      </ExampleSection>
+      <ShowcaseExample title="Disabled" description="Trạng thái bị vô hiệu hóa khi nằm trong group bị vô hiệu." code={`<div data-disabled="true" className="group">
+    <Label htmlFor="disabled">Nhãn này đã bị khóa</Label>
+  </div>`} preview={
+                  <>
+          <div data-disabled="true" className="group">
+                    <Label htmlFor="disabled" size={globalSize}>
+                      Nhãn này đã bị khóa
+                    </Label>
+                  </div>
+                  </>
+                } />
 
-      <ExampleSection
-        label="Error State"
-        description="Hiển thị màu đỏ khi nằm trong group bị lỗi (data-invalid)."
-        codeString={`<div data-invalid="true" className="group">
-    <Label htmlFor="error">Email is required</Label>
-  </div>`}
-      >
-        <div data-invalid="true" className="group">
-          <Label htmlFor="error" size={globalSize}>
-            Email is required
-          </Label>
-        </div>
-      </ExampleSection>
+      <ShowcaseExample title="Error State" description="Hiển thị màu đỏ khi nằm trong group bị lỗi (data-invalid)." code={`<div data-invalid="true" className="group">
+    <Label htmlFor="error">Email là bắt buộc</Label>
+  </div>`} preview={
+                  <>
+          <div data-invalid="true" className="group">
+                    <Label htmlFor="error" size={globalSize}>
+                      Email là bắt buộc
+                    </Label>
+                  </div>
+                  </>
+                } />
 
-      <ExampleSection
-        label="With Peer Input"
-        description="Phản hồi trạng thái disabled của input liền kề (dùng class peer)."
-        codeString={`<div className="flex items-center gap-2">
+      <ShowcaseExample title="With Peer Input" description="Phản hồi trạng thái disabled của input liền kề (dùng class peer)." code={`<div className="flex items-center gap-2">
     <input
       type="checkbox"
       disabled
@@ -64,36 +52,34 @@ function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
       className="peer w-4 h-4"
     />
     <Label htmlFor="peer-disabled">
-      Disabled by peer checkbox
+      Bị khóa bởi peer checkbox
     </Label>
-  </div>`}
-      >
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            disabled
-            id="peer-disabled"
-            className="peer w-4 h-4"
-          />
-          <Label htmlFor="peer-disabled" size={globalSize}>
-            Disabled by peer checkbox
-          </Label>
-        </div>
-      </ExampleSection>
+  </div>`} preview={
+                  <>
+          <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      disabled
+                      id="peer-disabled"
+                      className="peer w-4 h-4"
+                    />
+                    <Label htmlFor="peer-disabled" size={globalSize}>
+                      Bị khóa bởi peer checkbox
+                    </Label>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point (export default)
-// ──────────────────────────────────────────────────────────
 export default function LabelShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Label"
       description="Nhãn gắn với form control, cải thiện accessibility."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Label được sử dụng để gắn nhãn cho các trường nhập liệu form. Nó cải
@@ -103,11 +89,7 @@ export default function LabelShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <LabelMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <LabelMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }