fix: apply fixes & formatting from biomejs

public/site.webmanifest

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/App.tsx

@@ -1,37 +1,37 @@
+import { Code } from "@/components/LoadedCode";
 import {
   Route,
+  RouterProvider,
   createBrowserRouter,
   createRoutesFromElements,
-  RouterProvider,
   redirect,
 } from "react-router-dom";
-import MainLayout from "./MainLayout";
-import Home from "./Home";
 import DocsLayout from "./DocsLayout";
-import ErrorBoundary from "./ErrorHandler";
 import DynamicLayout from "./DynamicLayout";
-import { Code } from "@/components/LoadedCode";
+import ErrorBoundary from "./ErrorHandler";
+import Home from "./Home";
+import MainLayout from "./MainLayout";
 
-import DocsIntroduction, {
-  tableOfContents as docsIntroductionToc,
-} from "./docs/introduction.mdx";
-import DocsInstallation, {
-  tableOfContents as docsInstallationToc,
-} from "./docs/installation.mdx";
 import DocsConfiguration, {
   tableOfContents as docsConfigurationToc,
 } from "./docs/configuration.mdx";
+import DocsInstallation, {
+  tableOfContents as docsInstallationToc,
+} from "./docs/installation.mdx";
+import DocsIntroduction, {
+  tableOfContents as docsIntroductionToc,
+} from "./docs/introduction.mdx";
 
-import { HeadingContext } from "./HeadingContext";
+import { Tooltip, TooltipContent } from "@pswui/Tooltip";
 import React, {
-  ForwardedRef,
+  type ForwardedRef,
   forwardRef,
   useContext,
   useEffect,
   useRef,
   useState,
 } from "react";
