@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/id/dictionary/html.md

@@ -24,7 +24,7 @@ history:
     changes: "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
+    changes: "Memindahkan import dari `{{framework}}-intlayer` ke `{{framework}}-intlayer/html`"
   - version: 8.0.0
     date: 2026-01-22
     changes: "Menambahkan HTMLRenderer / useHTMLRenderer / utilitas renderHTML"
@@ -245,7 +245,7 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-  
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer/html";
 
@@ -261,9 +261,28 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     );
     ```
 
+    Anda juga dapat menggunakan renderer HTML Anda sendiri:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "react-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('react-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
+
   </Tab>
   <Tab label="Vue" value="vue">
-  
+
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
     import { intlayer } from "vue-intlayer";
@@ -283,9 +302,32 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     app.mount("#app");
     ```
 
+    Anda juga dapat menggunakan renderer HTML Anda sendiri:
+
+    ```typescript fileName="main.ts"
+    import { createApp, h } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+    app.use(intlayerHTML, {
+      renderHTML: async (html) => {
+        const { renderHTML } = await import('vue-intlayer/html');
+        return renderHTML(html);
+      },
+    });
+
+    app.mount("#app");
+    ```
+
+    > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
+
   </Tab>
   <Tab label="Svelte" value="svelte">
-   
+
     ```svelte fileName="App.svelte"
     <script lang="ts">
       import { HTMLProvider } from "svelte-intlayer/html";
@@ -301,9 +343,28 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     </HTMLProvider>
     ```
 
+    Anda juga dapat menggunakan renderer HTML Anda sendiri:
+
+    ```svelte fileName="App.svelte"
+    <script lang="ts">
+      import { HTMLProvider } from "svelte-intlayer/html";
+    </script>
+
+    <HTMLProvider
+      renderHTML={async (html) => {
+        const { renderHTML } = await import('svelte-intlayer/html');
+        return renderHTML(html);
+      }}
+    >
+      <slot />
+    </HTMLProvider>
+    ```
+
+    > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
+
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer/html";
 
@@ -318,9 +379,28 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     );
     ```
 
+    Anda juga dapat menggunakan renderer HTML Anda sendiri:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "preact-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('preact-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
+
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer/html";
 
@@ -335,6 +415,25 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     );
     ```
 
+    Anda juga dapat menggunakan renderer HTML Anda sendiri:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "solid-intlayer/html";
+
+    export const AppProvider = (props) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('solid-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {props.children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
+
   </Tab>
   <Tab label="Angular" value="angular">
 
@@ -353,6 +452,25 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     };
     ```
 
+    Anda juga dapat menggunakan renderer HTML Anda sendiri:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerHTMLProvider({
+          renderHTML: async (html) => {
+            const { renderHTML } = await import('angular-intlayer/html');
+            return renderHTML(html);
+          },
+        }),
+      ],
+    };
+    ```
+
+    > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
+
   </Tab>
 </Tabs>
 
@@ -401,9 +519,9 @@ Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pem
 
   </Tab>
   <Tab label="Vue" value="vue">
-   
+
     #### Komponen `<HTMLRenderer />`
-   
+
     ```vue
     <script setup>
     import { HTMLRenderer } from "vue-intlayer/html";
@@ -416,9 +534,9 @@ Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pem
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     #### Komponen `<HTMLRenderer />`
-   
+
     ```svelte
     <script lang="ts">
     import { HTMLRenderer } from "svelte-intlayer/html";
@@ -450,9 +568,9 @@ Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pem
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     #### Komponen `<HTMLRenderer />`
-   
+
     ```tsx
     import { HTMLRenderer } from "preact-intlayer/html";
 
@@ -481,9 +599,9 @@ Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pem
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     #### Komponen `<HTMLRenderer />`
-   
+
     ```tsx
     import { HTMLRenderer } from "solid-intlayer/html";
 
@@ -516,13 +634,13 @@ Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pem
     Render string HTML menggunakan layanan tersebut.
 
     ```typescript
-    import { IntlayerHTMLService } from "angular-intlayer";
+    import { IntlayerHTMLService } from "angular-intlayer/html";
 
     export class MyComponent {
       constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
-        return this.markdownService.renderMarkdown(html);
+        return this.markdownService.renderHTML(html);
       }
     }
     ```

