From 868f27771291fbc91d0b92114c285aa328d3d172 Mon Sep 17 00:00:00 2001
From: Faiz Khairi <ifaizkhairi@gmail.com>
Date: Mon, 23 Mar 2026 16:47:24 +0800
Subject: [PATCH] docs: fix incorrect imports in InputOTP and Tabs code
 examples

Replace internal alias `@/components/myds` with the public package path
`@govtechmy/myds-react/{component}` in documentation code blocks.

Fixes #290

Only code examples (inside ``` blocks) are updated. Top-level MDX imports
remain as `@/components/myds` since the docs app barrel file needs them
for live component rendering.

- input-otp.mdx / input-otp.ms.mdx: 6 code blocks each
- tabs.mdx / tabs.ms.mdx: 5-6 code blocks each
---
 .../content/docs/develop/(components)/input-otp.mdx  | 12 ++++++------
 .../docs/develop/(components)/input-otp.ms.mdx       | 12 ++++++------
 apps/docs/content/docs/develop/(components)/tabs.mdx | 10 +++++-----
 .../content/docs/develop/(components)/tabs.ms.mdx    | 10 +++++-----
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/apps/docs/content/docs/develop/(components)/input-otp.mdx b/apps/docs/content/docs/develop/(components)/input-otp.mdx
index 9abb4501..e8ff5be3 100644
--- a/apps/docs/content/docs/develop/(components)/input-otp.mdx
+++ b/apps/docs/content/docs/develop/(components)/input-otp.mdx
@@ -20,7 +20,7 @@ import { InputOTPControlledExample } from "./input-otp.client";
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4}>
       <InputOTPSlot index={0} />
@@ -45,7 +45,7 @@ import { InputOTPControlledExample } from "./input-otp.client";
 ## Usage
 
 ```ts copy title="Import"
-import { InputOTP, InputOTPSlot } from "@/components/myds";
+import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp";
 ```
 
 ```tsx copy title="Anatomy"
@@ -74,7 +74,7 @@ Set the `invalid` prop to true to mark the input as invalid.
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4} invalid>
       <InputOTPSlot index={0} />
@@ -102,7 +102,7 @@ Disable the input by setting the `disabled` prop to true.
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4} disabled defaultValue="AB12">
       <InputOTPSlot index={0} />
@@ -125,7 +125,7 @@ The input can be controlled by setting the `value` and `onChange` props. In the
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     const [value, setValue] = useState("");
 
@@ -161,7 +161,7 @@ Pass a regex to the `pattern` prop to only accept values of a certain pattern. F
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4} pattern="^[0-9]{0,4}$">
       <InputOTPSlot index={0} />
diff --git a/apps/docs/content/docs/develop/(components)/input-otp.ms.mdx b/apps/docs/content/docs/develop/(components)/input-otp.ms.mdx
index f6b20ef6..40354450 100644
--- a/apps/docs/content/docs/develop/(components)/input-otp.ms.mdx
+++ b/apps/docs/content/docs/develop/(components)/input-otp.ms.mdx
@@ -20,7 +20,7 @@ import { InputOTPControlledExample } from "./input-otp.client";
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4}>
       <InputOTPSlot index={0} />
@@ -45,7 +45,7 @@ import { InputOTPControlledExample } from "./input-otp.client";
 ## Usage
 
 ```ts copy title="Import"
-import { InputOTP, InputOTPSlot } from "@/components/myds";
+import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp";
 ```
 
 ```tsx copy title="Anatomi"
@@ -74,7 +74,7 @@ Tetapkan prop `invalid` kepada true untuk menandakan input sebagai tidak sah.
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4} invalid>
       <InputOTPSlot index={0} />
@@ -102,7 +102,7 @@ Nyahaktifkan input dengan menetapkan prop `disabled` kepada true.
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4} disabled defaultValue="AB12">
       <InputOTPSlot index={0} />
@@ -125,7 +125,7 @@ Input boleh dikawal dengan menetapkan props `value` dan `onChange`. Dalam contoh
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     const [value, setValue] = useState("");
 
@@ -161,7 +161,7 @@ Hantar regex kepada prop `pattern` untuk hanya menerima nilai corak tertentu. Se
   </Tab>
   <Tab value="Code">
     ```tsx