-import { Tooltip, TooltipContent } from "@pswui/Tooltip";
+import { HeadingContext } from "./HeadingContext";
 
 function buildThresholdList() {
   const thresholds: number[] = [];
@@ -46,8 +46,10 @@ function buildThresholdList() {
   return thresholds;
 }
 
+type HashedHeaderProps = React.ComponentPropsWithoutRef<"h1">;
+
 function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
-  return (prop: any, ref: ForwardedRef<HTMLHeadingElement>) => {
+  return (prop: HashedHeaderProps, ref: ForwardedRef<HTMLHeadingElement>) => {
     const internalRef = useRef<HTMLHeadingElement | null>(null);
     const [_, setActiveHeadings] = useContext(HeadingContext);
 
@@ -74,7 +76,7 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
       return () => {
         observer.disconnect();
       };
-    }, [internalRef.current]);
+    }, [setActiveHeadings]);
 
     const [status, setStatus] = useState<"normal" | "error" | "success">(
       "normal",
@@ -97,7 +99,10 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
     }, [status]);
 
     return (
-      <Tooltip asChild position={"right"}>
+      <Tooltip
+        asChild
+        position={"right"}
+      >
         <Level
           ref={(el) => {
             internalRef.current = el;
@@ -111,7 +116,7 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
           onClick={async (e) => {
             try {
               await navigator.clipboard.writeText(
-                window.location.href.split("#")[0] + "#" + e.currentTarget.id,
+                `${window.location.href.split("#")[0]}#${e.currentTarget.id}`,
               );
               setStatus("success");
             } catch (e) {
@@ -121,7 +126,11 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
           {...restProp}
         >
           {children}
-          <TooltipContent status={status} offset={"lg"} delay={"early"}>
+          <TooltipContent
+            status={status}
+            offset={"lg"}
+            delay={"early"}
+          >
             <p className={"text-base font-normal whitespace-nowrap not-prose"}>
               {messages[status]}
             </p>
@@ -133,36 +142,51 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
 }
 
 const overrideComponents = {
-  pre: (props: any) => {
+  pre: (props: React.ComponentPropsWithoutRef<"pre">) => {
-    const {
+    if (!React.isValidElement(props.children)) {
-      props: { children, className },
+      return null;
-    } = React.cloneElement(React.Children.only(props.children));
+    }
 
-    const language =
+    const { props: clonedProps } = React.cloneElement(
-      (!className || !className.includes("language-")
+      React.Children.only(props.children),
-        ? "typescript"
+    );
-        : /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
+
+    const { children, className } = clonedProps as {
+      children: React.ReactNode;
+      className?: string;
+    };
+
+    let language = "typescript";
+
+    if (className) {
+      const detectedLanguage = /language-([a-z]+)/.exec(className);
+      if (detectedLanguage) language = detectedLanguage[1];
+    }
 
     return <Code language={language}>{children as string}</Code>;
   },
-  code: forwardRef<HTMLElement, any>((props: any, ref) => (
+  code: forwardRef<HTMLElement, { className?: string }>((props, ref) => (
     <code
       ref={ref}
       {...props}
       className={`${props.className} rounded-md bg-neutral-800 text-orange-500 font-light p-1 before:content-none after:content-none`}
     />
   )),
-  table: forwardRef<HTMLTableElement, any>((props: any, ref) => (
+  table: forwardRef<HTMLTableElement, { className?: string }>((props, ref) => (
     <div className="overflow-auto">
-      <table ref={ref} {...props} className={`${props.className}`} />
+      <table
+        ref={ref}
+        {...props}
+        className={`${props.className}`}
+      />
     </div>
   )),
-  h1: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h1")),
+  h1: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h1")),
-  h2: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h2")),
+  h2: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h2")),
-  h3: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h3")),
+  h3: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h3")),
-  h4: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h4")),
+  h4: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h4")),
-  h5: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h5")),
+  h5: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h5")),
-  h6: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h6")),
+  h6: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h6")),
 };
 
 const docsModules = import.meta.glob("./docs/components/*.mdx");
@@ -194,7 +218,11 @@ const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
+    <Route
+      path="/"
+      element={<MainLayout />}
+      errorElement={<ErrorBoundary />}
+    >
       <Route
         index
         loader={() =>
@@ -204,8 +232,14 @@ const router = createBrowserRouter(
         }
         element={<Home />}
       />
-      <Route path="docs" element={<DocsLayout />}>
+      <Route
-        <Route index loader={() => redirect("/docs/introduction")} />
+        path="docs"
+        element={<DocsLayout />}
+      >
+        <Route
+          index
+          loader={() => redirect("/docs/introduction")}
+        />
         <Route
           path="introduction"
           element={

src/DynamicLayout.tsx

@@ -1,5 +1,5 @@
-import { ReactNode, Fragment, useState, useContext } from "react";
+import type { Toc } from "@stefanprobst/rehype-extract-toc";
-import { type Toc } from "@stefanprobst/rehype-extract-toc";
+import { Fragment, type ReactNode, useContext, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { HeadingContext } from "./HeadingContext";
 

src/ErrorHandler.tsx

@@ -1,6 +1,6 @@
 import { isRouteErrorResponse, useRouteError } from "react-router-dom";
-import UnexpectedError from "./errors/Unexpected";
 import PageNotFound from "./errors/PageNotFound";
+import UnexpectedError from "./errors/Unexpected";
 
 function ErrorBoundary() {
   const error = useRouteError();
@@ -8,12 +8,10 @@ function ErrorBoundary() {
   if (isRouteErrorResponse(error)) {
     if (error.status === 404) {
       return <PageNotFound />;
-    } else {
-      return <UnexpectedError />;
-    }
-  } else {
-    return <UnexpectedError />;
     }
   }
 
+  return <UnexpectedError />;
+}
+
 export default ErrorBoundary;

src/HeadingContext.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, createContext } from "react";
+import { type Dispatch, type SetStateAction, createContext } from "react";
 
 export const HeadingContext = createContext<
   [string[], Dispatch<SetStateAction<string[]>>]

src/Home.tsx

@@ -1,5 +1,5 @@
-import { Link } from "react-router-dom";
 import { Button } from "@pswui/Button";
+import { Link } from "react-router-dom";
 
 function Home() {
   return (
@@ -15,10 +15,16 @@ function Home() {
           </p>
         </header>
         <div className="flex flex-row justify-center items-center gap-2">
-          <Button asChild preset="default">
+          <Button
+            asChild
+            preset="default"
+          >
             <Link to="/docs">Get Started</Link>
           </Button>
-          <Button asChild preset="ghost">
+          <Button
+            asChild
+            preset="ghost"
+          >
             <Link to="/docs/components">Components</Link>
           </Button>
         </div>

src/MainLayout.tsx

@@ -1,9 +1,4 @@
-import { useEffect, useState } from "react";
-import { Link, Outlet, useLocation } from "react-router-dom";
 import { Button } from "@pswui/Button";
-import RouteObject from "./RouteObject";
-import { Toaster } from "@pswui/Toast";
-import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
 import {
   DrawerClose,
   DrawerContent,
@@ -11,12 +6,17 @@ import {
   DrawerRoot,
   DrawerTrigger,
 } from "@pswui/Drawer";
+import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
+import { Toaster } from "@pswui/Toast";
+import { useEffect, useState } from "react";
+import { Link, Outlet, useLocation } from "react-router-dom";
+import RouteObject from "./RouteObject";
 
 type Theme = "light" | "dark" | "system";
 
 function ThemeButton() {
   const [theme, setTheme] = useState<Theme>(
-    (localStorage.getItem("theme") as Theme) || "system"
+    (localStorage.getItem("theme") as Theme) || "system",
   );
   useEffect(() => {
     document.documentElement.classList.toggle("dark", theme === "dark");
@@ -27,7 +27,10 @@ function ThemeButton() {
   return (
     <Popover>
       <PopoverTrigger>
-        <Button preset="ghost" size="icon">
+        <Button
+          preset="ghost"
+          size="icon"
+        >
           {/* material-symbols:light-mode */}
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -36,6 +39,7 @@ function ThemeButton() {
             viewBox="0 0 24 24"
             className="dark:hidden"
           >
+            <title>Sun</title>
             <path
               fill="currentColor"
               d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"
@@ -49,6 +53,7 @@ function ThemeButton() {
             viewBox="0 0 24 24"
             className="hidden dark:block"
           >
+            <title>Moon</title>
             <path
               fill="currentColor"
               d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"
@@ -56,7 +61,10 @@ function ThemeButton() {
           </svg>
         </Button>
       </PopoverTrigger>
-      <PopoverContent anchor="bottomLeft" className="w-32">
+      <PopoverContent
+        anchor="bottomLeft"
+        className="w-32"
+      >
         <Button
           preset="ghost"
           onClick={() => setTheme("light")}
@@ -97,7 +105,10 @@ function TopNav() {
             data-role="links"
             className="hidden md:flex flex-row items-center gap-3"
           >
-            <Link to="/" className="font-bold">
+            <Link
+              to="/"
+              className="font-bold"
+            >
               PSW/UI
             </Link>
             {RouteObject.mainNav.map((link) => {
@@ -113,10 +124,16 @@ function TopNav() {
               );
             })}
           </div>
-          <div data-role="mobile-links" className="flex md:hidden">
+          <div
+            data-role="mobile-links"
+            className="flex md:hidden"
+          >
             <DrawerRoot>
               <DrawerTrigger>
-                <Button preset="ghost" size="icon">
+                <Button
+                  preset="ghost"
+                  size="icon"
+                >
                   {/* mdi:menu */}
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -124,6 +141,7 @@ function TopNav() {
                     height="1.2em"
                     viewBox="0 0 24 24"
                   >
+                    <title>Menu</title>
                     <path
                       fill="currentColor"
                       d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
@@ -134,7 +152,10 @@ function TopNav() {
               <DrawerOverlay className="z-[99]">
                 <DrawerContent className="w-[300px] overflow-auto">
                   <DrawerClose className="absolute top-4 right-4">
-                    <Button preset="ghost" size="icon">
+                    <Button
+                      preset="ghost"
+                      size="icon"
+                    >
                       {/* mdi:close */}
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -142,6 +163,7 @@ function TopNav() {
                         height="1.2em"
                         viewBox="0 0 24 24"
                       >
+                        <title>Close</title>
                         <path
                           fill="currentColor"
                           d="M19 6.41L17.59 5 12 9.27 6.41 5 5 6.41 9.27 11 5 17.59 6.41 19 12 14.73 17.59 19 19 17.59 13.41 12 19 6.41"
@@ -152,7 +174,10 @@ function TopNav() {
                   <div className="flex flex-col justify-start items-start gap-6 text-lg">
                     <div className="flex flex-col justify-start items-start gap-3">
                       <DrawerClose>
-                        <Link to="/" className="font-extrabold">
+                        <Link
+                          to="/"
+                          className="font-extrabold"
+                        >
                           PSW/UI
                         </Link>
                       </DrawerClose>
@@ -186,14 +211,17 @@ function TopNav() {
                             })}
                           </div>
                         );
-                      }
+                      },
                     )}
                   </div>
                 </DrawerContent>
               </DrawerOverlay>
             </DrawerRoot>
           </div>
-          <div data-role="controls" className="flex flex-row items-center">
+          <div
+            data-role="controls"
+            className="flex flex-row items-center"
+          >
             <ThemeButton />
           </div>
         </div>

src/RouteObject.ts

@@ -43,15 +43,15 @@ const sideNav: Record<
   Components: [],
 };
 
-Object.keys(docsModules).forEach((path) => {
+for (const path of Object.keys(docsModules)) {
   const name = (path.split("/").pop() ?? "").replace(".mdx", "");
-  sideNav["Components"].push({
+  sideNav.Components.push({
     path: path.replace("./docs", "/docs").replace(".mdx", ""),
     name: name.charAt(0).toUpperCase() + name.slice(1),
     eq: (pathname: string) =>
       pathname === path.replace("./docs", "/docs").replace(".mdx", ""),
   });
-});
+}
 
 export default {
   mainNav,

src/components/LoadedCode.tsx

@@ -1,16 +1,20 @@
+import { Button } from "@pswui/Button";
+import { useToast } from "@pswui/Toast";
 import { forwardRef, useEffect, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
-import { Button } from "@pswui/Button";
-import { useToast } from "@pswui/Toast";
 import { twMerge } from "tailwind-merge";
 
 export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main";
 export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main";
-export const GITHUB_COMP = (componentName: string) => `${GITHUB_UI}/packages/react/components/${componentName}.tsx`
+export const GITHUB_COMP = (componentName: string) =>
-export const GITHUB_DIR_COMP = (componentName: string, source: string) => `${GITHUB_UI}/packages/react/components/${componentName}/${source}`
+  `${GITHUB_UI}/packages/react/components/${componentName}.tsx`;
-export const GITHUB_COMP_PREVIEW = (componentName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx`
+export const GITHUB_DIR_COMP = (componentName: string, source: string) =>
-export const GITHUB_STORY = (componentName: string, storyName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
+  `${GITHUB_UI}/packages/react/components/${componentName}/${source}`;
+export const GITHUB_COMP_PREVIEW = (componentName: string) =>
+  `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx`;
+export const GITHUB_STORY = (componentName: string, storyName: string) =>
+  `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
 
 export const LoadedCode = ({
   from,
@@ -59,6 +63,7 @@ export const LoadedCode = ({
           height="1.2em"
           viewBox="0 0 24 24"
         >
+          <title>Copy</title>
           <path
             fill="currentColor"
             d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
@@ -84,7 +89,10 @@ export const Code = forwardRef<
   const { toast } = useToast();
 
   return (
-    <div className={twMerge("relative", className)} ref={ref}>
+    <div
+      className={twMerge("relative", className)}
+      ref={ref}
+    >
       <Button
         preset="default"
         size="icon"
@@ -104,6 +112,7 @@ export const Code = forwardRef<
           height="1.2em"
           viewBox="0 0 24 24"
         >
+          <title>Copy</title>
           <path
             fill="currentColor"
             d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
@@ -113,7 +122,7 @@ export const Code = forwardRef<
       <SyntaxHighlighter
         language={language}
         style={gruvboxDark}
-        className={`w-full h-auto max-h-64 rounded-lg scrollbar-none`}
+        className={"w-full h-auto max-h-64 rounded-lg scrollbar-none"}
         customStyle={{ padding: "1rem" }}
       >
         {children}

src/components/Story.tsx

@@ -19,7 +19,7 @@ const Story = React.forwardRef<
     <div
       className={twMerge(
         `bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-lg w-full p-4 min-h-48 h-auto my-8 not-prose ${layoutClasses[layout]}`,
-        className
+        className,
       )}
       ref={ref}
       id={id}

src/docs/components/ButtonBlocks/Examples/index.ts

@@ -1,9 +1,9 @@
 import { Danger } from "./Danger";
-import { Warning } from "./Warning";
-import { Success } from "./Success";
-import { Link } from "./Link";
-import { Ghost } from "./Ghost";
 import { Default } from "./Default";
+import { Ghost } from "./Ghost";
+import { Link } from "./Link";
+import { Success } from "./Success";
+import { Warning } from "./Warning";
 
 export default {
   Danger,
@@ -13,4 +13,3 @@ export default {
   Ghost,
   Default,
 };
-

src/docs/components/CheckboxBlocks/Examples/Disabled.tsx

@@ -1,10 +1,13 @@
-import { Label } from "@pswui/Label";
 import { Checkbox } from "@pswui/Checkbox";
+import { Label } from "@pswui/Label";
 
 export function Disabled() {
   return (
     <Label direction="horizontal">
-      <Checkbox size="base" disabled />
+      <Checkbox
+        size="base"
+        disabled
+      />
       <span>Agree terms and conditions</span>
     </Label>
   );

src/docs/components/CheckboxBlocks/Examples/Text.tsx

@@ -1,5 +1,5 @@
-import { Label } from "@pswui/Label";
 import { Checkbox } from "@pswui/Checkbox";
+import { Label } from "@pswui/Label";
 
 export function Text() {
   return (

src/docs/components/CheckboxBlocks/Examples/index.ts

@@ -1,5 +1,4 @@
-import { Text } from "./Text";
 import { Disabled } from "./Disabled";
+import { Text } from "./Text";
 
 export default { Text, Disabled };
-

src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx

@@ -1,14 +1,14 @@
 import { Button } from "@pswui/Button";
 import {
-  DialogRoot,
-  DialogTrigger,
-  DialogOverlay,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogSubtitle,
-  DialogFooter,
   DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogRoot,
+  DialogSubtitle,
+  DialogTitle,
+  DialogTrigger,
 } from "@pswui/Dialog";
 
 export function BasicInformationalDialog() {

src/docs/components/DialogBlocks/Examples/DeletingItem.tsx

@@ -1,15 +1,15 @@
-import {
-  DialogRoot,
-  DialogTrigger,
-  DialogOverlay,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogSubtitle,
-  DialogFooter,
-  DialogClose,
-} from "@pswui/Dialog";
 import { Button } from "@pswui/Button";
+import {
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogRoot,
+  DialogSubtitle,
+  DialogTitle,
+  DialogTrigger,
+} from "@pswui/Dialog";
 import { useToast } from "@pswui/Toast";
 
 export function DeletingItem() {

src/docs/components/DialogBlocks/Examples/index.ts

@@ -4,5 +4,4 @@ import { DeletingItem } from "./DeletingItem";
 export default {
   BasicInformationalDialog,
   DeletingItem,
-}
+};
-

src/docs/components/DialogBlocks/Preview.tsx

@@ -1,15 +1,15 @@
-import {
-  DialogRoot,
-  DialogTrigger,
-  DialogOverlay,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogSubtitle,
-  DialogFooter,
-  DialogClose,
-} from "@pswui/Dialog";
 import { Button } from "@pswui/Button";
+import {
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogRoot,
+  DialogSubtitle,
+  DialogTitle,
+  DialogTrigger,
+} from "@pswui/Dialog";
 
 export function DialogDemo() {
   return (

src/docs/components/DrawerBlocks/Examples/Bottom.tsx

@@ -1,14 +1,14 @@
+import { Button } from "@pswui/Button";
 import {
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
   DrawerRoot,
   DrawerTrigger,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
-  DrawerClose,
 } from "@pswui/Drawer";
-import { Button } from "@pswui/Button";
 
 export const Bottom = () => {
   return (

src/docs/components/DrawerBlocks/Examples/Left.tsx

@@ -1,14 +1,14 @@
+import { Button } from "@pswui/Button";
 import {
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
   DrawerRoot,
   DrawerTrigger,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
-  DrawerClose,
 } from "@pswui/Drawer";
-import { Button } from "@pswui/Button";
 
 export const Left = () => {
   return (
@@ -17,7 +17,10 @@ export const Left = () => {
         <Button>Open Drawer</Button>
       </DrawerTrigger>
       <DrawerOverlay className="z-[99]">
-        <DrawerContent position="left" className="max-w-[320px]">
+        <DrawerContent
+          position="left"
+          className="max-w-[320px]"
+        >
           <DrawerHeader>
             <h1 className="text-2xl font-bold">Drawer</h1>
           </DrawerHeader>

src/docs/components/DrawerBlocks/Examples/Right.tsx

@@ -1,14 +1,14 @@
+import { Button } from "@pswui/Button";
 import {
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
   DrawerRoot,
   DrawerTrigger,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
-  DrawerClose,
 } from "@pswui/Drawer";
-import { Button } from "@pswui/Button";
 
 export const Right = () => {
   return (
@@ -17,7 +17,10 @@ export const Right = () => {
         <Button>Open Drawer</Button>
       </DrawerTrigger>
       <DrawerOverlay className="z-[99]">
-        <DrawerContent position="right" className="max-w-[320px]">
+        <DrawerContent
+          position="right"
+          className="max-w-[320px]"
+        >
           <DrawerHeader>
             <h1 className="text-2xl font-bold">Drawer</h1>
           </DrawerHeader>

src/docs/components/DrawerBlocks/Examples/Top.tsx

@@ -1,14 +1,14 @@
+import { Button } from "@pswui/Button";
 import {
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
   DrawerRoot,
   DrawerTrigger,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
-  DrawerClose,
 } from "@pswui/Drawer";
-import { Button } from "@pswui/Button";
 
 export const Top = () => {
   return (

src/docs/components/DrawerBlocks/Examples/index.ts

@@ -1,7 +1,6 @@
+import { Bottom } from "./Bottom";
 import { Left } from "./Left";
 import { Right } from "./Right";
 import { Top } from "./Top";
-import { Bottom } from "./Bottom";
 
 export default { Left, Right, Top, Bottom };
-

src/docs/components/DrawerBlocks/Preview.tsx

@@ -1,13 +1,13 @@
 import { Button } from "@pswui/Button";
 import {
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
   DrawerRoot,
   DrawerTrigger,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerClose,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
 } from "@pswui/Drawer";
 
 export const DrawerDemo = () => {

src/docs/components/InputBlocks/Examples/Disabled.tsx

@@ -1,5 +1,10 @@
 import { Input } from "@pswui/Input";
 
 export function Disabled() {
-  return <Input type="text" disabled />;
+  return (
+    <Input
+      type="text"
+      disabled
+    />
+  );
 }

src/docs/components/InputBlocks/Examples/Invalid.tsx

@@ -1,5 +1,10 @@
 import { Input } from "@pswui/Input";
 
 export function Invalid() {
-  return <Input type="text" invalid="Invalid Input" />;
+  return (
+    <Input
+      type="text"
+      invalid="Invalid Input"
+    />
+  );
 }

src/docs/components/InputBlocks/Examples/index.ts

@@ -1,5 +1,4 @@
-import { Invalid } from "./Invalid";
 import { Disabled } from "./Disabled";
+import { Invalid } from "./Invalid";
 
 export default { Invalid, Disabled };
-

src/docs/components/InputFrameBlocks/Preview.tsx

@@ -4,14 +4,21 @@ import { Input, InputFrame } from "@pswui/Input";
 export function InputFrameDemo() {
   return (
     <InputFrame>
-      <Input type="text" unstyled />
+      <Input
-      <Button preset="success" size="icon">
+        type="text"
+        unstyled
+      />
+      <Button
+        preset="success"
+        size="icon"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="1.2em"
           height="1.2em"
           viewBox="0 0 24 24"
         >
+          <title>Search</title>
           <path
             fill="currentColor"
             d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5"

src/docs/components/LabelBlocks/Examples/Disabled.tsx

@@ -1,11 +1,14 @@
-import { Label } from "@pswui/Label";
 import { Input } from "@pswui/Input";
+import { Label } from "@pswui/Label";
 
 export function Disabled() {
   return (
     <Label direction="vertical">
       <span>Email</span>
-      <Input type="email" disabled />
+      <Input
+        type="email"
+        disabled
+      />
     </Label>
   );
 }

src/docs/components/LabelBlocks/Examples/Horizontal.tsx

@@ -1,5 +1,5 @@
-import { Label } from "@pswui/Label";
 import { Checkbox } from "@pswui/Checkbox";
+import { Label } from "@pswui/Label";
 
 export function Horizontal() {
   return (

src/docs/components/LabelBlocks/Examples/Invalid.tsx

@@ -1,11 +1,14 @@
-import { Label } from "@pswui/Label";
 import { Input } from "@pswui/Input";
+import { Label } from "@pswui/Label";
 
 export function Invalid() {
   return (
     <Label direction="vertical">
       <span>Email</span>
-      <Input type="email" invalid="Invalid Email" />
+      <Input
+        type="email"
+        invalid="Invalid Email"
+      />
     </Label>
   );
 }

src/docs/components/LabelBlocks/Examples/Vertical.tsx

@@ -1,5 +1,5 @@
-import { Label } from "@pswui/Label";
 import { Input } from "@pswui/Input";
+import { Label } from "@pswui/Label";
 
 export function Vertical() {
   return (

src/docs/components/LabelBlocks/Examples/index.ts

@@ -1,7 +1,7 @@
-import { Vertical } from "./Vertical";
+import { Disabled } from "./Disabled";
 import { Horizontal } from "./Horizontal";
 import { Invalid } from "./Invalid";
-import { Disabled } from "./Disabled";
+import { Vertical } from "./Vertical";
 
 export default {
   Vertical,
@@ -9,4 +9,3 @@ export default {
   Invalid,
   Disabled,
 };
-

src/docs/components/LabelBlocks/Preview.tsx

@@ -1,5 +1,5 @@
-import { Label } from "@pswui/Label";
 import { Input } from "@pswui/Input";
+import { Label } from "@pswui/Label";
 
 export function LabelDemo() {
   return (

src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx

@@ -1,43 +1,74 @@
-import { Popover, PopoverTrigger, PopoverContent } from "@pswui/Popover.tsx";
 import { Button } from "@pswui/Button.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
 import { useState } from "react";
 
 const DarkIcon = () => {
   // ic:baseline-dark-mode
-  return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+  return (
-    <path fill="currentColor"
+    <svg
-          d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1"/>
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 24 24"
+    >
+      <title>Dark</title>
+      <path
+        fill="currentColor"
+        d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1"
+      />
     </svg>
-}
+  );
+};
 
 const LightIcon = () => {
   // ic:baseline-light-mode
-  return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+  return (
-    <path fill="currentColor"
+    <svg
-          d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z"/>
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 24 24"
+    >
+      <title>Light</title>
+      <path
+        fill="currentColor"
+        d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z"
+      />
     </svg>
-}
+  );
+};
 
 export const ThemeSelector = () => {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
 
-  return <Popover>
+  return (
+    <Popover>
       <PopoverTrigger>
-      <Button preset={"default"} size={"icon"}>
+        <Button
-        {
+          preset={"default"}
-          theme === "light" ? <LightIcon /> : <DarkIcon />
+          size={"icon"}
-        }
+        >
+          {theme === "light" ? <LightIcon /> : <DarkIcon />}
         </Button>
       </PopoverTrigger>
       <PopoverContent anchor={"bottomCenter"}>
-      <Button onClick={() => setTheme("dark")} preset={"ghost"} className={"gap-2"}>
+        <Button
+          onClick={() => setTheme("dark")}
+          preset={"ghost"}
+          className={"gap-2"}
+        >
           <DarkIcon />
           <span className={"whitespace-nowrap"}>Dark Mode</span>
         </Button>
-      <Button onClick={() => setTheme("light")} preset={"ghost"} className={"gap-2"}>
+        <Button
+          onClick={() => setTheme("light")}
+          preset={"ghost"}
+          className={"gap-2"}
+        >
           <LightIcon />
           <span className={"whitespace-nowrap"}>Light Mode</span>
         </Button>
       </PopoverContent>
     </Popover>
-}
+  );
+};

src/docs/components/PopoverBlocks/Examples/UserControl.tsx

@@ -1,21 +1,17 @@
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from "@pswui/Popover.tsx";
 import { Button } from "@pswui/Button.tsx";
+import { Input } from "@pswui/Input.tsx";
+import { Label } from "@pswui/Label.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
 import { useToast } from "@pswui/Toast";
 import {
+  type Dispatch,
+  type SVGProps,
+  type SetStateAction,
   createContext,
-  Dispatch,
-  SetStateAction,
-  SVGProps,
   useContext,
   useState,
   useTransition,
 } from "react";
-import { Label } from "@pswui/Label.tsx";
-import { Input } from "@pswui/Input.tsx";
 
 interface UserControlState {
   signIn: boolean;
@@ -44,10 +40,11 @@ function MdiLoading(props: SVGProps<SVGSVGElement>) {
       viewBox="0 0 24 24"
       {...props}
     >
+      <title>Loading</title>
       <path
         fill="currentColor"
         d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"
-      ></path>
+      />
     </svg>
   );
 }
@@ -79,7 +76,10 @@ const SignInForm = () => {
   }
 
   return (
-    <PopoverContent anchor={"bottomLeft"} className={"p-4 space-y-3"}>
+    <PopoverContent
+      anchor={"bottomLeft"}
+      className={"p-4 space-y-3"}
+    >
       <Label>
         <span>Username</span>
         <Input type={"text"} />
@@ -89,7 +89,10 @@ const SignInForm = () => {
         <Input type={"password"} />
       </Label>
       <div className={"flex flex-row justify-end"}>
-        <Button preset={"success"} onClick={startSignIn}>
+        <Button
+          preset={"success"}
+          onClick={startSignIn}
+        >
           {isSigningIn ? <MdiLoading className={"animate-spin"} /> : "Sign In"}
         </Button>
       </div>
@@ -126,7 +129,10 @@ const UserControlContent = () => {
   return (
     <PopoverContent anchor={"bottomLeft"}>
       <Button preset={"ghost"}>Dashboard</Button>
-      <Button preset={"ghost"} onClick={startSignOut}>
+      <Button
+        preset={"ghost"}
+        onClick={startSignOut}
+      >
         {isSigningOut ? <MdiLoading className={"animate-spin"} /> : "Sign Out"}
       </Button>
     </PopoverContent>

src/docs/components/PopoverBlocks/Examples/index.ts

@@ -4,4 +4,4 @@ import { UserControl } from "./UserControl";
 export default {
   ThemeSelector,
   UserControl,
-}
+};

src/docs/components/PopoverBlocks/Preview.tsx

@@ -12,6 +12,7 @@ export function PopoverDemo() {
             height="1.2em"
             viewBox="0 0 24 24"
           >
+            <title>User</title>
             <path
               fill="currentColor"
               d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"
@@ -20,13 +21,17 @@ export function PopoverDemo() {
         </Button>
       </PopoverTrigger>
       <PopoverContent>
-        <Button preset="ghost" className="gap-2">
+        <Button
+          preset="ghost"
+          className="gap-2"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="1.2em"
             height="1.2em"
             viewBox="0 0 24 24"
           >
+            <title>Dashboard</title>
             <path
               fill="currentColor"
               d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
@@ -34,13 +39,17 @@ export function PopoverDemo() {
           </svg>
           <span className="flex-grow text-left">Dashboard</span>
         </Button>
-        <Button preset="ghost" className="gap-2">
+        <Button
+          preset="ghost"
+          className="gap-2"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="1.2em"
             height="1.2em"
             viewBox="0 0 24 24"
           >
+            <title>Log out</title>
             <path
               fill="currentColor"
               d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"

src/docs/components/TabsBlocks/Preview.tsx

@@ -1,4 +1,4 @@
-import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
+import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
 
 export function TabsDemo() {
   return (

src/docs/components/ToastBlocks/Examples/Error.tsx

@@ -19,7 +19,8 @@ function Children() {
   );
 }
 
-export function Error() {
+/* not shadowing global Error (lol) */
+export function _Error() {
   return (
     <>
       <Toaster />

src/docs/components/ToastBlocks/Examples/index.ts

@@ -1,4 +1,4 @@
-import { Error } from "./Error";
+import { _Error } from "./Error";
 import { Normal } from "./Normal";
 import { PendingFail } from "./PendingFail";
 import { PendingSuccess } from "./PendingSuccess";
@@ -6,11 +6,10 @@ import { Success } from "./Success";
 import { Warning } from "./Warning";
 
 export default {
-  Error,
+  Error: _Error /* not shadowing global Error (lol) */,
   Normal,
   PendingFail,
   PendingSuccess,
   Success,
   Warning,
 };
-

src/docs/components/TooltipBlocks/Examples/Controlled.tsx

@@ -6,7 +6,11 @@ export function Controlled() {
   const [opened, setOpened] = useState(false);
 
   return (
-    <Tooltip position="top" controlled opened={opened}>
+    <Tooltip
+      position="top"
+      controlled
+      opened={opened}
+    >
       <TooltipContent delay={"early"}>
         <p>Tooltip!</p>
       </TooltipContent>

src/docs/components/TooltipBlocks/Examples/index.ts

@@ -1,11 +1,11 @@
 import { Bottom } from "./Bottom";
-import { Left } from "./Left";
+import { Controlled } from "./Controlled";
-import { Right } from "./Right";
-import { Top } from "./Top";
-import { NoDelay } from "./NoDelay";
 import { EarlyDelay } from "./EarlyDelay";
 import { LateDelay } from "./LateDelay";
-import { Controlled } from "./Controlled";
+import { Left } from "./Left";
+import { NoDelay } from "./NoDelay";
+import { Right } from "./Right";
+import { Top } from "./Top";
 
 export default {
   Bottom,

src/errors/PageNotFound.tsx

@@ -1,5 +1,5 @@
-import { Link } from "react-router-dom";
 import { Button } from "@pswui/Button";
+import { Link } from "react-router-dom";
 
 function PageNotFound() {
   return (
@@ -11,7 +11,10 @@ function PageNotFound() {
         </p>
       </section>
       <section className="flex flex-row justify-center items-center text-center gap-2">
-        <Button asChild preset="default">
+        <Button
+          asChild
+          preset="default"
+        >
           <Link to="/">Go home</Link>
         </Button>
       </section>

src/errors/Unexpected.tsx

@@ -1,5 +1,5 @@
-import { Link } from "react-router-dom";
 import { Button } from "@pswui/Button";
+import { Link } from "react-router-dom";
 
 function UnexpectedError() {
   return (
@@ -11,7 +11,10 @@ function UnexpectedError() {
         </p>
       </section>
       <section className="flex flex-row justify-center items-center text-center gap-2">
-        <Button asChild preset="default">
+        <Button
+          asChild
+          preset="default"
+        >
           <Link to="/">Go home</Link>
         </Button>
       </section>

src/main.tsx

@@ -3,8 +3,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+const ROOT = document.getElementById("root");
+
+if (!ROOT) throw new Error("root is not found");
+
+ReactDOM.createRoot(ROOT).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

src/mdx.d.ts

@@ -1,7 +1,7 @@
-declare module '*.mdx' {
+declare module "*.mdx" {
-  import type { MDXProps } from 'mdx/types'
+  import type { MDXProps } from "mdx/types";
-  import type { Toc } from '@stefanprobst/rehype-extract-toc'
+  import type { Toc } from "@stefanprobst/rehype-extract-toc";
 
-  export const tableOfContents: Toc
+  export const tableOfContents: Toc;
-  export default function MDXContent(props: MDXProps): JSX.Element
+  export default function MDXContent(props: MDXProps): JSX.Element;
 }

src/vite-env.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import { ImportGlobFunction } from "vite/types/importGlob";
+import type { ImportGlobFunction } from "vite/types/importGlob";
 
 interface ImportMeta {
   glob: ImportGlobFunction;

vite.config.ts

@@ -1,12 +1,12 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "tailwindcss";
-import mdx from "@mdx-js/rollup";
 import { resolve } from "node:path";
-import remarkGfm from "remark-gfm";
+import mdx from "@mdx-js/rollup";
-import withSlug from "rehype-slug";
 import withToc from "@stefanprobst/rehype-extract-toc";
 import withTocExport from "@stefanprobst/rehype-extract-toc/mdx";
+import react from "@vitejs/plugin-react";
+import withSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
+import tailwindcss from "tailwindcss";
+import { defineConfig } from "vite";
 import dynamicImport from "vite-plugin-dynamic-import";
 
 // https://vitejs.dev/config/
@@ -31,5 +31,5 @@ export default defineConfig({
       "@pswui-lib": resolve(__dirname, "./src/pswui/lib"),
     },
   },
-  cacheDir: './.vite'
+  cacheDir: "./.vite",
 });