gladvn 0.2.35 → 0.2.37

package/src/dev/showcase/navigation-menu.tsx

@@ -13,7 +13,7 @@ import {
 } from "../../components/micro/navigation-menu";
 import {
   DocsP,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -47,16 +47,10 @@ const ListItem = React.forwardRef<
 });
 ListItem.displayName = "ListItem";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function NavigationMenuMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Default"
-        description="Điều hướng đa cấp với bảng thả xuống."
-        codeString={`<NavigationMenu>
+    <div className="space-y-10">
+      <ShowcaseExample title="Mặc định" description="Điều hướng đa cấp với bảng thả xuống." code={`<NavigationMenu>
     <NavigationMenuList>
       <NavigationMenuItem>
         <NavigationMenuTrigger>
@@ -82,20 +76,20 @@ function NavigationMenuMicroShowcase() {
                 </p>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
+            <ListItem href="/docs" title="Giới thiệu">
               Re-usable components built using Radix UI and
               Tailwind CSS.
             </ListItem>
             <ListItem
               href="/docs/installation"
-              title="Installation"
+              title="Cài đặt"
             >
               How to install dependencies and structure your
               app.
             </ListItem>
             <ListItem
               href="/docs/primitives/typography"
-              title="Typography"
+              title="Kiểu chữ"
             >
               Styles for headings, paragraphs, lists...etc
             </ListItem>
@@ -109,28 +103,28 @@ function NavigationMenuMicroShowcase() {
         <NavigationMenuContent>
           <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
             <ListItem
-              title="Alert Dialog"
+              title="Hộp thoại Cảnh báo"
               href="/docs/primitives/alert-dialog"
             >
               A modal dialog that interrupts the user with
               important content and expects a response.
             </ListItem>
             <ListItem
-              title="Hover Card"
+              title="Thẻ Hover"
               href="/docs/primitives/hover-card"
             >
               For sighted users to preview content available
               behind a link.
             </ListItem>
             <ListItem
-              title="Progress"
+              title="Tiến trình"
               href="/docs/primitives/progress"
             >
               Displays an indicator showing the completion
               progress of a task.
             </ListItem>
             <ListItem
-              title="Scroll-area"
+              title="Khu vực Cuộn"
               href="/docs/primitives/scroll-area"
             >
               Visually or semantically separates content.
@@ -150,99 +144,97 @@ function NavigationMenuMicroShowcase() {
     
       <NavigationMenuPositioner />
     
-  </NavigationMenu>`}
-      >
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+  </NavigationMenu>`} preview={
+                  <>
+          <NavigationMenu>
+                    <NavigationMenuList>
+                      <NavigationMenuItem>
+                        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
 
-              <NavigationMenuContent>
-                <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                  <li className="row-span-3">
-                    <NavigationMenuLink
-                      render={
-                        <a
-                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                          href="/"
-                        />
-                      }
-                    >
-                      <div className="mb-2 mt-4 text-lg font-medium">
-                        gladvn/ui
-                      </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        Beautifully designed components built with Radix UI and
-                        Tailwind CSS.
-                      </p>
-                    </NavigationMenuLink>
-                  </li>
-                  <ListItem href="/docs" title="Introduction">
-                    Re-usable components built using Radix UI and Tailwind CSS.
-                  </ListItem>
-                  <ListItem href="/docs/installation" title="Installation">
-                    How to install dependencies and structure your app.
-                  </ListItem>
-                  <ListItem
-                    href="/docs/primitives/typography"
-                    title="Typography"
-                  >
-                    Styles for headings, paragraphs, lists...etc
-                  </ListItem>
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                          <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                            <li className="row-span-3">
+                              <NavigationMenuLink
+                                render={
+                                  <a
+                                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                                    href="/"
+                                  />
+                                }
+                              >
+                                <div className="mb-2 mt-4 text-lg font-medium">
+                                  gladvn/ui
+                                </div>
+                                <p className="text-sm leading-tight text-muted-foreground">
+                                  Beautifully designed components built with Radix UI and
+                                  Tailwind CSS.
+                                </p>
+                              </NavigationMenuLink>
+                            </li>
+                            <ListItem href="/docs" title="Giới thiệu">
+                              Re-usable components built using Radix UI and Tailwind CSS.
+                            </ListItem>
+                            <ListItem href="/docs/installation" title="Cài đặt">
+                              How to install dependencies and structure your app.
+                            </ListItem>
+                            <ListItem
+                              href="/docs/primitives/typography"
+                              title="Kiểu chữ"
+                            >
+                              Styles for headings, paragraphs, lists...etc
+                            </ListItem>
+                          </ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                      <NavigationMenuItem>
+                        <NavigationMenuTrigger>Thành phần</NavigationMenuTrigger>
 
-              <NavigationMenuContent>
-                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                  <ListItem
-                    title="Alert Dialog"
-                    href="/docs/primitives/alert-dialog"
-                  >
-                    A modal dialog that interrupts the user with important
-                    content and expects a response.
-                  </ListItem>
-                  <ListItem
-                    title="Hover Card"
-                    href="/docs/primitives/hover-card"
-                  >
-                    For sighted users to preview content available behind a
-                    link.
-                  </ListItem>
-                  <ListItem title="Progress" href="/docs/primitives/progress">
-                    Displays an indicator showing the completion progress of a
-                    task.
-                  </ListItem>
-                  <ListItem
-                    title="Scroll-area"
-                    href="/docs/primitives/scroll-area"
-                  >
-                    Visually or semantically separates content.
-                  </ListItem>
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink
-                href="/docs"
-                className={navigationMenuTriggerStyle()}
-              >
-                Documentation
-              </NavigationMenuLink>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-          
-            <NavigationMenuPositioner />
-          
-        </NavigationMenu>
-      </ExampleSection>
+                        <NavigationMenuContent>
+                          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                            <ListItem
+                              title="Hộp thoại Cảnh báo"
+                              href="/docs/primitives/alert-dialog"
+                            >
+                              A modal dialog that interrupts the user with important
+                              content and expects a response.
+                            </ListItem>
+                            <ListItem
+                              title="Thẻ Hover"
+                              href="/docs/primitives/hover-card"
+                            >
+                              For sighted users to preview content available behind a
+                              link.
+                            </ListItem>
+                            <ListItem title="Tiến trình" href="/docs/primitives/progress">
+                              Displays an indicator showing the completion progress of a
+                              task.
+                            </ListItem>
+                            <ListItem
+                              title="Khu vực Cuộn"
+                              href="/docs/primitives/scroll-area"
+                            >
+                              Visually or semantically separates content.
+                            </ListItem>
+                          </ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                      <NavigationMenuItem>
+                        <NavigationMenuLink
+                          href="/docs"
+                          className={navigationMenuTriggerStyle()}
+                        >
+                          Documentation
+                        </NavigationMenuLink>
+                      </NavigationMenuItem>
+                    </NavigationMenuList>
+                    
+                      <NavigationMenuPositioner />
+                    
+                  </NavigationMenu>
+                  </>
+                } />
 
-      <ExampleSection
-        label="Disabled State"
-        description="Menu trigger ở trạng thái vô hiệu hóa."
-        codeString={`<NavigationMenu>
+      <ShowcaseExample title="Disabled State" description="Menu trigger ở trạng thái vô hiệu hóa." code={`<NavigationMenu>
     <NavigationMenuList>
       <NavigationMenuItem>
         <NavigationMenuTrigger disabled>
@@ -258,38 +250,36 @@ function NavigationMenuMicroShowcase() {
     
       <NavigationMenuPositioner />
     
-  </NavigationMenu>`}
-      >
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger disabled>
-                Disabled Trigger
-              </NavigationMenuTrigger>
+  </NavigationMenu>`} preview={
+                  <>
+          <NavigationMenu>
+                    <NavigationMenuList>
+                      <NavigationMenuItem>
+                        <NavigationMenuTrigger disabled>
+                          Disabled Trigger
+                        </NavigationMenuTrigger>
 
-              <NavigationMenuContent>
-                <div className="p-4 w-[200px]">Content will not be visible</div>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-          
-            <NavigationMenuPositioner />
-          
-        </NavigationMenu>
-      </ExampleSection>
+                        <NavigationMenuContent>
+                          <div className="p-4 w-[200px]">Content will not be visible</div>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    </NavigationMenuList>
+                    
+                      <NavigationMenuPositioner />
+                    
+                  </NavigationMenu>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point (export default)
-// ──────────────────────────────────────────────────────────
 export default function NavigationMenuShowcase() {
   return (
     <Showcase
       title="Navigation Menu"
       description="Thanh điều hướng đa cấp với panel thả xuống — dùng cho header navigation."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Navigation Menu là một hệ thống điều hướng chính (thường nằm ở
@@ -298,11 +288,7 @@ export default function NavigationMenuShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <NavigationMenuMicroShowcase /> },
-      ]}
+      micro={{ content: <NavigationMenuMicroShowcase /> }}
     />
   );
 }

package/src/dev/showcase/overview-components/ArchitectureSection.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { cn } from "../../../lib/utils";
+
+const ARCHITECTURE_CARDS = [
+  {
+    tag: "Nên bắt đầu ở đây",
+    path: "src/components/macro/",
+    title: "Macro — Khu vực an toàn",
+    desc: (
+      <>
+        Muốn tuỳ chỉnh? Bắt đầu từ đây nhé. Mỗi Macro là một khối độc lập — thêm footer cho DatePicker, giấu nút đóng của Dialog, v.v.{" "}
+        <strong className="text-foreground">Cứ thoải mái vọc vạch</strong>
+        , sửa cái nào thì chỉ ảnh hưởng cái đó thôi, chả lo "cháy nhà" hàng xóm.
+      </>
+    ),
+    colorScheme: "primary"
+  },
+  {
+    tag: "Cẩn thận",
+    path: "src/components/micro/",
+    title: "Micro — Lãnh địa cốt lõi",
+    desc: (
+      <>
+        Mọi thứ đều xây từ đây. Sửa cái padding của Button hay animation của Tooltip thì{" "}
+        <strong className="text-foreground">nguyên dàn app sẽ ăn theo</strong>
+        . Cân nhắc kỹ chút trước khi gõ phím nhé, "sai một ly đi một dặm" đấy!
+      </>
+    ),
+    colorScheme: "warning"
+  },
+  {
+    tag: "Ảnh hưởng toàn cục",
+    path: "src/index.css",
+    title: "CSS Token — Nút bấm hạt nhân",
+    desc: (
+      <>
+        Nơi nắm trùm về màu sắc, font, độ bo góc. Đổi một biến ở đây là{" "}
+        <strong className="text-foreground">giao diện lột xác toàn tập</strong>
+        . Rất đã khi cần thay áo mới (rebrand), nhưng tuyệt đối đừng dùng để vá lỗi vặt.
+      </>
+    ),
+    colorScheme: "destructive"
+  },
+  {
+    tag: "Lắp ghép linh hoạt",
+    path: "src/blocks/",
+    title: "Blocks — Sân chơi tự do",
+    desc: (
+      <>
+        Chẳng có quy tắc nào ép bạn phải dùng 100% Micro hay Macro. Layout quen thuộc thì <strong className="text-foreground">lấy Macro ra xài cho lẹ</strong>. Gặp thiết kế dị biệt thì <strong className="text-foreground">mở Micro ra tự xếp hình</strong>. Linh hoạt lên, code sao cho bản thân thấy sướng là được!
+      </>
+    ),
+    colorScheme: "info"
+  }
+] as const;
+
+export function ArchitectureSection({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "relative z-10 border-t border-primary/20 pt-8",
+        className
+      )}
+    >
+      <p className="text-sm font-bold uppercase tracking-wider text-primary mb-5">
+        Tuỳ chỉnh theo từng tầng kiến trúc
+      </p>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {ARCHITECTURE_CARDS.map((card, idx) => {
+          const isPrimary = card.colorScheme === "primary";
+          const isWarning = card.colorScheme === "warning";
+          const isDestructive = card.colorScheme === "destructive";
+          const isInfo = card.colorScheme === "info";
+
+          return (
+            <div
+              key={idx}
+              className={cn(
+                "p-5 pt-10 rounded-2xl space-y-3 relative",
+                {
+                  "border-2 border-primary/40 bg-primary/5": isPrimary,
+                  "border border-warning/40 bg-warning/5": isWarning,
+                  "border border-destructive/30 bg-destructive/5": isDestructive,
+                  "border border-info/40 bg-info/5": isInfo
+                }
+              )}
+            >
+              <div
+                className={cn(
+                  "absolute top-3 right-3 text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full",
+                  {
+                    "text-primary bg-primary/10": isPrimary,
+                    "text-warning bg-warning/10": isWarning,
+                    "text-destructive bg-destructive/10": isDestructive,
+                    "text-info bg-info/10": isInfo
+                  }
+                )}
+              >
+                {card.tag}
+              </div>
+              <div
+                className={cn(
+                  "font-mono text-xs",
+                  {
+                    "text-primary/70": isPrimary,
+                    "text-warning/70": isWarning,
+                    "text-destructive/60": isDestructive,
+                    "text-info/70": isInfo
+                  }
+                )}
+              >
+                {card.path}
+              </div>
+              <h4 className="font-bold text-foreground text-base">
+                {card.title}
+              </h4>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                {card.desc}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/dev/showcase/overview-components/CodeBlock.tsx

@@ -0,0 +1,50 @@
+import { cn } from "../../../lib/utils";
+import React from "react";
+
+export function CodeBlock({
+  type,
+  title,
+  className,
+  children
+}: {
+  type: "success" | "destructive";
+  title: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const isSuccess = type === "success";
+  return (
+    <div
+      className={cn(
+        "rounded-xl overflow-hidden border shadow-sm",
+        isSuccess
+          ? "border-success/30 bg-success/5"
+          : "border-destructive/30 bg-destructive/5 opacity-80",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          "px-4 py-2 font-semibold flex items-center gap-2",
+          {
+            "text-success": isSuccess,
+            "text-destructive": !isSuccess,
+          }
+        )}
+      >
+        {isSuccess ? "✅" : "❌"} {title}
+      </div>
+      <div
+        className={cn(
+          "text-muted-foreground pl-3 border-l-2 leading-relaxed",
+          {
+            "border-success/50": isSuccess,
+            "border-destructive/50": !isSuccess,
+          }
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/dev/showcase/overview-components/ColorPaletteSection.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { PaletteIcon } from "lucide-react";
+import { ColorSwatch } from "../../../dev/components/showcase";
+import { COLORS } from "../../../dev/data";
+import { cn } from "../../../lib/utils";
+import { Container } from "../../components/Container";
+
+export function ColorPaletteSection({ className }: { className?: string }) {
+  return (
+    <Container as="section" className={className}>
+      <div className="rounded-[2.5rem] border border-border bg-card/30 p-10 md:p-16 shadow-xl relative overflow-hidden group">
+        <div className="absolute -top-10 -right-10 p-8 opacity-5 pointer-events-none group-hover:rotate-12 group-hover:scale-125 transition-all duration-1000">
+          <PaletteIcon className="size-64 md:size-[400px]" />
+        </div>
+
+        <div className="relative z-10 max-w-3xl mb-14 space-y-5">
+          <h3 className="text-3xl md:text-5xl font-extrabold tracking-tight">
+            Không gian màu OKLCH
+          </h3>
+          <p className="text-muted-foreground text-xl leading-relaxed">
+            Mọi token màu sắc được tính trên không gian OKLCH — chuyển sắc
+            mượt, tương phản đạt WCAG AA/AAA trên mọi theme mà không cần định
+            nghĩa thủ công từng dải màu.
+          </p>
+        </div>
+
+        <div className="relative z-10 flex flex-wrap gap-6 md:gap-8 justify-center">
+          {COLORS.map((c, i) => (
+            <div
+              key={c}
+              className="animate-fade-up"
+              style={{
+                animationDelay: `${i * 50}ms`,
+                animationFillMode: "both"
+              }}
+            >
+              <ColorSwatch color={c} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </Container>
+  );
+}