gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/accordion.tsx

@@ -12,159 +12,146 @@ import {
 import {
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// Shared Data
-// ──────────────────────────────────────────────────────────
 const faqItems = [
   {
-    q: "Is it accessible?",
-    a: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
+    q: "Hỗ trợ Accessible (a11y) không?",
+    a: "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
   {
-    q: "Is it styled?",
-    a: "Yes. It comes with default styles that match the other components' aesthetic. You can override every token via CSS variables." },
+    q: "Có CSS sẵn không?",
+    a: "Có nha. Style mặc định bao đẹp, match với các component khác. Override vô tư qua CSS variable." },
   {
-    q: "Is it animated?",
-    a: "Yes. It's animated by default with smooth expand/collapse transitions, but you can disable animation if you prefer." },
+    q: "Có animation không?",
+    a: "Đầy đủ. Mở ra đóng lại mượt mà, nhưng nếu không thích thì tắt cũng dễ òm." },
   {
-    q: "Can I nest accordions?",
-    a: "Yes. You can nest accordion components inside each other to create multi-level collapsible sections." },
+    q: "Có lồng nhau (nest) được không?",
+    a: "Thoải mái luôn. Bro lồng bao nhiêu cái accordion vào nhau tuỳ thích." },
 ];
 
 const presetItems = [
   {
     value: "item-1",
-    title: "Is it accessible?",
+    title: "Hỗ trợ Accessible (a11y) không?",
     content:
-      "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
+      "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
   {
     value: "item-2",
-    title: "Is it styled?",
+    title: "Có CSS sẵn không?",
     content:
-      "Yes. It comes with default styles that match the other components' aesthetic." },
+      "Có nha. Style mặc định bao đẹp, match với các component khác. Override vô tư qua CSS variable." },
   {
     value: "item-3",
-    title: "Is it animated?",
-    content: "Yes. It's animated by default with smooth transitions." },
+    title: "Có animation không?",
+    content: "Đầy đủ. Mở ra đóng lại mượt mà, nhưng nếu không thích thì tắt cũng dễ òm." },
 ];
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Macro Content (không export)
-// ──────────────────────────────────────────────────────────
 function AccordionMacroShowcase() {
   const [controlledValue, setControlledValue] = useState<string[]>([]);
 
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Tiêu Chuẩn (Standard)"
-          description="Accordion mở đơn cơ bản."
-          codeString={`<AccordionPreset
+        <ShowcaseExample title="Tiêu Chuẩn (Standard)" description="Accordion mở đơn cơ bản." code={`<AccordionPreset
     className="w-full"
     defaultValue={["item-1"]}
     items={[
       {
         value: "item-1",
-        title: "Is it accessible?",
+        title: "Hỗ trợ Accessible (a11y) không?",
         content:
-          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
+          "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
       {
         value: "item-2",
-        title: "Is it styled?",
+        title: "Có CSS sẵn không?",
         content:
-          "Yes. It comes with default styles that match the other components' aesthetic." },
+          "Có nha. Style mặc định bao đẹp, match với các component khác." },
       {
         value: "item-3",
-        title: "Is it animated?",
+        title: "Có animation không?",
         content:
-          "Yes. It's animated by default with smooth transitions." },
+          "Đầy đủ. Mở ra đóng lại mượt mà." },
     ]}
-  />`}
-        >
-          <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." },
-            ]}
-          />
-        </ExampleSection>
-
-        <ExampleSection
-          label="Mở Nhiều (Multiple Expansion)"
-          description="Cho phép mở nhiều mục cùng một lúc."
-          codeString={`<AccordionPreset
+  />`} preview={
+                      <>
+              <AccordionPreset
+                          className="w-full"
+                          defaultValue={["item-1"]}
+                          items={[
+                            {
+                              value: "item-1",
+                              title: "Hỗ trợ Accessible (a11y) không?",
+                              content:
+                                "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
+                            {
+                              value: "item-2",
+                              title: "Có CSS sẵn không?",
+                              content:
+                                "Có nha. Style mặc định bao đẹp, match với các component khác." },
+                            {
+                              value: "item-3",
+                              title: "Có animation không?",
+                              content:
+                                "Đầy đủ. Mở ra đóng lại mượt mà." },
+                          ]}
+                        />
+                      </>
+                    } />
+
+        <ShowcaseExample title="Mở Nhiều (Multiple Expansion)" description="Cho phép mở nhiều mục cùng một lúc." code={`<AccordionPreset
     className="w-full"
     multiple
     defaultValue={["item-1", "item-2"]}
     items={[
       {
         value: "item-1",
-        title: "Is it accessible?",
+        title: "Hỗ trợ Accessible (a11y) không?",
         content:
-          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
+          "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
       {
         value: "item-2",
-        title: "Is it styled?",
+        title: "Có CSS sẵn không?",
         content:
-          "Yes. It comes with default styles that match the other components' aesthetic." },
+          "Có nha. Style mặc định bao đẹp, match với các component khác." },
       {
         value: "item-3",
-        title: "Is it animated?",
+        title: "Có animation không?",
         content:
-          "Yes. It's animated by default with smooth transitions." },
+          "Đầy đủ. Mở ra đóng lại mượt mà." },
     ]}
