Last state

Signed-off-by: gpbl <[email protected]>

CHANGELOG.md

@@ -1,3 +1,3 @@
 # Changelog
 
-Full release notes at https://github.com/gpbl/react-day-picker/releases
+See [Releases on Github](https://github.com/gpbl/react-day-picker/releases).

docs/guides/input-fields.mdx → docs/advanced-guides/input-fields.mdx

@@ -10,36 +10,6 @@ DayPicker follows the ARIA guidelines for date pickers, including keyboard navig
 
 See the following examples for guidance on how to create accessible date pickers with DayPicker.
 
-## Examples
-
-### Date Picker inline
-
-In this scenario, you can use the `application` role.
-
 ```tsx caption="render:DatePickerModal"
 <DayPicker mode="single" />
 ```
-
-#### Explanation
-
-TODO
-
-### Date Picker in a Popover
-
-TODO
-
-#### Explanation
-
-TODO
-
-### Modal Dialog with Input Field
-
-In this scenario, an input field precedes date selection within a modal dialog:
-
-```tsx
-<DayPickermode="single"  />
-```
-
-#### Explanation
-
-TODO

docs/index.mdx

@@ -37,14 +37,22 @@ Use React DayPicker to create date pickers, calendars, and date inputs in your [
 - **Flexible**: DayPicker is designed to be flexible and to fit your needs. You can use it to build date pickers, calendars, and date inputs.
 - **Modern**: DayPicker is built with modern technologies and follows the latest best practices in web development.
 
-## Community
-
-Ask for help and share your experience with DayPicker in the [GitHub Discussions](/).
+---
 
 ## License
 
 DayPicker is released under the [MIT License](./development/license).
 
+## Community
+
+Ask for help and share your experience with DayPicker.
+
+- [Discuss the project on GitHub](https://github.com/gpbl/react-day-picker/discussions)
+- [Report an issue on GitHub](https://github.com/gpbl/react-day-picker/issues/new/choose)
+- [Contribute to the project](./development/contributing)
+
 ## Funding
 
-Consider supporting DayPicker with a donation. DayPicker is an open-source project that is developed and maintained by one person. If you find it useful, please consider sponsoring the project.
+Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.
+
+- [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl)

docs/releases.mdx

@@ -0,0 +1,9 @@
+---
+sort: 10
+section: Introduction
+title: Changelog
+---
+
+<Callout>This page is a work in progress</Callout>
+
+%include ../CHANGELOG.md

docs/start.mdx

@@ -0,0 +1,64 @@
+---
+sort: 2
+---
+
+_Introduction_
+
+# Installation
+
+DayPicker is available as `react-day-picker` npm package. It requires [date-fns](https://date-fns.org) as a peer dependency.
+
+<Callout>
+  There's an [ongoing
+  discussion](https://github.com/gpbl/react-day-picker/discussions/1087) to
+  support other date libraries.
+</Callout>
+
+## Install from npm
+
+```sh
+$ npm install react-day-picker date-fns
+```
+
+## Basic Usage
+
+To start using DayPicker, import the `<DayPicker />` component and its default style. Assign the `selected` and `onSelect` props to manage the selected date.
+
+```tsx title="App.jsx" caption="render:Start"
+import "react-day-picker/style.css"; // Import the default style
+import { DayPicker } from "react-day-picker";
+
+import { useState } from "react";
+
+export function App() {
+  const [selected, setSelected] = useState();
+
+  return (
+    <div role="application" aria-label="Date Picker">
+      <DayPicker mode="single" selected={selected} onSelect={setSelected} />
+    </div>
+  );
+}
+```
+
+## Getting Started
+
+Get started with DayPicker by reading the following guides.
+
+- [DayPicker Anatomy](/docs/using-daypicker/anatomy) - Learn about the different parts of the DayPicker component.
+
+### Using DayPicker
+
+- [Customization Props](/docs/using-daypicker/customization-props) - Read about the options available to customize the calendar and the months navigation.
+- [Selection Modes](/docs/using-daypicker/selection-modes) - Allow users to select days by enabling single, multiple or range selections.
+- [Styling](/docs/using-daypicker/styling) - Change the style to make DayPicker match your app's look and feel.
+- [Localization](/docs/using-daypicker/localization) - Configure DayPicker to display the calendar in different languages and date formats.
+- [Accessible Date Pickers](/accessibility) - Make your date picker accessible to all users, including those using screen readers.
+- [DayPicker Playground](/playground) - Play with the props to try the different customization options.
+
+### Advanced Guides
+
+- [Input Fields](/advanced-guides/input-fields) - Learn how to use DayPicker with input fields and form libraries.
+- [Custom Selections](/advanced-guides/custom-selections) - Create custom selection rules.
+- [Custom Components](/advanced-guides/custom-components) - Use custom components to create a fully customized date picker.
+- [Custom Modifiers](/advanced-guides/custom-modifiers) - Create custom modifiers to highlight specific days in the calendar.

docs/accessibility.mdx → docs/using-daypicker/accessibility.mdx

@@ -1,5 +1,5 @@
 ---
-sort: 10
+sort: 6
 ---
 
 _Using DayPicker_

docs/using-daypicker/anatomy.mdx

@@ -0,0 +1,13 @@
+---
+sort: 1
+---
+
+_Using DayPicker_
+
+# DayPicker Anatomy
+
+DayPicker is a user interface component that allows users to select dates from a calendar. This section provides an overview of the main UI elements that constitute DayPicker.
+
+## Key Elements
+
+> TODO: Add a diagram of DayPicker with callouts.

docs/props.mdx → docs/using-daypicker/customization-props.mdx

@@ -1,27 +1,15 @@
 ---
-sort: 4
+sort: 3
 ---
 
 _Using DayPicker_
 
-# DayPicker Props
+# Customization Props
 
 ## Calendar Options
 
-TODO
-
 ## Months Navigation
 
-## Selection Modes
-
-### Single
-
-### Multiple
-
-### Range
-
-### Custom
-
 ## Internationalization
 
 ## Styling

docs/guides/localization.mdx → docs/using-daypicker/localization.mdx

@@ -1,12 +1,12 @@
 ---
-sort: 3
+sort: 5
 ---
 
-_Advanced Guides_
+_Using DayPicker_
 
 # Localization
 
-DayPicker can be localized in any language using the date-fns locale objects.
+## Localization Props
 
 ## Change the Locale
 

docs/using-daypicker/selection-modes.mdx

@@ -0,0 +1,19 @@
+---
+sort: 4
+---
+
+_Using DayPicker_
+
+# Selection Modes
+
+## Single Selections
+
+## Multiple Selections
+
+## Range Selections
+
+## Custom Selections
+
+Create custom selection rules to allow or disallow specific dates.
+
+- See [Custom Selections](/advanced-guides/custom-selections) in the Advanced Guides

docs/guides/styling.mdx → docs/using-daypicker/styling.mdx

@@ -1,34 +1,43 @@
 ---
-sort: 5
+sort: 2
 ---
 
 _Using DayPicker_
 
-# Styling
+# Styling and CSS
 
-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, designed to be extended and customized.
 
-## Importing the Default Style
+You can also use your own styles, or use a CSS framework like [Tailwind CSS](https://tailwindcss.com) or [Bootstrap](https://getbootstrap.com) to style the calendar.
 
-To start with the included style, import `react-day-picker/style.css` into your app. This will add the `.rdp` class names used by DayPicker.
+## Using the Default Styles
 
-### Using a React framework
+To start with the included styles, import `react-day-picker/style.css` into your app. This will add the `.rdp` class names used by DayPicker.
+
+<details>
+<summary>Using a bundler or a React framework</summary>
 
 If you are using a React framework, such as [Next.js](http://nextjs.org) or [Gatsby](https://www.gatsbyjs.com), or a bundler like Webpack with [css-loader](https://webpack.js.org/loaders/css-loader/), import the CSS file from your app's main JavaScript or TypeScript file:
 
 ```tsx title="app.jsx"
 import "react-day-picker/style.css";
 ```
 
-### From a CDN
+</details>
+
+<details>
+<summary>Importing from a CDN</summary>
 
 If you are using a CDN, add the following link to your HTML file:
 
 ```html title="index.html"
 <link rel="stylesheet" href="https://unpkg.com/react-day-picker/style.css" />
 ```
 
-### Usage with CSS Modules
+</details>
+
+<details>
+<summary>Importing the CSS Module</summary>
 
 When using CSS modules, you can import `style.module.css`. Pass the class names to the `classNames` prop.
 
@@ -41,13 +50,13 @@ export function DatePicker() {
 }
 ```
 
-From here, you have different options to customize the appearance of the calendar, depending on your project setup.
+</details>
 
-## Setting a Dark or a Light Mode
+### Dark/Light Mode
 
 > TODO: this section is still incomplete.
 
-## Using the `rdp-` CSS Variables
+### CSS Variables
 
 The default styles use CSS variables to make it easier to customize the base appearance of the calendar. You can override the CSS variables to change the appearance of the calendar.
 
@@ -62,33 +71,19 @@ The following table lists the CSS variables used by DayPicker:
 
 > TODO: this section is still incomplete.
 
-## Overriding the Style via CSS
+---
 
-To further customize the styles, override the DayPicker CSS. For example, to change the background color of the day cells, add this style sheet to your `global.css` or `app.css`.
+## Custom Styles
 
-```css title="global.css"
-/* Change the background color of the day cell. */
-.rdp-day {
-  background-color: #f0f0f0;
-}
-```
+Use the `classNames` prop to use other classnames instead of the default ones.
 
-## Integration with Tailwind CSS
+### Tailwind CSS
 
 > TODO: this section is still incomplete.
 
-```tsx filename="App.tsx" {4}
-import { DayPicker } from "react-day-picker";
-import "react-day-picker/style.css";
-
-import "./App.css"; // Import your custom styles to override the default CSS
-
-function App() {
-  return <DayPicker />;
-}
-```
+### Custom CSS
 
-## Basic Inline Styles Support
+### Inline Styles
 
 To change the appearance of any DayPicker element via inline-styles use the `styles` prop.