-    import { InputOTP, InputOTPSlot } from "@/components/myds"
+    import { InputOTP, InputOTPSlot } from "@govtechmy/myds-react/input-otp"
 
     <InputOTP maxLength={4} pattern="^[0-9]{0,4}$">
       <InputOTPSlot index={0} />
diff --git a/apps/docs/content/docs/develop/(components)/tabs.mdx b/apps/docs/content/docs/develop/(components)/tabs.mdx
index a943d6c3..7a94aa56 100644
--- a/apps/docs/content/docs/develop/(components)/tabs.mdx
+++ b/apps/docs/content/docs/develop/(components)/tabs.mdx
@@ -37,7 +37,7 @@ import { Tab, Tabs as FumaTabs } from "fumadocs-ui/components/tabs";
            Tabs,
            TabsContent,
            TabsCounter,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
 
        <Tabs
            defaultValue="1"
@@ -161,7 +161,7 @@ Use the `variant` prop to change the tabs style. Currently, there are 3 designs
            Tabs,
            TabsContent,
            TabsCounter,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
 
        <Tabs
            defaultValue="1"
@@ -361,7 +361,7 @@ Use the `size` prop to change the size of the tabs. Examples of use cases for bo
            Tabs,
            TabsContent,
            TabsCounter,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
 
        <Tabs
            defaultValue="1"
@@ -663,7 +663,7 @@ Leading icons serve as visual indicators placed at the start of tab items, enhan
            Tabs,
            TabsContent,
            TabsCounter,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
 
        <TabsList>
            <TabsTrigger value="1">
@@ -761,7 +761,7 @@ Counters appear as numerical indicators after tab labels, providing at-a-glance
             Tabs,
             TabsContent,
             TabsCounter,
-        } from "@/components/myds";
+        } from "@govtechmy/myds-react/tabs";
 
         <Tabs
             defaultValue="1"
diff --git a/apps/docs/content/docs/develop/(components)/tabs.ms.mdx b/apps/docs/content/docs/develop/(components)/tabs.ms.mdx
index 6ff31152..a9471dec 100644
--- a/apps/docs/content/docs/develop/(components)/tabs.ms.mdx
+++ b/apps/docs/content/docs/develop/(components)/tabs.ms.mdx
@@ -37,7 +37,7 @@ import { Tab, Tabs as FumaTabs } from "fumadocs-ui/components/tabs";
             Tabs,
             TabsContent,
             TabsCounter,
-        } from "@/components/myds";
+        } from "@govtechmy/myds-react/tabs";
 
         <Tabs
             defaultValue="1"
@@ -161,7 +161,7 @@ Gunakan prop `variant` untuk menukar gaya tab. Pada masa ini, terdapat 3 reka be
             Tabs,
             TabsContent,
             TabsCounter,
-        } from "@/components/myds";
+        } from "@govtechmy/myds-react/tabs";
 
         <Tabs
             defaultValue="1"
@@ -343,7 +343,7 @@ Gunakan prop `size` untuk menukar saiz tab. Contoh penggunaan untuk kedua-dua je
            Tabs,
            TabsContent,
            TabsCounter,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
 
            <Tabs
                defaultValue="1"
@@ -597,7 +597,7 @@ Ikon ("leading icon") berfungsi sebagai penunjuk visual yang diletakkan di tab,
        import {
            Tabs,
            TabsContent,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
        import {
            ArrowForwardIcon
        } from "@govtechmy/myds-react/icon";
@@ -699,7 +699,7 @@ Pembilang ("Counter") muncul sebagai penunjuk berangka selepas label tab, member
            Tabs,
            TabsContent,
            TabsCounter,
-       } from "@/components/myds";
+       } from "@govtechmy/myds-react/tabs";
 
        <Tabs
            defaultValue="1"