-  />`}
-        >
-          <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." },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <AccordionPreset
+                          className="w-full"
+                          multiple
+                          defaultValue={["item-1", "item-2"]}
+                          items={[
+                            {
+                              value: "item-1",
+                              title: "Hỗ trợ Accessible (a11y) không?",
+                              content:
+                                "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
+                            {
+                              value: "item-2",
+                              title: "Có CSS sẵn không?",
+                              content:
+                                "Có nha. Style mặc định bao đẹp, match với các component khác." },
+                            {
+                              value: "item-3",
+                              title: "Có animation không?",
+                              content:
+                                "Đầy đủ. Mở ra đóng lại mượt mà." },
+                          ]}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Controlled"
-          description="Trạng thái mở được quản lý bằng state. Click vào các mục để xem state thay đổi."
-          codeString={`const [controlledValue, setControlledValue] = useState<string[]>([]);
+        <ShowcaseExample title="Controlled" description="Trạng thái mở được quản lý bằng state. Click vào các mục để xem state thay đổi." code={`const [controlledValue, setControlledValue] = useState<string[]>([]);
 return (
   <AccordionPreset
     className="w-full"
@@ -174,113 +161,109 @@ return (
     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." },
+                title: "Hỗ trợ Accessible (a11y) không?",
+                content: "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
               {
                 value: "item-2",
-                title: "Is it styled?",
-                content: "Yes. It comes with default styles that match the other components' aesthetic." },
+                title: "Có CSS sẵn không?",
+                content: "Có nha. Style mặc định bao đẹp, match với các component khác." },
               {
                 value: "item-3",
-                title: "Is it animated?",
-                content: "Yes. It's animated by default with smooth transitions." },
+                title: "Có animation không?",
+                content: "Đầy đủ. Mở ra đóng lại mượt mà." },
             ]}
   />
-);`}
-        >
-          <div className="flex w-full flex-col gap-3">
-            <p className="text-xs text-muted-foreground">
-              Open:{" "}
-              <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">
-                {controlledValue.length > 0
-                  ? controlledValue.map((v) => `"${v}"`).join(", ")
-                  : "(none)"}
-              </code>
-            </p>
-            <AccordionPreset
-              className="w-full"
-              multiple
-              value={controlledValue}
-              onValueChange={setControlledValue}
-              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." },
-              ]}
-            />
-          </div>
-        </ExampleSection>
-
-        <ExampleSection
-          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
+);`} preview={
+                      <>
+              <div className="flex w-full flex-col gap-3">
+                          <p className="text-xs text-muted-foreground">
+                            Open:{" "}
+                            <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">
+                              {controlledValue.length > 0
+                                ? controlledValue.map((v) => `"${v}"`).join(", ")
+                                : "(none)"}
+                            </code>
+                          </p>
+                          <AccordionPreset
+                            className="w-full"
+                            multiple
+                            value={controlledValue}
+                            onValueChange={setControlledValue}
+                            items={[
+                              {
+                                value: "item-1",
+                                title: "Hỗ trợ Accessible (a11y) không?",
+                                content:
+                                  "Có chứ. Component tuân thủ chuẩn WAI-ARIA. Bàn phím hay screen reader cân hết." },
+                              {
+                                value: "item-2",
+                                title: "Có CSS sẵn không?",
+                                content:
+                                  "Có nha. Style mặc định bao đẹp, match với các component khác." },
+                              {
+                                value: "item-3",
+                                title: "Có animation không?",
+                                content:
+                                  "Đầy đủ. Mở ra đóng lại mượt mà." },
+                            ]}
+                          />
+                        </div>
+                      </>
+                    } />
+
+        <ShowcaseExample title="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." code={`<AccordionPreset
     className="w-full"
     items={[
       {
         value: "enabled-1",
-        title: "Available Feature",
+        title: "Tính năng có sẵn",
         content:
           "This feature is available and can be expanded normally." },
       {
         value: "disabled-1",
-        title: "Premium Feature (Locked)",
+        title: "Tính năng Premium (Đã khoá)",
         content:
-          "This content is hidden behind a premium plan.",
+          "Nội dung này yêu cầu gói tài khoản Premium.",
         disabled: true },
       {
         value: "enabled-2",
-        title: "Another Feature",
+        title: "Tính năng khác",
         content:
           "This is another available feature you can interact with freely." },
     ]}
