gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/accordion.tsx

@@ -1,3 +1,7 @@
+import { useState } from "react";
+
+import { BoxIcon, SettingsIcon, SlidersHorizontalIcon } from "lucide-react";
+
 import { AccordionPreset } from "../../components/macro/accordion-preset";
 import {
   Accordion,
@@ -12,8 +16,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import { BoxIcon, SettingsIcon, SlidersHorizontalIcon } from "lucide-react";
-import { useState } from "react";
 
 // ──────────────────────────────────────────────────────────
 // Shared Data
@@ -70,27 +72,29 @@ function AccordionMacroShowcase() {
           label="Tiêu Chuẩn (Standard)"
           description="Accordion mở đơn cơ bản."
           codeString={`<AccordionPreset
-  className="w-full"
-  defaultValue={["item-1"]}
-  items={[
-              {
-                value: "item-1",
-                title: "Is it accessible?",
-                content: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-              },
-              {
-                value: "item-2",
-                title: "Is it styled?",
-                content: "Yes. It comes with default styles that match the other components' aesthetic.",
-              },
-              {
-                value: "item-3",
-                title: "Is it animated?",
-                content: "Yes. It's animated by default with smooth transitions.",
-              },
-            ]}
-/>
-`}
+    className="w-full"
+    defaultValue={["item-1"]}
+    items={[
+      {
+        value: "item-1",
+        title: "Is it accessible?",
+        content:
+          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
+      },
+      {
+        value: "item-2",
+        title: "Is it styled?",
+        content:
+          "Yes. It comes with default styles that match the other components' aesthetic.",
+      },
+      {
+        value: "item-3",
+        title: "Is it animated?",
+        content:
+          "Yes. It's animated by default with smooth transitions.",
+      },
+    ]}
+  />`}
         >
           <AccordionPreset
             className="w-full"
@@ -122,28 +126,30 @@ function AccordionMacroShowcase() {
           label="Mở Nhiều (Multiple Expansion)"
           description="Cho phép mở nhiều mục cùng một lúc."
           codeString={`<AccordionPreset
-  className="w-full"
-  multiple
-  defaultValue={["item-1", "item-2"]}
-  items={[
-              {
-                value: "item-1",
-                title: "Is it accessible?",
-                content: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-              },
-              {
-                value: "item-2",
-                title: "Is it styled?",
-                content: "Yes. It comes with default styles that match the other components' aesthetic.",
-              },
-              {
-                value: "item-3",
-                title: "Is it animated?",
-                content: "Yes. It's animated by default with smooth transitions.",
-              },
-            ]}
-/>
-`}
+    className="w-full"
+    multiple
+    defaultValue={["item-1", "item-2"]}
+    items={[
+      {
+        value: "item-1",
+        title: "Is it accessible?",
+        content:
+          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
+      },
+      {
+        value: "item-2",
+        title: "Is it styled?",
+        content:
+          "Yes. It comes with default styles that match the other components' aesthetic.",
+      },
+      {
+        value: "item-3",
+        title: "Is it animated?",
+        content:
+          "Yes. It's animated by default with smooth transitions.",
+      },
+    ]}
+  />`}
         >
           <AccordionPreset
             className="w-full"
@@ -246,29 +252,29 @@ return (
           label="Disabled (Vô hiệu hoá)"
           description="Từng mục riêng lẻ có thể bị vô hiệu hóa trong khi các mục khác vẫn tương tác bình thường."
           codeString={`<AccordionPreset
-  className="w-full"
-  items={[
-    {
-      value: "enabled-1",
-      title: "Available Feature",
-      content:
-        "This feature is available and can be expanded normally.",
-    },
-    {
-      value: "disabled-1",
-      title: "Premium Feature (Locked)",
-      content: "This content is hidden behind a premium plan.",
-      disabled: true,
-    },
-    {
-      value: "enabled-2",
-      title: "Another Feature",
-      content:
-        "This is another available feature you can interact with freely.",
-    },
-  ]}
-/>
-`}
+    className="w-full"
+    items={[
+      {
+        value: "enabled-1",
+        title: "Available Feature",
+        content:
+          "This feature is available and can be expanded normally.",
+      },
+      {
+        value: "disabled-1",
+        title: "Premium Feature (Locked)",
+        content:
+          "This content is hidden behind a premium plan.",
+        disabled: true,
+      },
+      {
+        value: "enabled-2",
+        title: "Another Feature",
+        content:
+          "This is another available feature you can interact with freely.",
+      },
+    ]}
+  />`}
         >
           <AccordionPreset
             className="w-full"
@@ -301,25 +307,25 @@ return (
           label="Nội Dung Phức Tạp"
           description="Render các React Node bên trong nội dung."
           codeString={`<AccordionPreset
-  className="w-full"
-  items={[
-    {
-      value: "profile",
-      title: "User Profile Settings",
-      content: (
-        <div className="flex flex-col items-start gap-3">
-          <p className="text-sm">
-            Update your personal information and preferences.
-          </p>
-          <button className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground">
-            Edit Profile
-          </button>
-        </div>
-      ),
-    },
-  ]}
-/>
-`}
+    className="w-full"
+    items={[
+      {
+        value: "profile",
+        title: "User Profile Settings",
+        content: (
+          <div className="flex flex-col items-start gap-3">
+            <p className="text-sm">
+              Update your personal information and
+              preferences.
+            </p>
+            <button className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground">
+              Edit Profile
+            </button>
+          </div>
+        ),
+      },
+    ]}
+  />`}
         >
           <AccordionPreset
             className="w-full"
@@ -346,45 +352,44 @@ return (
           label="Lồng Nhau (Nested Accordions)"
           description="Nội dung bên trong có thể chứa một Accordion khác."
           codeString={`<AccordionPreset
-  className="w-full"
-  items={[
-    {
-      value: "getting-started",
-      title: "Getting Started",
-      content: (
-        <AccordionPreset
-          className="w-full"
-          items={[
-            {
-              value: "installation",
-              title: "Installation",
-              content:
-                "Run npm install to add the component to your project.",
-            },
-          ]}
-        />
-      ),
-    },
-    {
-      value: "advanced",
-      title: "Advanced Usage",
-      content: (
-        <AccordionPreset
-          className="w-full"
-          items={[
-            {
-              value: "controlled",
-              title: "Controlled Mode",
-              content:
-                "Use the value and onValueChange props to control which items are open.",
-            },
-          ]}
-        />
-      ),
-    },
-  ]}
-/>
-`}
+    className="w-full"
+    items={[
+      {
+        value: "getting-started",
+        title: "Getting Started",
+        content: (
+          <AccordionPreset
+            className="w-full"
+            items={[
+              {
+                value: "installation",
+                title: "Installation",
+                content:
+                  "Run npm install to add the component to your project.",
+              },
+            ]}
+          />
+        ),
+      },
+      {
+        value: "advanced",
+        title: "Advanced Usage",
+        content: (
+          <AccordionPreset
+            className="w-full"
+            items={[
+              {
+                value: "controlled",
+                title: "Controlled Mode",
+                content:
+                  "Use the value and onValueChange props to control which items are open.",
+              },
+            ]}
+          />
+        ),
+      },
+    ]}
+  />`}
         >
           <AccordionPreset
             className="w-full"
@@ -441,20 +446,35 @@ function AccordionMicroShowcase() {
         <ExampleSection
           label="Mở Đơn (Single Expand)"
           description="Chỉ một mục được phép mở tại một thời điểm (mặc định)."
-          codeString={`<Accordion className="w-full" defaultValue={["Is it accessible?"]}>
-  <AccordionItem value="Is it accessible?">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Is it styled?">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic. You can override every token via CSS variables.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Is it animated?">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>Yes. It's animated by default with smooth expand/collapse transitions, but you can disable animation if you prefer.</AccordionContent>
-  </AccordionItem>
-</Accordion>`}
+          codeString={`<Accordion
+    className="w-full"
+    defaultValue={["Is it accessible?"]}
+  >
+    <AccordionItem value="Is it accessible?">
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It adheres to the WAI-ARIA design pattern.
+        Keyboard navigation and screen readers are fully
+        supported.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Is it styled?">
+      <AccordionTrigger>Is it styled?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It comes with default styles that match the
+        other components' aesthetic. You can override every
+        token via CSS variables.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Is it animated?">
+      <AccordionTrigger>Is it animated?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It's animated by default with smooth
+        expand/collapse transitions, but you can disable
+        animation if you prefer.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>`}
         >
           <Accordion className="w-full" defaultValue={["Is it accessible?"]}>
             <AccordionItem value="Is it accessible?">
@@ -482,20 +502,36 @@ function AccordionMicroShowcase() {
         <ExampleSection
           label="Mở Nhiều (Multiple Expand)"
           description="Cho phép mở nhiều mục cùng lúc."
-          codeString={`<Accordion className="w-full" multiple defaultValue={["Is it accessible?", "Is it styled?"]}>
-  <AccordionItem value="Is it accessible?">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Is it styled?">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic. You can override every token via CSS variables.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Is it animated?">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>Yes. It's animated by default with smooth expand/collapse transitions, but you can disable animation if you prefer.</AccordionContent>
-  </AccordionItem>
-</Accordion>`}
+          codeString={`<Accordion
+    className="w-full"
+    multiple
+    defaultValue={["Is it accessible?", "Is it styled?"]}
+  >
+    <AccordionItem value="Is it accessible?">
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It adheres to the WAI-ARIA design pattern.
+        Keyboard navigation and screen readers are fully
+        supported.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Is it styled?">
+      <AccordionTrigger>Is it styled?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It comes with default styles that match the
+        other components' aesthetic. You can override every
+        token via CSS variables.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Is it animated?">
+      <AccordionTrigger>Is it animated?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It's animated by default with smooth
+        expand/collapse transitions, but you can disable
+        animation if you prefer.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>`}
         >
           <Accordion
             className="w-full"
@@ -530,27 +566,29 @@ function AccordionMicroShowcase() {
           label="Disabled (Vô hiệu hoá)"
           description="Từng mục riêng lẻ có thể bị vô hiệu hóa trong khi các mục khác vẫn tương tác bình thường."
           codeString={`<Accordion className="w-full">
-  <AccordionItem value="enabled-1">
-    <AccordionTrigger>Available Feature</AccordionTrigger>
-    <AccordionContent>
-      This feature is available and can be expanded normally. Click to
-      see the details.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="disabled-1" disabled>
-    <AccordionTrigger>Premium Feature (Locked)</AccordionTrigger>
-    <AccordionContent>
-      This content is hidden behind a premium plan.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="enabled-2">
-    <AccordionTrigger>Another Feature</AccordionTrigger>
-    <AccordionContent>
-      This is another available feature you can interact with freely.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-`}
+    <AccordionItem value="enabled-1">
+      <AccordionTrigger>Available Feature</AccordionTrigger>
+      <AccordionContent>
+        This feature is available and can be expanded
+        normally. Click to see the details.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="disabled-1" disabled>
+      <AccordionTrigger>
+        Premium Feature (Locked)
+      </AccordionTrigger>
+      <AccordionContent>
+        This content is hidden behind a premium plan.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="enabled-2">
+      <AccordionTrigger>Another Feature</AccordionTrigger>
+      <AccordionContent>
+        This is another available feature you can interact
+        with freely.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>`}
         >
           <Accordion className="w-full">
             <AccordionItem value="enabled-1">
@@ -579,47 +617,57 @@ function AccordionMicroShowcase() {
           label="Lồng Nhau (Nested Accordions)"
           description="Nội dung bên trong có thể chứa một Accordion khác để tạo cấu trúc nhiều cấp."
           codeString={`<Accordion className="w-full max-w-lg">
-  <AccordionItem value="getting-started">
-    <AccordionTrigger>Getting Started</AccordionTrigger>
-    <AccordionContent>
-      <Accordion>
-        <AccordionItem value="installation">
-          <AccordionTrigger>Installation</AccordionTrigger>
-          <AccordionContent>
-            Run npm install to add the component to your project.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="configuration">
-          <AccordionTrigger>Configuration</AccordionTrigger>
-          <AccordionContent>
-            Import and wrap your content with the Accordion component.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="advanced">
-    <AccordionTrigger>Advanced Usage</AccordionTrigger>
-    <AccordionContent>
-      <Accordion>
-        <AccordionItem value="controlled">
-          <AccordionTrigger>Controlled Mode</AccordionTrigger>
-          <AccordionContent>
-            Use the value and onValueChange props to control which
-            items are open.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="animation">
-          <AccordionTrigger>Custom Animation</AccordionTrigger>
-          <AccordionContent>
-            Override transition duration and easing via className.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-`}
+    <AccordionItem value="getting-started">
+      <AccordionTrigger>Getting Started</AccordionTrigger>
+      <AccordionContent>
+        <Accordion>
+          <AccordionItem value="installation">
+            <AccordionTrigger>
+              Installation
+            </AccordionTrigger>
+            <AccordionContent>
+              Run npm install to add the component to your
+              project.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="configuration">
+            <AccordionTrigger>
+              Configuration
+            </AccordionTrigger>
+            <AccordionContent>
+              Import and wrap your content with the
+              Accordion component.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="advanced">
+      <AccordionTrigger>Advanced Usage</AccordionTrigger>
+      <AccordionContent>
+        <Accordion>
+          <AccordionItem value="controlled">
+            <AccordionTrigger>
+              Controlled Mode
+            </AccordionTrigger>
+            <AccordionContent>
+              Use the value and onValueChange props to
+              control which items are open.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="animation">
+            <AccordionTrigger>
+              Custom Animation
+            </AccordionTrigger>
+            <AccordionContent>
+              Override transition duration and easing via
+              className.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>`}
         >
           <Accordion className="w-full max-w-lg">
             <AccordionItem value="getting-started">
@@ -669,23 +717,40 @@ function AccordionMicroShowcase() {
         label="FAQ Hoàn Chỉnh"
         description="Ví dụ một phần hỏi đáp FAQ hoàn chỉnh."
         codeString={`<Accordion className="w-full max-w-lg">
-  <AccordionItem value="Is it accessible?">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Is it styled?">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic. You can override every token via CSS variables.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Is it animated?">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>Yes. It's animated by default with smooth expand/collapse transitions, but you can disable animation if you prefer.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="Can I nest accordions?">
-    <AccordionTrigger>Can I nest accordions?</AccordionTrigger>
-    <AccordionContent>Yes. You can nest accordion components inside each other to create multi-level collapsible sections.</AccordionContent>
-  </AccordionItem>
-</Accordion>`}
+    <AccordionItem value="Is it accessible?">
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It adheres to the WAI-ARIA design pattern.
+        Keyboard navigation and screen readers are fully
+        supported.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Is it styled?">
+      <AccordionTrigger>Is it styled?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It comes with default styles that match the
+        other components' aesthetic. You can override every
+        token via CSS variables.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Is it animated?">
+      <AccordionTrigger>Is it animated?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It's animated by default with smooth
+        expand/collapse transitions, but you can disable
+        animation if you prefer.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="Can I nest accordions?">
+      <AccordionTrigger>
+        Can I nest accordions?
+      </AccordionTrigger>
+      <AccordionContent>
+        Yes. You can nest accordion components inside each
+        other to create multi-level collapsible sections.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>`}
       >
         <Accordion className="w-full max-w-lg">
           <AccordionItem value="Is it accessible?">
@@ -723,97 +788,117 @@ function AccordionMicroShowcase() {
         description="Các kịch bản thực tế giúp bạn quyết định nên dùng Micro (Accordion) hay Macro (AccordionPreset)."
         fullWidth
         codeString={`<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">
-        <SettingsIcon className="size-4" aria-hidden="true" />
-      </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">
-          Render danh sách FAQ từ API
-        </h3>
+    {/* ── 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">
+          <SettingsIcon
+            className="size-4"
+            aria-hidden="true"
+          />
+        </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">
+            Render danh sách FAQ từ API
+          </h3>
+        </div>
       </div>
-    </div>
 
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn nhận được một mảng dữ liệu FAQ (hỏi đáp) từ server. Nội dung
-      đơn giản chỉ là text. Dùng Macro để tiết kiệm code.
-    </p>
-
-    <div className="rounded-lg bg-muted/50 p-3">
-      <AccordionPreset
-        className="w-full"
-        items={[
-  { value: "Is it accessible?", title: "Is it accessible?", content: "Yes. It adheres to the WAI-ARIA design pattern." },
-  { value: "Is it styled?", title: "Is it styled?", content: "Yes. It comes with default styles that match the other components' aesthetic." },
-]}
-      />
-    </div>
-
-    <div className="rounded-md border border-border border-green-500/20 bg-green-500/5 px-3 py-2">
-      <p className="text-xs font-medium text-green-700 dark:text-green-400">
-        ✅ Dùng <code className="font-mono">AccordionPreset</code> — Tự
-        động lặp qua array, không cần viết lại JSX cho từng thẻ Item.
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn nhận được một mảng dữ liệu FAQ (hỏi đáp) từ
+        server. Nội dung đơn giản chỉ là text. Dùng Macro để
+        tiết kiệm code.
       </p>
-    </div>
-  </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">
-        <BoxIcon className="size-4" aria-hidden="true" />
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Story 2 · Dùng Micro
+
+      <div className="rounded-lg bg-muted/50 p-3">
+        <AccordionPreset
+          className="w-full"
+          items={[
+            {
+              value: "Is it accessible?",
+              title: "Is it accessible?",
+              content:
+                "Yes. It adheres to the WAI-ARIA design pattern.",
+            },
+            {
+              value: "Is it styled?",
+              title: "Is it styled?",
+              content:
+                "Yes. It comes with default styles that match the other components' aesthetic.",
+            },
+          ]}
+        />
+      </div>
+
+      <div className="rounded-md border border-border border-green-500/20 bg-green-500/5 px-3 py-2">
+        <p className="text-xs font-medium text-green-700 dark:text-green-400">
+          ✅ Dùng{" "}
+          <code className="font-mono">AccordionPreset</code>{" "}
+          — Tự động lặp qua array, không cần viết lại JSX
+          cho từng thẻ Item.
         </p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">
-          Tuỳ biến Trigger / Form phức tạp
-        </h3>
       </div>
     </div>
 
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Trigger cần hiển thị Icon hoặc Badge. Nội dung bên trong là một
-      Form phức tạp (chứ không phải text đơn thuần). Macro không thể làm
-      được việc này.
-    </p>
-
-    <div className="rounded-lg bg-muted/50 p-3">
-      <Accordion className="w-full">
-        <AccordionItem value="settings">
-          <AccordionTrigger className="gap-3">
-            <SlidersHorizontalIcon className="size-4 text-primary" />
-            <span className="flex-1 text-left">Advanced Settings</span>
-            <span className="mr-2 rounded bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wider text-primary">
-              New
-            </span>
-          </AccordionTrigger>
-          <AccordionContent>
-            <div className="flex items-center gap-3 rounded border border-border p-3 text-xs text-muted-foreground">
-              <span>
-                Nội dung tuỳ biến hoàn toàn, ví dụ: Form, Toggle, v.v.
-              </span>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </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">
+          <BoxIcon className="size-4" aria-hidden="true" />
+        </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">
+            Tuỳ biến Trigger / Form phức tạp
+          </h3>
+        </div>
+      </div>
 
-    <div className="rounded-md border border-border border-blue-500/20 bg-blue-500/5 px-3 py-2">
-      <p className="text-xs font-medium text-blue-700 dark:text-blue-400">
-        ✅ Dùng <code className="font-mono">Accordion</code> (Micro) —
-        Toàn quyền kiểm soát cấu trúc HTML của Trigger và Content.
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Trigger cần hiển thị Icon hoặc Badge. Nội dung bên
+        trong là một Form phức tạp (chứ không phải text đơn
+        thuần). Macro không thể làm được việc này.
       </p>
+
+      <div className="rounded-lg bg-muted/50 p-3">
+        <Accordion className="w-full">
+          <AccordionItem value="settings">
+            <AccordionTrigger className="gap-3">
+              <SlidersHorizontalIcon className="size-4 text-primary" />
+              <span className="flex-1 text-left">
+                Advanced Settings
+              </span>
+              <span className="mr-2 rounded bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wider text-primary">
+                New
+              </span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex items-center gap-3 rounded border border-border p-3 text-xs text-muted-foreground">
+                <span>
+                  Nội dung tuỳ biến hoàn toàn, ví dụ: Form,
+                  Toggle, v.v.
+                </span>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      <div className="rounded-md border border-border border-blue-500/20 bg-blue-500/5 px-3 py-2">
+        <p className="text-xs font-medium text-blue-700 dark:text-blue-400">
+          ✅ Dùng{" "}
+          <code className="font-mono">Accordion</code>{" "}
+          (Micro) — Toàn quyền kiểm soát cấu trúc HTML của
+          Trigger và Content.
+        </p>
+      </div>
     </div>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* ── Story 1: Macro wins ── */}