package/docs/id/dictionary/insertion.md

@@ -100,20 +100,6 @@ Untuk menyiapkan konten penyisipan dalam proyek Intlayer Anda, buat modul konten
   </Tab>
 </Tabs>
 
-```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my_key",
-  "content": {
-    "myInsertion": {
-      "nodeType": "insertion",
-      "insertion": "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!",
-    },
-    "myInsertion2": "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-}
-```
-
 ## Menggunakan Konten Insertion dengan React Intlayer
 
 Untuk memanfaatkan konten insertion dalam sebuah komponen React, impor dan gunakan hook `useIntlayer` dari paket `react-intlayer`. Hook ini mengambil konten untuk kunci yang ditentukan dan memungkinkan Anda untuk mengirimkan sebuah objek yang memetakan setiap placeholder dalam konten Anda ke nilai yang ingin Anda tampilkan.

package/docs/id/dictionary/markdown.md

@@ -492,7 +492,7 @@ Utilitas ini merender **hanya string Markdown mentah** dan independen dari `useI
 
 <Tabs group="framework">
   <Tab label="React" value="react">
-  
+
     #### Komponen `<MarkdownRenderer />`
 
     Merender string Markdown dengan opsi tertentu.
@@ -531,7 +531,7 @@ Utilitas ini merender **hanya string Markdown mentah** dan independen dari `useI
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
-  
+
     #### Komponen `<MarkdownRenderer />`
 
     Merender string Markdown dengan opsi tertentu.
@@ -957,21 +957,38 @@ Utilitas ini merender **hanya string Markdown mentah** dan independen dari `useI
   </Tab>
   <Tab label="Angular" value="angular">
 
-    ```typescript fileName="app.module.ts"
-    import { NgModule } from '@angular/core';
-    import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
+          components: {
+            h1: { class: "text-2xl font-bold" },
+          },
+        }),
+      ],
+    };
+    ```
+
+
+    > MDX didukung — nama komponen apa pun yang digunakan di dalam Markdown Anda (misalnya `<MyCustomJSXComponent />`) diselesaikan terhadap peta `components`.
+
+    Anda juga dapat menggunakan perender markdown Anda sendiri:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
 
-    @NgModule({
-      imports: [
-        IntlayerMarkdownModule.forRoot({
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
           renderMarkdown: async (md) => {
             const { renderMarkdown } = await import('angular-intlayer/markdown');
             return renderMarkdown(md);
-          }
-        })
-      ]
-    })
-    export class AppModule {}
+          },
+        }),
+      ],
+    };
     ```
 
     > Mengimpor perender Markdown Anda secara dinamis adalah cara yang bagus untuk mengurangi ukuran bundel aplikasi Anda.