-  />`}
-        >
-          <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." },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <AccordionPreset
+                          className="w-full"
+                          items={[
+                            {
+                              value: "enabled-1",
+                              title: "Tính năng có sẵn",
+                              content:
+                                "This feature is available and can be expanded normally." },
+                            {
+                              value: "disabled-1",
+                              title: "Tính năng Premium (Đã khoá)",
+                              content: "Nội dung này yêu cầu gói tài khoản Premium.",
+                              disabled: true },
+                            {
+                              value: "enabled-2",
+                              title: "Tính năng khác",
+                              content:
+                                "This is another available feature you can interact with freely." },
+                          ]}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Nội Dung Phức Tạp"
-          description="Render các React Node bên trong nội dung."
-          codeString={`<AccordionPreset
+        <ShowcaseExample title="Nội Dung Phức Tạp" description="Render các React Node bên trong nội dung." code={`<AccordionPreset
     className="w-full"
     items={[
       {
         value: "profile",
-        title: "User Profile Settings",
+        title: "Cài đặt Hồ sơ Người dùng",
         content: (
           <div className="flex flex-col items-start gap-3">
             <p className="text-sm">
@@ -293,44 +276,42 @@ return (
           </div>
         ) },
     ]}
-  />`}
-        >
-          <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>
-                ) },
-            ]}
-          />
-        </ExampleSection>
-
-        <ExampleSection
-          label="Lồng Nhau (Nested Accordions)"
-          description="Nội dung bên trong có thể chứa một Accordion khác."
-          codeString={`<AccordionPreset
+  />`} preview={
+                      <>
+              <AccordionPreset
+                          className="w-full"
+                          items={[
+                            {
+                              value: "profile",
+                              title: "Cài đặt Hồ sơ Người dùng",
+                              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>
+                              ) },
+                          ]}
+                        />
+                      </>
+                    } />
+
+        <ShowcaseExample title="Lồng Nhau (Nested Accordions)" description="Nội dung bên trong có thể chứa một Accordion khác." code={`<AccordionPreset
     className="w-full"
     items={[
       {
         value: "getting-started",
-        title: "Getting Started",
+        title: "Bắt đầu nhanh",
         content: (
           <AccordionPreset
             className="w-full"
             items={[
               {
                 value: "installation",
-                title: "Installation",
+                title: "Cài đặt",
                 content:
                   "Run npm install to add the component to your project." },
             ]}
@@ -338,81 +319,76 @@ return (
         ) },
       {
         value: "advanced",
-        title: "Advanced Usage",
+        title: "Sử dụng nâng cao",
         content: (
           <AccordionPreset
             className="w-full"
             items={[
               {
                 value: "controlled",
-                title: "Controlled Mode",
+                title: "Chế độ Controlled",
                 content:
-                  "Use the value and onValueChange props to control which items are open." },
+                  "Sử dụng props value và onValueChange để kiểm soát các mục đang mở." },
             ]}
           />
         ) },
     ]}
-  />`}
-        >
-          <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." },
-                    ]}
-                  />
-                ) },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <AccordionPreset
+                          className="w-full"
+                          items={[
+                            {
+                              value: "getting-started",
+                              title: "Bắt đầu nhanh",
+                              content: (
+                                <AccordionPreset
+                                  className="w-full"
+                                  items={[
+                                    {
+                                      value: "installation",
+                                      title: "Cài đặt",
+                                      content:
+                                        "Run npm install to add the component to your project." },
+                                  ]}
+                                />
+                              ) },
+                            {
+                              value: "advanced",
+                              title: "Sử dụng nâng cao",
+                              content: (
+                                <AccordionPreset
+                                  className="w-full"
+                                  items={[
+                                    {
+                                      value: "controlled",
+                                      title: "Chế độ Controlled",
+                                      content:
+                                        "Sử dụng props value và onValueChange để kiểm soát các mục đang mở." },
+                                  ]}
+                                />
+                              ) },
+                          ]}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function AccordionMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <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
+        <ShowcaseExample title="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)." code={`<Accordion
     className="w-full"
-    defaultValue={["Is it accessible?"]}
+    defaultValue={["Hỗ trợ Accessible (a11y) không?"]}
   >
-    <AccordionItem value="Is it accessible?">
+    <AccordionItem value="Hỗ trợ Accessible (a11y) không?">
       <AccordionTrigger>Is it accessible?</AccordionTrigger>
       <AccordionContent>
-        Yes. It adheres to the WAI-ARIA design pattern.
+        Có chứ. Component tuân thủ chuẩn WAI-ARIA.
         Keyboard navigation and screen readers are fully
         supported.
       </AccordionContent>
@@ -433,43 +409,41 @@ function AccordionMicroShowcase() {
         animation if you prefer.
       </AccordionContent>
     </AccordionItem>
-  </Accordion>`}
-        >
-          <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.
-              </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.
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="Is it animated?">
-              <AccordionTrigger>Is it animated?</AccordionTrigger>
-              <AccordionContent>
-                Yes. It's animated by default with smooth transitions.
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </ExampleSection>
-
-        <ExampleSection
-          label="Mở Nhiều (Multiple Expand)"
-          description="Cho phép mở nhiều mục cùng lúc."
-          codeString={`<Accordion
+  </Accordion>`} preview={
+                      <>
+              <Accordion className="w-full" defaultValue={["Hỗ trợ Accessible (a11y) không?"]}>
+                          <AccordionItem value="Hỗ trợ Accessible (a11y) không?">
+                            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+                            <AccordionContent>
+                              Có chứ. Component tuân thủ chuẩn WAI-ARIA.
+                            </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.
+                            </AccordionContent>
+                          </AccordionItem>
+                          <AccordionItem value="Is it animated?">
+                            <AccordionTrigger>Is it animated?</AccordionTrigger>
+                            <AccordionContent>
+                              Đầy đủ. Mở ra đóng lại mượt mà.
+                            </AccordionContent>
+                          </AccordionItem>
+                        </Accordion>
+                      </>
+                    } />
+
+        <ShowcaseExample title="Mở Nhiều (Multiple Expand)" description="Cho phép mở nhiều mục cùng lúc." code={`<Accordion
     className="w-full"
     multiple
-    defaultValue={["Is it accessible?", "Is it styled?"]}
+    defaultValue={["Hỗ trợ Accessible (a11y) không?", "Is it styled?"]}
   >
-    <AccordionItem value="Is it accessible?">
+    <AccordionItem value="Hỗ trợ Accessible (a11y) không?">
       <AccordionTrigger>Is it accessible?</AccordionTrigger>
       <AccordionContent>
-        Yes. It adheres to the WAI-ARIA design pattern.
+        Có chứ. Component tuân thủ chuẩn WAI-ARIA.
         Keyboard navigation and screen readers are fully
         supported.
       </AccordionContent>
@@ -490,41 +464,39 @@ function AccordionMicroShowcase() {
         animation if you prefer.
       </AccordionContent>
     </AccordionItem>
-  </Accordion>`}
-        >
-          <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.
-              </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.
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="Is it animated?">
-              <AccordionTrigger>Is it animated?</AccordionTrigger>
-              <AccordionContent>
-                Yes. It's animated by default with smooth transitions.
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </ExampleSection>
+  </Accordion>`} preview={
+                      <>
+              <Accordion
+                          className="w-full"
+                          multiple
+                          defaultValue={["Hỗ trợ Accessible (a11y) không?", "Is it styled?"]}
+                        >
+                          <AccordionItem value="Hỗ trợ Accessible (a11y) không?">
+                            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+                            <AccordionContent>
+                              Có chứ. Component tuân thủ chuẩn WAI-ARIA.
+                            </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.
+                            </AccordionContent>
+                          </AccordionItem>
+                          <AccordionItem value="Is it animated?">
+                            <AccordionTrigger>Is it animated?</AccordionTrigger>
+                            <AccordionContent>
+                              Đầy đủ. Mở ra đóng lại mượt mà.
+                            </AccordionContent>
+                          </AccordionItem>
+                        </Accordion>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          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">
+        <ShowcaseExample title="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." code={`<Accordion className="w-full">
     <AccordionItem value="enabled-1">
       <AccordionTrigger>Available Feature</AccordionTrigger>
       <AccordionContent>
