fix lint errors

.eslintignore

@@ -5,6 +5,7 @@
 /docs/pages/playground/
 /packages/pigment-css-react/utils/
 /packages/pigment-css-react/processors/
+/packages/pigment-css-react/internal/
 /packages/pigment-css-react/exports/
 /packages/pigment-css-react/theme/
 /packages/pigment-css-react/tests/**/fixtures

docs/.eslintrc.js

@@ -2,5 +2,17 @@ module.exports = {
   rules: {
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
+    'react/no-unknown-property': ['error', { ignore: ['sx'] }],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        '': 'never',
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
   },
 };

docs/README.md

@@ -1,36 +1,4 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Pigment CSS Docs app
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+This is the Pigment CSS docs application bootstrapped with Next.js 15. It uses app router and
+Pigment CSS for styling.

docs/data/getMarkdownPage.ts

@@ -32,7 +32,7 @@ async function getFileHandle(basePath: string, slug: string) {
         await fileHandle.close();
       },
     };
-  } catch (ex) {
+  } catch (ex1) {
     try {
       const fileHandle = await fs.open(mdFilePath);
       return {
@@ -42,7 +42,7 @@ async function getFileHandle(basePath: string, slug: string) {
           await fileHandle.close();
         },
       };
-    } catch (ex) {
+    } catch (ex2) {
       throw new Error('404');
     }
   }

docs/package.json

@@ -31,6 +31,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint-config-next": "15.0.2",
     "serve": "14.2.4",
     "tailwindcss": "^3.4.14"
   }

docs/src/app/(content)/getting-started/[slug]/not-found.tsx

@@ -3,11 +3,9 @@ import { MainContent } from '@/components/MainContent';
 
 export default function NotFoundPage() {
   return (
-    <React.Fragment>
-      <MainContent as="main">
-        <h1>Not Found</h1>
-        <p>The page that you were looking for could not be found.</p>
-      </MainContent>
-    </React.Fragment>
+    <MainContent as="main">
+      <h1>Not Found</h1>
+      <p>The page that you were looking for could not be found.</p>
+    </MainContent>
   );
 }

docs/src/app/(content)/layout.tsx

@@ -1,6 +1,6 @@
+import routes from '@data/pages';
 import { AppBar } from '@/components/AppBar';
 import { Navigation } from '@/components/Navigation';
