Docs updates

Signed-off-by: gpbl <io@gpbl.dev>

docs/accessibility.mdx

@@ -2,8 +2,8 @@
 sort: 10
 ---
 
-_Getting Started_
+_Using DayPicker_
 
-# Accessible Date Pickers
+# Accessibility
 
 DayPicker follows the ARIA guidelines for date pickers, including keyboard navigation, focus management, and labeling. However, as developer you will need to adapt DayPicker to your specific use cases.

docs/changelog.mdx

@@ -0,0 +1,9 @@
+---
+sort: 20
+---
+
+_Introduction_
+
+# Changelog
+
+WIP.

docs/guides/custom-components.mdx

@@ -6,8 +6,6 @@ _Advanced Guides_
 
 # Custom Components
 
-> Customize the components used internally by DayPicker.
-
 Use the `components` prop to replace some of the internal components used by DayPicker with a custom implementation.
 
 **TODO**: This section is still a draft.

docs/guides/custom-modifiers.mdx

@@ -6,6 +6,6 @@ _Advanced Guides_
 
 # Custom Modifiers
 
-> Modifiers allows to customize the appearance of the days in the calendar.
+Modifiers allows to customize the appearance of the days in the calendar.
 
 **TODO**: This section is still a draft.

docs/guides/custom-selections.mdx

@@ -6,6 +6,4 @@ _Advanced Guides_
 
 # Custom Selections
 
-> Implement different ways to select days.
-
 **TODO**: This section is still a draft.

docs/guides/localization.mdx

@@ -6,7 +6,7 @@ _Advanced Guides_
 
 # Localization
 
-> DayPicker can be localized in any language using the date-fns locale object.
+DayPicker can be localized in any language using the date-fns locale objects.
 
 ## Change the Locale
 

docs/guides/styling.mdx

@@ -2,11 +2,11 @@
 sort: 5
 ---
 
-_Getting Started_
+_Using DayPicker_
 
 # Styling
 
-> DayPicker comes with a minimal style inspired by MacOS date pickers and it's designed to be easily customized.
+DayPicker comes with a minimal style inspired by MacOS date pickers and it's designed to be easily customized.
 
 ## Importing the Default Style
 

docs/index.mdx

@@ -3,6 +3,7 @@ section: Introduction
 description: DayPicker is a React component to build date pickers, calendars, and date inputs for web applications.
 navigationLabel: Introduction
 sort: 1
+toc: false
 ---
 
 # React DayPicker

docs/installing.mdx

@@ -3,7 +3,7 @@ sort: 2
 navigationLabel: Installing
 ---
 
-_Getting Started_
+_Introduction_
 
 # Installing DayPicker
 

docs/props.mdx

@@ -2,7 +2,7 @@
 sort: 4
 ---
 
-_Getting Started_
+_Using DayPicker_
 
 # DayPicker Props
 

docs/upgrading.mdx

@@ -2,7 +2,7 @@
 sort: 20
 ---
 
-_Getting Started_
+_Introduction_
 
 # Upgrading
 

package.json

@@ -32,8 +32,7 @@
       }
     },
     "./style.css": {
-      "default": "./src/style.css",
-      "types": "./src/style.d.ts"
+      "default": "./src/style.css"
     },
     "./style.module.css": {
       "default": "./src/style.css",

website/README.md

@@ -1,6 +1,6 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Getting Started
+## Using DayPicker
 
 First, run the development server:
 

website/components/DocHeader.tsx

@@ -21,7 +21,7 @@ export function DocHeader({ doc }: { doc: Doc }) {
         </Heading>
       )}
       {doc.description && (
-        <Text as="p" size="5" mt="2" mb="2" color="gray">
+        <Text as="p" size="5" mt="2" color="gray">
           {doc.description}
         </Text>
       )}

website/components/DocsLayout.tsx

@@ -28,20 +28,21 @@ export function DocsLayout(props: DocsLayoutProps) {
 
       {/* Sidebar */}
       <Box
-        className={`b-0 sm:shadow-sidebar pt-0transition-transform fixed top-header-full z-10 h-full w-full transform scroll-pb-32 overflow-auto bg-page-background p-4 duration-200 ease-in-out sm:w-sidebar xl:top-header xl:block xl:translate-x-0 xl:shadow-none ${sidebar.isOpen ? "translate-x-0" : "-translate-x-full"}`}
+        className={`b-0 sm:shadow-sidebar fixed top-header-full z-10 h-full w-full transform scroll-pb-32 overflow-auto bg-page-background transition-transform duration-200 ease-in-out sm:w-sidebar xl:top-header xl:block xl:translate-x-0 xl:shadow-none ${sidebar.isOpen ? "translate-x-0" : "-translate-x-full"}`}
         style={{
           height: "calc(100vh - var(--header-full))",
           marginTop: 1,
         }}
       >
-        <Sidebar navigation={navigation} />
+        <Box p="4">
+          <Sidebar navigation={navigation} />
+        </Box>
       </Box>
 
       {/* Content */}
       <Box className="mt-header-full xl:ms-sidebar xl:mt-header">
         <Box
           mx="auto"
-          className="max-w-screen-lg xl:max-w-screen-xl"
           p={{ initial: "4", lg: "8", xl: "9" }}
           asChild
           style={{ maxWidth: "120ch" }}
@@ -51,7 +52,7 @@ export function DocsLayout(props: DocsLayoutProps) {
               {/* Main content */}
               <Box className="w-full flex-auto overflow-auto px-2 py-4 md:pe-8 xl:pe-12">
                 <DocHeader doc={doc} />
-                <Separator size="4" mt="6" mb="9" color="gray" />
+                <Separator size="4" mt="4" mb="6" color="gray" />
                 {props.children}
               </Box>
 
@@ -64,7 +65,9 @@ export function DocsLayout(props: DocsLayoutProps) {
                     borderColor: "var(--gray-a5)",
                   }}
                 >
-                  {toc && toc.length > 3 && <TableOfContent toc={toc} />}
+                  {doc.toc && toc && toc.length > 3 && (
+                    <TableOfContent toc={toc} />
+                  )}
                 </Box>
               </Box>
             </Flex>

website/components/codeBlockStyles.module.css

@@ -0,0 +1,6 @@
+.figcaption {
+}
+
+.figcaption + div {
+  @apply mt-1;
+}