@@ -547,35 +519,33 @@ function AccordionMicroShowcase() {
         with freely.
       </AccordionContent>
     </AccordionItem>
-  </Accordion>`}
-        >
-          <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>
-        </ExampleSection>
-
-        <ExampleSection
-          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">
+  </Accordion>`} preview={
+                      <>
+              <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>
+                      </>
+                    } />
+
+        <ShowcaseExample title="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." code={`<Accordion className="w-full max-w-lg">
     <AccordionItem value="getting-started">
       <AccordionTrigger>Getting Started</AccordionTrigger>
       <AccordionContent>
@@ -602,21 +572,21 @@ function AccordionMicroShowcase() {
       </AccordionContent>
     </AccordionItem>
     <AccordionItem value="advanced">
-      <AccordionTrigger>Advanced Usage</AccordionTrigger>
+      <AccordionTrigger>Sử dụng nâng cao</AccordionTrigger>
       <AccordionContent>
         <Accordion>
           <AccordionItem value="controlled">
             <AccordionTrigger>
-              Controlled Mode
+              Chế độ Controlled
             </AccordionTrigger>
             <AccordionContent>
               Use the value and onValueChange props to
-              control which items are open.
+              control which các mục đang mở.
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="animation">
             <AccordionTrigger>
-              Custom Animation
+              Tuỳ chỉnh Animation
             </AccordionTrigger>
             <AccordionContent>
               Override transition duration and easing via
@@ -626,60 +596,58 @@ function AccordionMicroShowcase() {
         </Accordion>
       </AccordionContent>
     </AccordionItem>
-  </Accordion>`}
-        >
-          <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>
-        </ExampleSection>
+  </Accordion>`} preview={
+                      <>
+              <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>Sử dụng nâng cao</AccordionTrigger>
+                            <AccordionContent>
+                              <Accordion>
+                                <AccordionItem value="controlled">
+                                  <AccordionTrigger>Chế độ Controlled</AccordionTrigger>
+                                  <AccordionContent>
+                                    Sử dụng props value và onValueChange để kiểm soát
+                                    các mục đang mở.
+                                  </AccordionContent>
+                                </AccordionItem>
+                                <AccordionItem value="animation">
+                                  <AccordionTrigger>Tuỳ chỉnh Animation</AccordionTrigger>
+                                  <AccordionContent>
+                                    Thay đổi thời gian chuyển đổi và easing thông qua className.
+                                  </AccordionContent>
+                                </AccordionItem>
+                              </Accordion>
+                            </AccordionContent>
+                          </AccordionItem>
+                        </Accordion>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        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?">
+      <ShowcaseExample title="FAQ Hoàn Chỉnh" description="Ví dụ một phần hỏi đáp FAQ hoàn chỉnh." code={`<Accordion className="w-full max-w-lg">
+    <AccordionItem value="Hỗ trợ Accessible (a11y) không?">
       <AccordionTrigger>Is it accessible?</AccordionTrigger>
       <AccordionContent>
