docs: enforce trailing slash configuration

packages/react-docs/next.config.mjs

@@ -341,6 +341,7 @@ const initialNextConfig = {
   distDir: process.env.NODE_ENV === 'production' ? 'dist' : 'build',
   output: process.env.NODE_ENV === 'production' ? 'export' : 'standalone',
   pageExtensions: ['page.js', 'page.mdx'],
+  trailingSlash: true,
 };
 
 const transformNextConfig = () => plugins.reduce((acc, next) => next(acc), initialNextConfig);

packages/react-docs/pages/components/badge/index.page.mdx

@@ -42,7 +42,7 @@ The badge visibility can be controlled using the `isInvisible` prop.
 
 ### Color
 
-The color of the badge can be changed by passing the `backgroundColor` prop. See the [colors](../theme/colors) section to learn more about colors.
+The color of the badge can be changed by passing the `backgroundColor` prop. See the [colors](../../theme/colors) section to learn more about colors.
 
 {render('./color')}
 

packages/react-docs/pages/components/box/index.page.mdx

@@ -20,23 +20,23 @@ By default, the `Box` component renders a `div` element. There might be cases wh
 
 Style props provide a way to use CSS-in-JS styling technique to pass styles as props to style components without having to use a separate CSS file.
 
-You can see the [Style Props](../styled-system/style-props) page to learn how to use style props.
+You can see the [Style Props](../../styled-system/style-props) page to learn how to use style props.
 
 {render('./using-style-props')}
 
 ### Using pseudo style props
 
 Styling elements with [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) and [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) can be accomplished by prefixing the pseudo selector with one or two underscores (`_` for pseudo-classees or `__` for pseudo-elements).
 
-You can see the [Pseudo Styled Props](../styled-system/pseudo-style-props) page to learn how to use pseudo style props.
+You can see the [Pseudo Styled Props](../../styled-system/pseudo-style-props) page to learn how to use pseudo style props.
 
 {render('./using-pseudo-style-props')}
 
 ### Using the `sx` prop
 
 {render('./using-the-sx-prop')}
 
-Read more on [the sx prop](../getting-started/the-sx-prop) page.
+Read more on [the sx prop](../../getting-started/the-sx-prop) page.
 
 ## Props
 

packages/react-docs/pages/components/button/index.page.mdx

@@ -1,6 +1,6 @@
 # Button
 
-`Button` is used to trigger an action or event, such as submitting a form, opening a [`Modal`](modal), canceling an action, or performing a delete operation.
+`Button` is used to trigger an action or event, such as submitting a form, opening a [`Modal`](../modal), canceling an action, or performing a delete operation.
 
 ## Import
 
@@ -56,13 +56,13 @@ To customize the visual appearance of the selected state, pass the `_selected` s
 
 ### Icons
 
-Icons are commonly used in toolbar buttons. You can use the `columnGap` style prop or the [Space](space) component to adjust the spacing between the icon and the label.
+Icons are commonly used in toolbar buttons. You can use the `columnGap` style prop or the [Space](../space) component to adjust the spacing between the icon and the label.
 
 {render('./icons')}
 
 ### Customization
 
-To create a custom button, you can use the style props for the [ButtonBase](button-base) component.
+To create a custom button, you can use the style props for the [ButtonBase](../button-base) component.
 
 ## Props
 

packages/react-docs/pages/components/color-mode/index.page.mdx

