gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/separator.tsx

@@ -3,22 +3,17 @@ import {
   DocsCode,
   DocsH3,
   DocsP,
-  ExampleSection,
+  DocsUl,
+  DocsLi,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Micro Content (Only Micro exists)
-// ──────────────────────────────────────────────────────────
 function SeparatorMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Ngang (Horizontal)"
-        description="Sử dụng để phân tách các khối nội dung từ trên xuống dưới."
-        fullWidth
-        codeString={`<div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
+    <div className="space-y-10">
+      <ShowcaseExample title="Ngang (Horizontal)" description="Sử dụng để phân tách các khối nội dung từ trên xuống dưới." code={`<div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
     <div className="space-y-1">
       <h4 className="text-sm font-medium leading-none">
         Gladvn UI
@@ -31,88 +26,82 @@ function SeparatorMicroShowcase() {
     <div className="text-sm text-muted-foreground">
       Cập nhật lần cuối: Hôm nay
     </div>
-  </div>`}
-      >
-        <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
-          <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Gladvn UI</h4>
-            <p className="text-sm text-muted-foreground">
-              Bộ UI Component mã nguồn mở.
-            </p>
-          </div>
-          <Separator className="my-4" />
-          <div className="text-sm text-muted-foreground">
-            Cập nhật lần cuối: Hôm nay
-          </div>
-        </div>
-      </ExampleSection>
+  </div>`} preview={
+                  <>
+          <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
+                    <div className="space-y-1">
+                      <h4 className="text-sm font-medium leading-none">Gladvn UI</h4>
+                      <p className="text-sm text-muted-foreground">
+                        Bộ UI Component mã nguồn mở.
+                      </p>
+                    </div>
+                    <Separator className="my-4" />
+                    <div className="text-sm text-muted-foreground">
+                      Cập nhật lần cuối: Hôm nay
+                    </div>
+                  </div>
+                  </>
+                } />
 
-      <ExampleSection
-        label="Dọc (Vertical)"
-        description="Sử dụng để phân tách các mục nằm ngang (như menu, thanh công cụ)."
-        codeString={`<div className="flex h-5 items-center space-x-4 text-sm">
+      <ShowcaseExample title="Dọc (Vertical)" description="Sử dụng để phân tách các mục nằm ngang (như menu, thanh công cụ)." code={`<div className="flex h-5 items-center space-x-4 text-sm">
     <div className="font-medium hover:underline cursor-pointer">
       Blog
     </div>
-    <Separator orientation="vertical" />
+    <Separator orientation="vertical" className="h-5" />
     <div className="font-medium hover:underline cursor-pointer">
       Tài liệu
     </div>
-    <Separator orientation="vertical" />
+    <Separator orientation="vertical" className="h-5" />
     <div className="font-medium hover:underline cursor-pointer">
       Mã nguồn
     </div>
-  </div>`}
-      >
-        <div className="flex h-5 items-center space-x-4 text-sm">
-          <div className="font-medium hover:underline cursor-pointer">Blog</div>
-          <Separator orientation="vertical" />
-          <div className="font-medium hover:underline cursor-pointer">
-            Tài liệu
-          </div>
-          <Separator orientation="vertical" />
-          <div className="font-medium hover:underline cursor-pointer">
-            Mã nguồn
-          </div>
-        </div>
-      </ExampleSection>
-      <ExampleSection
-        label="Decorative vs Semantic"
-        description='Semantic (mặc định) được screen reader đọc. Truyền aria-hidden="true" khi Separator chỉ mang tính trang trí thuần.'
-        codeString={`{/* Semantic — screen reader đọc được */}
+  </div>`} preview={
+                  <>
+          <div className="flex h-5 items-center space-x-4 text-sm">
+                    <div className="font-medium hover:underline cursor-pointer">Blog</div>
+                    <Separator orientation="vertical" className="h-5" />
+                    <div className="font-medium hover:underline cursor-pointer">
+                      Tài liệu
+                    </div>
+                    <Separator orientation="vertical" className="h-5" />
+                    <div className="font-medium hover:underline cursor-pointer">
+                      Mã nguồn
+                    </div>
+                  </div>
+                  </>
+                } />
+      <ShowcaseExample title="Decorative vs Semantic" description='Semantic (mặc định) được screen reader đọc. Truyền aria-hidden="true" khi Separator chỉ mang tính trang trí thuần.' code={`{/* Semantic — screen reader đọc được */}
   <Separator />
 
   {/* Decorative — chỉ là đường kẻ trực quan */}
-  <Separator aria-hidden="true" />`}
-      >
-        <div className="flex flex-col gap-6 w-full max-w-sm">
-          <div>
-            <p className="text-xs text-muted-foreground mb-2">
-              Semantic (mặc định — screen reader nhận ra)
-            </p>
-            <Separator />
-          </div>
-          <div>
-            <p className="text-xs text-muted-foreground mb-2">
-              Decorative — <code className="text-xs">aria-hidden="true"</code>
-            </p>
-            <Separator aria-hidden="true" />
-          </div>
-        </div>
-      </ExampleSection>
+  <Separator aria-hidden="true" />`} preview={
+                  <>
+          <div className="flex flex-col gap-6 w-full max-w-sm">
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-2">
+                        Semantic (mặc định — screen reader nhận ra)
+                      </p>
+                      <Separator />
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-2">
+                        Decorative — <code className="text-xs">aria-hidden="true"</code>
+                      </p>
+                      <Separator aria-hidden="true" />
+                    </div>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function SeparatorShowcase() {
   return (
     <Showcase
       title="Separator"
       description="Thành phần phân cách trực quan hoặc ngữ nghĩa giữa các khối nội dung (Đường kẻ)."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Separator (Phân cách)</DocsH3>
           <DocsP>
@@ -120,11 +109,24 @@ export default function SeparatorShowcase() {
             nó chỉ là một đường kẻ phân tách giao diện. Mặc định là đường kẻ
             ngang (<DocsCode>orientation="horizontal"</DocsCode>).
           </DocsP>
+
+          <div className="mt-6 rounded-lg border border-amber-500/20 bg-amber-500/10 p-4">
+            <h4 className="mb-2 text-sm font-semibold text-amber-900 dark:text-amber-400">⚠️ Lưu ý quan trọng về Layout (Auto Layout/Flexbox)</h4>
+            <p className="mb-3 text-sm text-amber-900/90 dark:text-amber-200/90">
+              Separator rất "nhạy cảm" với cấu trúc flex bên ngoài. Nếu bạn thấy đường kẻ "biến mất" (kích thước bị bóp về 0px), hãy chú ý:
+            </p>
+            <DocsUl className="mb-0 text-sm text-amber-900/90 dark:text-amber-200/90">
+              <DocsLi>
+                <strong>Horizontal (Kẻ ngang):</strong> Component này mặc định chỉ cấp `h-px`. Vì là thẻ block nên nó tự giãn full ngang, tuy nhiên nếu ném vào <DocsCode className="bg-transparent border-amber-500/30">flex-row</DocsCode> tự do mà không set flex basis, width sẽ bị ép thành <DocsCode className="bg-transparent border-amber-500/30">0px</DocsCode>. Hãy bổ sung <DocsCode className="bg-transparent border-amber-500/30">w-full</DocsCode> hoặc <DocsCode className="bg-transparent border-amber-500/30">flex-1</DocsCode> nếu cần thiết.
+              </DocsLi>
+              <DocsLi>
+                <strong>Vertical (Kẻ dọc):</strong> Component chỉ cung cấp `w-px`. Nó hoàn toàn <strong>KHÔNG</strong> tự nội suy chiều cao (no self-stretch, no h-full). Do đó, bạn <strong>BẮT BUỘC</strong> phải truyền chiều cao rõ ràng từ bên ngoài thông qua <DocsCode className="bg-transparent border-amber-500/30">className</DocsCode> (Ví dụ: <DocsCode className="bg-transparent border-amber-500/30">h-5</DocsCode>, <DocsCode className="bg-transparent border-amber-500/30">h-full</DocsCode>, hoặc <DocsCode className="bg-transparent border-amber-500/30">self-stretch</DocsCode>).
+              </DocsLi>
+            </DocsUl>
+          </div>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <SeparatorMicroShowcase /> },
-      ]}
+      micro={{ content: <SeparatorMicroShowcase /> }}
     />
   );
 }