-        Yes. It adheres to the WAI-ARIA design pattern.
+        Có chứ. Component tuân thủ chuẩn WAI-ARIA.
         Keyboard navigation and screen readers are fully
         supported.
       </AccordionContent>
@@ -709,44 +677,40 @@ function AccordionMicroShowcase() {
         other to create multi-level collapsible sections.
       </AccordionContent>
     </AccordionItem>
-  </Accordion>`}
-      >
-        <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.
-            </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.
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="Is it animated?">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It's animated by default with smooth transitions.
-            </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>
-      </ExampleSection>
-
-      {/* ── Use Case Comparison ─────────────────────── */}
-      <ExampleSection
-        label="🧭 Use Case Comparison"
-        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">
+  </Accordion>`} preview={
+                  <>
+          <Accordion className="w-full max-w-lg">
+                    <AccordionItem value="Hỗ trợ Accessible (a11y) không?">
+                      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+                      <AccordionContent>
+                        Có chứ. Component tuân thủ chuẩn WAI-ARIA.
+                      </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.
+                      </AccordionContent>
+                    </AccordionItem>
+                    <AccordionItem value="Is it animated?">
+                      <AccordionTrigger>Is it animated?</AccordionTrigger>
+                      <AccordionContent>
+                        Đầy đủ. Mở ra đóng lại mượt mà.
+                      </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>
+                  </>
+                } />
+
+      <ShowcaseExample title="🧭 So sánh Use Case" 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)." code={`<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">
@@ -777,15 +741,15 @@ function AccordionMicroShowcase() {
           className="w-full"
           items={[
             {
-              value: "Is it accessible?",
-              title: "Is it accessible?",
+              value: "Hỗ trợ Accessible (a11y) không?",
+              title: "Hỗ trợ Accessible (a11y) không?",
               content:
-                "Yes. It adheres to the WAI-ARIA design pattern." },
+                "Có chứ. Component tuân thủ chuẩn WAI-ARIA." },
             {
               value: "Is it styled?",
-              title: "Is it styled?",
+              title: "Có CSS sẵn không?",
               content:
-                "Yes. It comes with default styles that match the other components' aesthetic." },
+                "Có nha. Style mặc định bao đẹp, match với các component khác." },
           ]}
         />
       </div>
