Merge pull request #12 from pheralb/next

📚 Fix documentation - Next.js Guide + toast & toaster.

Author: pheralb

website/src/docs/dark-mode.mdx

@@ -1,7 +1,7 @@
 ---
-title: 'Dark Mode'
-description: 'This page shows examples of how to use next-themes (Next.js) or remix-themes (Remix) libraries'
-category: 'Customization'
+title: "Dark Mode"
+description: "This page shows examples of how to set up the dark mode theme for the Toaster component. Using Vite, Next.js (with next-themes) or Remix (with remix-themes)."
+category: "Customization"
 ---
 
 > 💡 If you need to activate the dark mode directly, you can use the `theme` property: [`show`](/toaster#theme)
@@ -14,9 +14,9 @@ category: 'Customization'
 - Snippet from [`shadcn/ui` Dark Mode documentation](https://ui.shadcn.com/docs/dark-mode/vite#dark-mode).
 
 ```tsx
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from "react";
 
-export type Theme = 'dark' | 'light' | 'system';
+export type Theme = "dark" | "light" | "system";
 
 type ThemeProviderProps = {
   children: React.ReactNode;
@@ -30,16 +30,16 @@ type ThemeProviderState = {
 };
 
 const initialState: ThemeProviderState = {
-  theme: 'system',
+  theme: "system",
   setTheme: () => null,
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
-  defaultTheme = 'system',
-  storageKey = 'my-ui-theme',
+  defaultTheme = "system",
+  storageKey = "my-ui-theme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
@@ -49,13 +49,13 @@ export function ThemeProvider({
   useEffect(() => {
     const root = window.document.documentElement;
 
-    root.classList.remove('light', 'dark');
+    root.classList.remove("light", "dark");
 
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
         .matches
-        ? 'dark'
-        : 'light';
+        ? "dark"
+        : "light";
 
       root.classList.add(systemTheme);
       root.style.colorScheme = systemTheme;
@@ -85,7 +85,7 @@ export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
 
   if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider');
+    throw new Error("useTheme must be used within a ThemeProvider");
 
   return context;
 };
@@ -101,10 +101,10 @@ export const useTheme = () => {
 ```tsx
 // 📄 components/ToasterProvider.tsx
 
-import type { ToasterProperties } from '@pheralb/toast';
-import { Toaster } from '@pheralb/toast';
+import type { ToasterProperties } from "@pheralb/toast";
+import { Toaster } from "@pheralb/toast";
 
-import { useTheme } from './themeProvider';
+import { useTheme } from "./themeProvider";
 
 const ToasterProvider = (props: ToasterProperties) => {
   const { theme } = useTheme();
@@ -116,12 +116,12 @@ export default ToasterProvider;
 
 2. Import the `ToasterProvider` component in the `main.tsx` file:
 
-```tsx
+```tsx {3, 9}
 // 📄 main.tsx
 
-import ToasterProvider from './providers/toasterProvider';
+import ToasterProvider from "./providers/toasterProvider";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <ThemeProvider defaultTheme="system" storageKey="my-ui-theme">
       <App />
@@ -143,31 +143,31 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 ```tsx
 // 📄 components/ToasterNextTheme.tsx
 
-'use client';
+"use client";
 
 import {
   Toaster,
   type ToastTheme,
   type ToasterProperties,
-} from '@pheralb/toast';
+} from "@pheralb/toast";
 
-import { useTheme } from 'next-themes';
+import { useTheme } from "next-themes";
 
 const ToasterNextTheme = (props: ToasterProperties) => {
   const { theme } = useTheme();
-  return (
-    <Toaster toastFont="font-sans" theme={theme as ToastTheme} {...props} />
-  );
+  return <Toaster theme={theme as ToastTheme} {...props} />;
 };
 
 export default ToasterNextTheme;
 ```
 
 2. Import the `ToasterNextTheme` component in the `layout/app.tsx` file:
 
-```tsx
+```tsx {3, 20}
 // 📄 layout/app.tsx
 
+import ToasterNextTheme from "@/components/ToasterNextTheme";
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -197,7 +197,7 @@ export default function RootLayout({
 
 Import the `useTheme` hook from `remix-themes` and change the theme value:
 
-```tsx
+```tsx {4, 19}
 // 📄 app/root.tsx
 
 import clsx from 'clsx';

website/src/docs/toast.mdx

@@ -18,13 +18,13 @@ toast.default({
 
 Show a toast with a specific variant:
 
-<ToastVariantExamples client:only="react" />
+<ToastVariantExamples />
 
 ## toast.variant with action
 
 Show a button and execute a custom function when clicked. The default text for the button is `Action`:
 
-<ToastActionsExamples client:only="react" />
+<ToastActionsExamples />
 
 ```tsx {3-8}
 toast.default({
@@ -42,7 +42,7 @@ toast.default({
 
 Show a toast with loading state and will update automatically after the promise resolves or fails:
 
-<ToastLoadingExample client:only="react" />
+<ToastLoadingExample />
 
 ```tsx {4-18}
 toast.loading({

website/src/docs/toaster.mdx

@@ -14,13 +14,15 @@ import { Toaster } from "@pheralb/toast";
 
 By default, the position is `bottom-right`. You can customize the position of the toasts by using the `position` prop of the `Toaster` component:
 
-<Positions client:only="react" />
+<Positions />
 
 ## Theme
 
 You can set the theme of the toasts using the `theme` prop, which accepts the values: `light`, `dark`, and `system`:
 
-<ThemeExamples client:only="react" />
+<ThemeExamples />
+
+> 💡 If you want to configure the theme automatically, read [`Dark Mode` guide](/dark-mode).
 
 ## MaxToasts