-import routes from '@data/pages';
 
 export default function ContentLayout({ children }: React.PropsWithChildren<{}>) {
   return (

docs/src/app/page.tsx

@@ -5,8 +5,7 @@ import Link from 'next/link';
 const Page = styled.div`
   display: grid;
   grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
+  place-items: center center;
   min-height: 100svh;
   padding: 80px;
   gap: 64px;
@@ -15,9 +14,8 @@ const Page = styled.div`
   @media (prefers-color-scheme: dark) {
     & {
       --gray-rgb: 255, 255, 255;
-      --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-      --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
+      --gray-alpha-200: rgb(var(--gray-rgb) 0.145);
+      --gray-alpha-100: rgb(var(--gray-rgb) 0.06);
       --button-primary-hover: #ccc;
       --button-secondary-hover: #1a1a1a;
     }

docs/src/components/DocsVersionSelector.tsx

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import * as Menu from '@base_ui/react/Menu';
-import { SelectIcon } from './icons/Select';
 import { styled } from '@pigment-css/react';
+import { SelectIcon } from './icons/Select';
 
 export interface DocumentationVersion {
   version: string;
@@ -72,7 +72,7 @@ const Popup = styled(Menu.Popup)(({ theme }) => ({
 }));
 
 const Adornment = styled.span`
-  top: 0px;
+  top: 0;
   right: 4px;
   height: 100%;
   display: flex;

docs/src/components/IconButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { Tooltip } from './Tooltip';
 import { css } from '@pigment-css/react';
+import { Tooltip } from './Tooltip';
 
 export const classes = {
   root: css`
@@ -27,9 +27,7 @@ export const classes = {
     }
 
     &:focus-visible {
-      outline-width: 2px;
-      outline-style: solid;
-      outline-color: black;
+      outline: black solid 2px;
       outline-offset: 2px;
     }
   `,

docs/src/components/IconLinkButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type UrlObject } from 'url';
 import Link from 'next/link';
-import { Tooltip } from './Tooltip';
 import clsx from 'clsx';
+import { Tooltip } from './Tooltip';
 import { classes } from './IconButton';
 
 export function IconLinkButton(props: IconLinkButton.Props) {

docs/src/components/MainContent.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@pigment-css/react';
 
-export const MainContent = styled.div(({}) => ({
+export const MainContent = styled.div({
   boxSizing: 'content-box',
   maxWidth: '714px',
   paddingTop: 'var(--space-9)',
@@ -151,4 +151,4 @@ export const MainContent = styled.div(({}) => ({
       zIndex: -1,
     },
   },
-}));
+});

docs/src/components/Navigation.tsx

@@ -63,7 +63,6 @@ const link = css`
 `;
 
 const sublink = css`
-  composes: link;
   padding-left: var(--space-6);
 `;
 

docs/src/components/SiblingPageLinks.tsx

@@ -92,6 +92,7 @@ export function SiblingPageLinks(props: SiblingPageLinksProps) {
 
 function flattenSitepmap(pages: readonly RouteMetadata[]): RouteMetadata[] {
   const flatPages: RouteMetadata[] = [];
+  // eslint-disable-next-line no-restricted-syntax
   for (const page of pages) {
     if (!page.children) {
       flatPages.push(page);

docs/src/components/TableOfContents.tsx

@@ -8,37 +8,6 @@ interface Props {
   skipFirstLevel?: boolean;
 }
 
-function renderTocEntry(entry: TocEntry, renderDepth: number, skipFirstLevel: boolean) {
-  if (entry.depth > renderDepth) {
-    return null;
-  }
-
-  return (
-    <React.Fragment key={entry.id}>
-      {entry.depth === 1 && skipFirstLevel ? null : (
-        <NavLink
-          href={`#${entry.id}`}
-          style={{ '--indent-level': entry.depth - 2 } as React.CSSProperties}
-        >
-          {entry.value}
-        </NavLink>
-      )}
-      {entry.children?.map((child) => renderTocEntry(child, renderDepth, skipFirstLevel))}
-    </React.Fragment>
-  );
-}
-
-export function TableOfContents(props: Props) {
-  const { toc, renderDepth = 2, skipFirstLevel = true } = props;
-
-  return (
-    <Root>
-      <SectionTitle>Contents</SectionTitle>
-      <nav>{toc.map((item) => renderTocEntry(item, renderDepth, skipFirstLevel))}</nav>
-    </Root>
-  );
-}
-
 const Root = styled.div`
   box-sizing: border-box;
   position: fixed;
@@ -89,3 +58,34 @@ const NavLink = styled.a`
     }
   }
 `;
+
+function renderTocEntry(entry: TocEntry, renderDepth: number, skipFirstLevel: boolean) {
+  if (entry.depth > renderDepth) {
+    return null;
+  }
+
+  return (
+    <React.Fragment key={entry.id}>
+      {entry.depth === 1 && skipFirstLevel ? null : (
+        <NavLink
+          href={`#${entry.id}`}
+          style={{ '--indent-level': entry.depth - 2 } as React.CSSProperties}
+        >
+          {entry.value}
+        </NavLink>
+      )}
+      {entry.children?.map((child) => renderTocEntry(child, renderDepth, skipFirstLevel))}
+    </React.Fragment>
+  );
+}
+
+export function TableOfContents(props: Props) {
+  const { toc, renderDepth = 2, skipFirstLevel = true } = props;
+
+  return (
+    <Root>
+      <SectionTitle>Contents</SectionTitle>
+      <nav>{toc.map((item) => renderTocEntry(item, renderDepth, skipFirstLevel))}</nav>
+    </Root>
+  );
+}

docs/src/components/mdx/ComponentLinkedHeader.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classes from './ComponentLinkHeader.module.css';
 import { styled } from '@pigment-css/react';
 
 export interface ComponentLinkHeaderProps {

docs/src/components/mdx/MDXComponents.tsx

@@ -14,6 +14,7 @@ function H2(props: React.HTMLAttributes<HTMLHeadingElement>) {
     );
   }
 
+  // eslint-disable-next-line jsx-a11y/heading-has-content
   return <h2 {...props} />;
 }
 
@@ -28,6 +29,7 @@ function H3(props: React.HTMLAttributes<HTMLHeadingElement>) {
     );
   }
 
+  // eslint-disable-next-line jsx-a11y/heading-has-content
   return <h3 {...props} />;
 }