@@ -1047,7 +1064,7 @@ const MyComponent = () => {
 ```
 
   </Tab>
- 
+
   <Tab label="Vue" value="vue">
 
 Vue memiliki komponen `<Suspense>` bawaan. Bungkus komponen yang merender konten Markdown dalam batasan `<Suspense>`.

package/docs/id/dictionary/plurial.md

@@ -35,10 +35,72 @@ Berbeda dengan [`enu`](https://github.com/aymericzip/intlayer/blob/main/docs/doc
 
 ## Kapan Menggunakan `plural` vs `enu`
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## Menyiapkan Konten Jamak
+
+Untuk menyiapkan konten jamak dalam proyek Intlayer Anda, buat modul konten yang menggunakan helper `plural`. Kategori `other` wajib ada dan digunakan sebagai fallback ketika lokal tidak menentukan kategori yang lebih spesifik.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      id: plural({
+        other: "{{count}} lowongan",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "id": {
+          "nodeType": "plural",
+          "plural": {
+            "other": "{{count}} lowongan"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> Kategori yang didukung adalah `zero`, `one`, `two`, `few`, `many`, `other`. Anda hanya perlu mendeklarasikan kategori yang digunakan bahasa target Anda, Intlayer kembali ke `other` ketika tidak ada kategori spesifik yang cocok.
+>
+> Placeholder `{{count}}` secara otomatis diganti dengan hitungan yang Anda berikan saat runtime. Anda juga dapat menyertakan placeholder lain (lihat [Placeholder khusus](#custom-placeholders) di bawah).
+
+## Menggunakan Konten Jamak dengan React Intlayer
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+Untuk menggunakan konten jamak di dalam komponen React, ambil melalui hook `useIntlayer` dan panggil dengan hitungan. Lokal aktif dan hitungan digabungkan untuk memilih kategori CLDR yang cocok.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -60,7 +122,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Untuk menggunakan konten plural di Next.js Client Components, ambil melalui hook `useIntlayer` dan panggil dengan count. Berikut adalah contohnya:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +146,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Untuk menggunakan konten plural di komponen Vue, ambil konten tersebut melalui hook `useIntlayer` dan panggilnya dengan count. Berikut ini adalah contohnya:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +167,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Untuk menggunakan konten plural dalam komponen Svelte, ambil melalui hook `useIntlayer` dan panggilnya dengan jumlah. Store diakses dengan `$`. Berikut adalah contohnya:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,17 +186,22 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Untuk menggunakan konten plural dalam komponen Preact, ambil melalui hook `useIntlayer` dan panggilnya dengan hitungan. Berikut contohnya:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* Dalam bahasa Inggris:                               */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -146,7 +213,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Untuk menggunakan konten plural dalam komponen SolidJS, ambil melalui hook `useIntlayer` dan panggilnya dengan jumlah. Berikut adalah contohnya:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +235,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Untuk menggunakan konten plural dalam komponen Angular, ambil konten tersebut melalui hook `useIntlayer` dan panggilnya dengan hitungan. Berikut adalah contohnya:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -192,107 +259,6 @@ export class OpeningsComponent {
   </Tab>
   <Tab label="Vanilla JS" value="vanilla">
 
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## Menyiapkan Konten Jamak
-
-Untuk menyiapkan konten jamak dalam proyek Intlayer Anda, buat modul konten yang menggunakan helper `plural`. Kategori `other` wajib ada dan digunakan sebagai fallback ketika lokal tidak menentukan kategori yang lebih spesifik.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      id: plural({
-        other: "{{count}} lowongan",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "id": {
-          "nodeType": "plural",
-          "plural": {
-            "other": "{{count}} lowongan"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> Kategori yang didukung adalah `zero`, `one`, `two`, `few`, `many`, `other`. Anda hanya perlu mendeklarasikan kategori yang digunakan bahasa target Anda, Intlayer kembali ke `other` ketika tidak ada kategori spesifik yang cocok.
->
-> Placeholder `{{count}}` secara otomatis diganti dengan hitungan yang Anda berikan saat runtime. Anda juga dapat menyertakan placeholder lain (lihat [Placeholder khusus](#custom-placeholders) di bawah).
-
-## Menggunakan Konten Jamak dengan React Intlayer
-
-Untuk menggunakan konten jamak di dalam komponen React, ambil melalui hook `useIntlayer` dan panggil dengan hitungan. Lokal aktif dan hitungan digabungkan untuk memilih kategori CLDR yang cocok.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* Dalam bahasa Inggris:                               */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
 Anda dapat memanggil fungsi yang dikembalikan dengan dua cara yang setara:
 
 ```tsx
@@ -300,6 +266,9 @@ totalOpenings(21); // singkatan: hanya hitungan
 totalOpenings({ count: 21 }); // bentuk eksplisit
 ```
 
+  </Tab>
+</Tabs>
+
 ## Placeholder khusus
 
 String jamak dapat menyertakan placeholder selain `{{count}}`. Lewatkan dalam bentuk objek bersama `count`:

package/docs/id/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ Sebagai gantinya, deklarasikan varian sekali pada provider, persis seperti `loca
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ Sebagai gantinya, deklarasikan varian sekali pada provider, persis seperti `loca
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}