@@ -120,4 +120,4 @@ function App({ children }) {
 
 ## Managing Color Mode
 
-To manage color mode in your application, you can use the [useColorMode](../components/color-mode/useColorMode) hook.
+To manage color mode in your application, you can use the [useColorMode](../../components/color-mode/useColorMode) hook.

packages/react-docs/pages/components/color-style/index.page.mdx

@@ -75,7 +75,7 @@ The full configuration is displayed below:
   {jsonPrettify(colorStyle)}
 </PreformattedText>
 
-To manage color style in your application, you can use the [useColorStyle](../components/color-style/useColorStyle) hook.
+To manage color style in your application, you can use the [useColorStyle](../../components/color-style/useColorStyle) hook.
 
 ### Overriding color style
 

packages/react-docs/pages/components/flex/index.page.mdx

@@ -1,6 +1,6 @@
 # Flex
 
-`Flex` is a [`Box`](box) with `display: flex` and comes with helpful style shorthand props.
+`Flex` is a [`Box`](../box) with `display: flex` and comes with helpful style shorthand props.
 
 ## Import
 

packages/react-docs/pages/components/grid/index.page.mdx

@@ -1,6 +1,6 @@
 # Grid
 
-`Grid` is a [`Box`](box) with `display: grid` and comes with helpful style shorthand props.
+`Grid` is a [`Box`](../box) with `display: grid` and comes with helpful style shorthand props.
 
 ## Import
 

packages/react-docs/pages/components/icon/index.page.mdx

@@ -12,7 +12,7 @@ import {
 
 > <TextLabel><Flex alignItems="center" columnGap="2x" mb="1x"><AlertIcon /> IMPORTANT NOTICE</Flex></TextLabel>
 >
-> All built-in icons were removed in v2. See the [migration guide](../migration-guide/migrating-from-v1-to-v2#icons) while upgrading from v0 or v1. If you are looking for the pre-defined Tonic icon components, visit the [React Icons](../icons) page.
+> All built-in icons were removed in v2. See the [migration guide](../migration-guide/migrating-from-v1-to-v2#icons) while upgrading from v0 or v1. If you are looking for the pre-defined Tonic icon components, visit the [React Icons](../../icons) page.
 
 ## Import
 

packages/react-docs/pages/components/input-control/index.page.mdx

@@ -2,7 +2,7 @@
 
 `InputControl` is built on top of the native `Input` with the same appearance and behavior, except that it allows you to customize the input in a more convenient way. For example, input adornments can be added to the start, end, or both sides of the input.
 
-See the [Input](input) component for more information about the native input.
+See the [Input](../input) component for more information about the native input.
 
 ## Import
 

packages/react-docs/pages/components/input/index.page.mdx

@@ -2,7 +2,7 @@
 
 The `Input` component is used to get user input in a text field.
 
-Check out the [InputControl](input-control) component if you want to do more advanced stuff with the input.
+Check out the [InputControl](../input-control) component if you want to do more advanced stuff with the input.
 
 ## Import
 

packages/react-docs/pages/components/space/index.page.mdx

@@ -1,6 +1,6 @@
 # Space
 
-Space is [Box](box) with `display="inline-flex"`. You can specify either `width` or `height` to add space between two elements.
+Space is [Box](../box) with `display="inline-flex"`. You can specify either `width` or `height` to add space between two elements.
 
 ## Import
 

packages/react-docs/pages/components/svg-icon/index.page.mdx

@@ -1,4 +1,4 @@
 # SVGIcon
 
-The `SVGIcon` component has been moved to `@tonic-ui/react-icons`. Please visit [SVGIcon](../icons/svg-icon) for more information.
+The `SVGIcon` component has been moved to `@tonic-ui/react-icons`. Please visit [SVGIcon](../../icons/svg-icon) for more information.
 

packages/react-docs/pages/components/switch/index.page.mdx

@@ -1,6 +1,6 @@
 # Switch
 
-The `Switch` component is used as an alternative to the [Checkbox](checkbox) component. You can use it to render a single option that can be turned on or off.
+The `Switch` component is used as an alternative to the [Checkbox](../checkbox) component. You can use it to render a single option that can be turned on or off.
 
 ## Import
 

packages/react-docs/pages/components/table/index.page.mdx

@@ -259,7 +259,7 @@ And here's how you can use it in your code:
 
 ### TableScrollbar
 
-The `TableScrollbar` component has the same set of props as the [Scrollbar](./scrollbar#props) component.
+The `TableScrollbar` component has the same set of props as the [Scrollbar](../scrollbar#props) component.
 
 | Name | Type | Default | Description |
 | :--- | :--- | :------ | :---------- |

packages/react-docs/pages/components/tag/index.page.mdx

@@ -23,7 +23,7 @@ Use the `variant` prop to change the visual style of the `Tag`. You can set the
 
 ### Custom colors
 
-The color of the tag can be changed by passing the `backgroundColor`, `borderColor`, and `color` props. See the [colors](../theme/colors) section to learn more about colors.
+The color of the tag can be changed by passing the `backgroundColor`, `borderColor`, and `color` props. See the [colors](../../theme/colors) section to learn more about colors.
 
 {render('./custom-colors')}
 

packages/react-docs/pages/components/toast-manager/index.page.mdx

@@ -92,7 +92,7 @@ To remove a toast, you can use the `onClose` function, triggered by the user cli
 toast.remove(id);
 ```
 
-See the [useToastManager](./toast-manager/useToastManager) Hook for detailed usage.
+See the [useToastManager](../toast-manager/useToastManager) Hook for detailed usage.
 
 ## Commonly Asked Questions
 

packages/react-docs/pages/contributing/react-components-part-1.page.mdx

@@ -5,7 +5,7 @@ import Code from '../components/code/index.page.mdx'
 
 ## Workflow
 
-This example will walk you through the process of creating a [Code](../components/code) component. This component serves as a straightforward example to help you understand the entire development and documentation flow.
+This example will walk you through the process of creating a [Code](../../components/code) component. This component serves as a straightforward example to help you understand the entire development and documentation flow.
 
 {render('./react-components-part-1-example')}
 
@@ -184,7 +184,7 @@ Include the new documentation page in `packages/react-docs/config/sidebar-routes
 
 #### Step 3: API structure
 
-Refer to the existing [Code component documentation](../components/code) for details.
+Refer to the existing [Code component documentation](../../components/code) for details.
 
 <BorderedBox>
   <Code />

packages/react-docs/pages/contributing/react-components-part-2.page.mdx

@@ -204,9 +204,9 @@ The `variant` prop offers various styles tailored to specific component needs. H
 
 Variant | Description | Used In
 :--- | :---------- | :------
-`solid`    | The background and the border are filled with the same color.   | [Alert](../components/alert), [Badge](../components/badge), [Divider](../components/divider), [Tag](../components/tag)
-`filled`   | The background and the border are filled with different colors. | [Input](../components/input), [InputControl](../components/input-control), [Select](../components/select), [Tabs](../components/tabs), [SearchInput](../components/search-input), [Textarea](../components/textarea)
-`flush`    | Only the bottom bordered is rendered. | [Input](../components/input), [InputControl](../components/input-control), [SearchInput](../components/search-input)
-`outline`  | Only the border is filled.                                      | [Alert](../components/alert), [Input](../components/input), [InputControl](../components/input-control), [SearchInput](../components/search-input), [Select](../components/select), [Table](../components/table), [Tag](../components/tag), [Textarea](../components/textarea)
-`unstyled` | No style is applied.                                            | [Input](../components/input), [InputControl](../components/input-control), [SearchInput](../components/search-input), [Select](../components/select), [Tabs](../components/tabs), [Textarea](../components/textarea)
-`default`  | The component's default style.                                  | [Button](../components/button), [Table](../components/table), [Tabs](../components/tabs)
+`solid`    | The background and the border are filled with the same color.   | [Alert](../../components/alert), [Badge](../../components/badge), [Divider](../../components/divider), [Tag](../../components/tag)
+`filled`   | The background and the border are filled with different colors. | [Input](../../components/input), [InputControl](../../components/input-control), [Select](../../components/select), [Tabs](../../components/tabs), [SearchInput](../../components/search-input), [Textarea](../../components/textarea)
+`flush`    | Only the bottom bordered is rendered. | [Input](../../components/input), [InputControl](../../components/input-control), [SearchInput](../../components/search-input)
+`outline`  | Only the border is filled.                                      | [Alert](../../components/alert), [Input](../../components/input), [InputControl](../../components/input-control), [SearchInput](../../components/search-input), [Select](../../components/select), [Table](../../components/table), [Tag](../../components/tag), [Textarea](../../components/textarea)
+`unstyled` | No style is applied.                                            | [Input](../../components/input), [InputControl](../../components/input-control), [SearchInput](../../components/search-input), [Select](../../components/select), [Tabs](../../components/tabs), [Textarea](../../components/textarea)
+`default`  | The component's default style.                                  | [Button](../../components/button), [Table](../../components/table), [Tabs](../../components/tabs)

packages/react-docs/pages/contributing/react-documentation-site.page.mdx

@@ -1,6 +1,6 @@
 # Contributing to Documentation Site
 
-Visit [this page](../contributing#set-up-documentation-site) for instructions on setting up the development environment for the documentation site.
+Visit [this page](../../contributing#set-up-documentation-site) for instructions on setting up the development environment for the documentation site.
 
 ## Overview
 
@@ -11,15 +11,15 @@ Name | Description
 404.page.js | Handles the 404 error page, displayed when a route is not found.
 _app.page.js | Custom `App` component that controls the page initialization and creates a shared layout between page changes.
 _document.page.js | Custom `Document` component that allows you to modify the initial HTML document structure. You can configure the `<html>` and `<body>` tags, set up meta tags, or add scripts and styles necessary for server-side rendering.
-[getting-started/](../getting-started/usage) | Contains the getting started guide for Tonic UI.
-[contributing/](../contributing) | Contains the contributing guidelines for Tonic UI.
-[migrations/](../migrations) | Contains the migration guide for Tonic UI.
-[patterns/](../patterns) | Contains documentation on design patterns and best practices for Tonic UI.
-[components/](../components) | Contains documentation for Tonic UI React components: `@tonic-ui/react`
-[hooks/](../hooks) | Contains documentation for Tonic UI React Hooks: `@tonic-ui/react-hooks`
-[icons/](../icons) | Contains documentation for Tonic UI React Icons: `@tonic-ui/react-icons`
-[styled-system/](../styled-system) | Contains documentation for Tonic UI Styled System: `@tonic-ui/styled-system`
-[theme/](../theme) | Contains documentation for Tonic UI theme: `@tonic-ui/theme`
+[getting-started/](../../getting-started/usage) | Contains the getting started guide for Tonic UI.
+[contributing/](../../contributing) | Contains the contributing guidelines for Tonic UI.
+[migrations/](../../migrations) | Contains the migration guide for Tonic UI.
+[patterns/](../../patterns) | Contains documentation on design patterns and best practices for Tonic UI.
+[components/](../../components) | Contains documentation for Tonic UI React components: `@tonic-ui/react`
+[hooks/](../../hooks) | Contains documentation for Tonic UI React Hooks: `@tonic-ui/react-hooks`
+[icons/](../../icons) | Contains documentation for Tonic UI React Icons: `@tonic-ui/react-icons`
+[styled-system/](../../styled-system) | Contains documentation for Tonic UI Styled System: `@tonic-ui/styled-system`
+[theme/](../../theme) | Contains documentation for Tonic UI theme: `@tonic-ui/theme`
 [playground/](../playground) | Demonstrates how to create interactive applications with Tonic UI.
 
 > Tip: Page extensions should be either `.page.js` or `.page.mdx`; otherwise, they will be treated as non-page files. If you need to use other page extensions, you can configure them in `next.config.js`.

packages/react-docs/pages/contributing/react-icons.page.mdx

@@ -41,7 +41,7 @@ After generating the icons, it is important to verify that the new icons are cor
 yarn dev
 ```
 
-2. Open your browser and navigate to the documentation site (usually `http://localhost:3000`). Browse through the [React Icons](../icons) page to ensure they are displaying correctly.
+2. Open your browser and navigate to the documentation site (usually `http://localhost:3000`). Browse through the [React Icons](../../icons) page to ensure they are displaying correctly.
 
 ## Submitting Your Contribution
 

packages/react-docs/pages/getting-started/icons/index.page.mdx

@@ -2,6 +2,6 @@
 
 ## Quick Links
 
-* Explore a variety of pre-defined icons with [React Icons](../icons).
-* Discover how to create custom SVG icons using [SVGIcon](../icons/svg-icon).
-* Learn about migrating icon components when upgrading from v1 to v2 [here](../migrations/migrating-from-v1-to-v2#icons).
+* Explore a variety of pre-defined icons with [React Icons](../../icons).
+* Discover how to create custom SVG icons using [SVGIcon](../../icons/svg-icon).
+* Learn about migrating icon components when upgrading from v1 to v2 [here](../../migrations/migrating-from-v1-to-v2#icons).

packages/react-docs/pages/getting-started/installation/index.page.mdx

@@ -28,10 +28,10 @@ It will install all the dependencies for you.
 | :--- | :------ | :---------- | :----- | :-- | :------------ |
 | `@tonic-ui/changelog-github` | {pkg_changelog_github.version} | {pkg_changelog_github.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/changelog-github) | - | - |
 | `@tonic-ui/codemod` | {pkg_codemod.version} | {pkg_codemod.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/codemod) | [View](https://www.npmjs.com/package/@tonic-ui/codemod) | - |
-| `@tonic-ui/react` | {pkg_react.version} | {pkg_react.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react) | [View](https://www.npmjs.com/package/@tonic-ui/react) | [View](../components) |
+| `@tonic-ui/react` | {pkg_react.version} | {pkg_react.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react) | [View](https://www.npmjs.com/package/@tonic-ui/react) | [View](../../components) |
 | `@tonic-ui/react-base` | {pkg_react_base.version} | {pkg_react_base.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-base) | [View](https://www.npmjs.com/package/@tonic-ui/react-base) | - |
-| `@tonic-ui/react-hooks` | {pkg_react_hooks.version} | {pkg_react_hooks.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-hooks) | [View](https://www.npmjs.com/package/@tonic-ui/react-hooks) | [View](../hooks) |
-| `@tonic-ui/react-icons` | {pkg_react_icons.version} | {pkg_react_icons.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-icons) | [View](https://www.npmjs.com/package/@tonic-ui/react-icons) | [View](../icons) |
-| `@tonic-ui/styled-system` | {pkg_styled_system.version} | {pkg_styled_system.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/styled-system) | [View](https://www.npmjs.com/package/@tonic-ui/styled-system) | [View](../styled-system) |
-| `@tonic-ui/theme` | {pkg_theme.version} | {pkg_theme.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/theme) | [View](https://www.npmjs.com/package/@tonic-ui/theme) | [View](../theme) |
+| `@tonic-ui/react-hooks` | {pkg_react_hooks.version} | {pkg_react_hooks.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-hooks) | [View](https://www.npmjs.com/package/@tonic-ui/react-hooks) | [View](../../hooks) |
+| `@tonic-ui/react-icons` | {pkg_react_icons.version} | {pkg_react_icons.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-icons) | [View](https://www.npmjs.com/package/@tonic-ui/react-icons) | [View](../../icons) |
+| `@tonic-ui/styled-system` | {pkg_styled_system.version} | {pkg_styled_system.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/styled-system) | [View](https://www.npmjs.com/package/@tonic-ui/styled-system) | [View](../../styled-system) |
+| `@tonic-ui/theme` | {pkg_theme.version} | {pkg_theme.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/theme) | [View](https://www.npmjs.com/package/@tonic-ui/theme) | [View](../../theme) |
 | `@tonic-ui/utils` | {pkg_utils.version} | {pkg_utils.description} | [View](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/utils) | [View](https://www.npmjs.com/package/@tonic-ui/utils) | - |