Updates

components/composites/docs/TWUIDocsAside.tsx

@@ -1,5 +1,5 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
-import { DocsLinkType } from ".";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { DocsLinkType } from ".";
 import Stack from "../../layout/Stack";
 import TWUIDocsLink from "./TWUIDocsLink";
 import { twMerge } from "tailwind-merge";

components/composites/docs/TWUIDocsLink.tsx

@@ -1,9 +1,9 @@
 import React, {
-    AnchorHTMLAttributes,
-    ComponentProps,
-    DetailedHTMLProps,
+    type AnchorHTMLAttributes,
+    type ComponentProps,
+    type DetailedHTMLProps,
 } from "react";
-import { DocsLinkType } from ".";
+import type { DocsLinkType } from ".";
 import Stack from "../../layout/Stack";
 import { twMerge } from "tailwind-merge";
 import Row from "../../layout/Row";
@@ -45,11 +45,11 @@ export default function TWUIDocsLink({
     React.useEffect(() => {
         if (typeof window !== "undefined") {
             const basePathMatch = window.location.pathname.includes(
-                docLink.href
+                docLink.href,
             );
 
             const isStrictMatch = Boolean(
-                linkRef.current?.getAttribute("data-strict")
+                linkRef.current?.getAttribute("data-strict"),
             );
 
             if (strict || isStrictMatch) {
@@ -79,7 +79,7 @@ export default function TWUIDocsLink({
                         "twui-docs-left-aside-link whitespace-nowrap",
                         "grow overflow-hidden overflow-ellipsis",
                         isActive ? "active" : "",
-                        props.className
+                        props.className,
                     )}
                     ref={linkRef}
                     data-strict={strict || docLink.strict}
@@ -93,7 +93,7 @@ export default function TWUIDocsLink({
                         color="gray"
                         className={twMerge(
                             "p-1 hover:opacity-100",
-                            expand ? "rotate-180 opacity-30" : "opacity-70"
+                            expand ? "rotate-180 opacity-30" : "opacity-70",
                         )}
                         onClick={() => setExpand(!expand)}
                         title="Docs Aside Links Dropdown Button"
@@ -107,7 +107,7 @@ export default function TWUIDocsLink({
                     <Stack
                         className={twMerge(
                             "gap-2 w-full pl-3",
-                            childWrapperProps?.className
+                            childWrapperProps?.className,
                         )}
                         {...childWrapperProps}
                     >

components/composites/docs/TWUIDocsRightAside.tsx

@@ -1,5 +1,5 @@
-import React, { DetailedHTMLProps, HTMLAttributes } from "react";
-import { DocsLinkType } from ".";
+import React, { type DetailedHTMLProps, type HTMLAttributes } from "react";
+import type { DocsLinkType } from ".";
 import Stack from "../../layout/Stack";
 import TWUIDocsLink from "./TWUIDocsLink";
 import { twMerge } from "tailwind-merge";
@@ -28,7 +28,7 @@ export default function TWUIDocsRightAside({
         if (!ready) return;
 
         const headerHrefs = document.querySelectorAll(
-            ".twui-docs-header-anchor"
+            ".twui-docs-header-anchor",
         );
 
         const linksArr: DocsLinkType[] = [];
@@ -87,7 +87,7 @@ export default function TWUIDocsRightAside({
         if (!links.length) return;
 
         const headerHrefs = document.querySelectorAll(
-            "a.twui-docs-header-anchor"
+            "a.twui-docs-header-anchor",
         );
 
         const observer = new IntersectionObserver((entries) => {
@@ -96,7 +96,7 @@ export default function TWUIDocsRightAside({
                     const id = entry.target.id;
 
                     const link = document.querySelector(
-                        `.twui-docs-right-aside a[href="#${id}"]`
+                        `.twui-docs-right-aside a[href="#${id}"]`,
                     );
                     if (link) {
                         link.classList.add("active");
@@ -104,7 +104,7 @@ export default function TWUIDocsRightAside({
                 } else {
                     const id = entry.target.id;
                     const link = document.querySelector(
-                        `.twui-docs-right-aside a[href="#${id}"]`
+                        `.twui-docs-right-aside a[href="#${id}"]`,
                     );
                     if (link) {
                         link.classList.remove("active");
@@ -130,7 +130,7 @@ export default function TWUIDocsRightAside({
             className={twMerge(
                 "pb-10 hidden xl:flex min-w-[150px] max-w-[200px]",
                 "sticky top-6 twui-docs-right-aside",
-                props.className
+                props.className,
             )}
         >
             <Stack className="w-full overflow-hidden">

components/composites/docs/index.tsx

@@ -1,4 +1,4 @@
-import {
+import type {
     ComponentProps,
     DetailedHTMLProps,
     HTMLAttributes,
@@ -61,7 +61,7 @@ export default function TWUIDocs({
                         {...docsContentProps}
                         className={twMerge(
                             "items-start gap-8 w-full flex-nowrap",
-                            docsContentProps?.className
+                            docsContentProps?.className,
                         )}
                     >
                         <TWUIDocsAside
@@ -74,7 +74,7 @@ export default function TWUIDocs({
                         <div
                             className={twMerge(
                                 "block twui-docs-content pl-0 xl:pl-6 grow",
-                                "overflow-hidden"
+                                "overflow-hidden",
                             )}
                         >
                             {children}