@@ -828,7 +792,7 @@ function AccordionMicroShowcase() {
             <AccordionTrigger className="gap-3">
               <SlidersHorizontalIcon className="size-4 text-primary" />
               <span className="flex-1 text-left">
-                Advanced Settings
+                Cài đặt nâng cao
               </span>
               <span className="mr-2 rounded bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wider text-primary">
                 New
@@ -855,133 +819,127 @@ function AccordionMicroShowcase() {
         </p>
       </div>
     </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">
-                <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>
-
-            <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>
-            </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
-                </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>`} 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">
+                          <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>
+
+                      <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: "Hỗ trợ Accessible (a11y) không?",
+                              title: "Hỗ trợ Accessible (a11y) không?",
+                              content: "Có chứ. Component tuân thủ chuẩn WAI-ARIA." },
+                            {
+                              value: "Is it styled?",
+                              title: "Có CSS sẵn không?",
+                              content:
+                                "Có nha. Style mặc định bao đẹp, match với các component khác." },
+                          ]}
+                        />
+                      </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>
+                      </div>
+                    </div>
 
-            <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 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>
+
+                      <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">Cài đặt nâng cao</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>
-                  </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>
-      </ExampleSection>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point (export default)
-// ──────────────────────────────────────────────────────────
 export default function AccordionShowcase() {
   return (
     <Showcase
       title="Accordion"
       description="Tập hợp các tiêu đề có thể tương tác xếp chồng lên nhau theo chiều dọc, mỗi tiêu đề sẽ mở ra một phần nội dung."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để gom nhóm các khối nội dung lớn nhằm tiết kiệm không gian
-            hiển thị (ví dụ: FAQ, Advanced Settings). Không nên dùng Accordion
+            hiển thị (ví dụ: FAQ, Cài đặt nâng cao). Không nên dùng Accordion
             nếu nội dung bên trong quá quan trọng và cần user phải nhìn thấy
             ngay lập tức.
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <AccordionMicroShowcase /> },
-        { label: "Macro (Preset)", content: <AccordionMacroShowcase /> },
-      ]}
+      micro={{ content: <AccordionMicroShowcase /> }}
+      macro={{ content: <AccordionMacroShowcase /> }}
     />
   );
 }