AbdulElahGwaith commited on
Commit
cf86710
·
verified ·
1 Parent(s): efd6b72

Upload folder using huggingface_hub

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
.editorconfig ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ root = true
2
+
3
+ [*]
4
+ end_of_line = lf
5
+ insert_final_newline = true
6
+
7
+ [*.{js,jsx,ts,tsx,json,yml}]
8
+ charset = utf-8
9
+ indent_style = space
10
+ indent_size = 2
.gitattributes CHANGED
@@ -33,3 +33,12 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
 
 
 
 
 
 
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ website/docs/img/anatomy-dark.png filter=lfs diff=lfs merge=lfs -text
37
+ website/docs/img/anatomy-light.png filter=lfs diff=lfs merge=lfs -text
38
+ website/static/img/anatomy-dark.png filter=lfs diff=lfs merge=lfs -text
39
+ website/static/img/anatomy-light.png filter=lfs diff=lfs merge=lfs -text
40
+ website/static/img/favicon.ico filter=lfs diff=lfs merge=lfs -text
41
+ website/static/img/favicon.png filter=lfs diff=lfs merge=lfs -text
42
+ website/static/img/logo-dark.png filter=lfs diff=lfs merge=lfs -text
43
+ website/static/img/logo.png filter=lfs diff=lfs merge=lfs -text
44
+ website/static/img/social-card.png filter=lfs diff=lfs merge=lfs -text
.github/CODEOWNERS ADDED
@@ -0,0 +1 @@
 
 
1
+ * @gpbl
.github/CODE_OF_CONDUCT.md ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Contributor Covenant Code of Conduct
2
+
3
+ ## Our Pledge
4
+
5
+ In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
6
+
7
+ ## Our Standards
8
+
9
+ Examples of behavior that contributes to creating a positive environment include:
10
+
11
+ - Using welcoming and inclusive language
12
+ - Being respectful of differing viewpoints and experiences
13
+ - Gracefully accepting constructive criticism
14
+ - Focusing on what is best for the community
15
+ - Showing empathy towards other community members
16
+
17
+ Examples of unacceptable behavior by participants include:
18
+
19
+ - The use of sexualized language or imagery and unwelcome sexual attention or advances
20
+ - Trolling, insulting/derogatory comments, and personal or political attacks
21
+ - Public or private harassment
22
+ - Publishing others' private information, such as a physical or electronic address, without explicit permission
23
+ - Other conduct which could reasonably be considered inappropriate in a professional setting
24
+
25
+ ## Our Responsibilities
26
+
27
+ Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28
+
29
+ Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30
+
31
+ ## Scope
32
+
33
+ This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34
+
35
+ ## Enforcement
36
+
37
+ Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at io@gpbl.dev. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38
+
39
+ Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40
+
41
+ ## Attribution
42
+
43
+ This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
44
+
45
+ [homepage]: https://www.contributor-covenant.org
46
+
47
+ For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq
.github/FUNDING.yml ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ # These are supported funding model platforms
2
+
3
+ github: [gpbl]
.github/ISSUE_TEMPLATE/bug_report.md ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ name: 🐛 Bug Report
3
+ about: Create a reproducible bug report
4
+ ---
5
+
6
+ Thanks for reporting a bug for DayPicker. Please provide here a brief description of the issue you’ve encountered.
7
+
8
+ ## To reproduce
9
+
10
+ Please reproduce the bug by forking [this codesandbox](https://codesandbox.io/p/sandbox/m2j7fr). Add your code there and share the URL. Otherwise copy-paste it below.
11
+
12
+ If you’re unable to easily reproduce this bug, consider opening a [support thread](https://github.com/gpbl/react-day-picker/discussions) to discuss it further.
13
+
14
+ ```tsx
15
+ import { DayPicker } from "react-day-picker";
16
+ import "react-day-picker/style.css";
17
+
18
+ export default function App() {
19
+ return <DayPicker mode="single" />;
20
+ }
21
+ ```
22
+
23
+ CodeSandbox: https://codesandbox.io/p/sandbox/SANDBOX_ID
24
+
25
+ ## Actual Behavior
26
+
27
+ Describe what is actually happening.
28
+
29
+ ## Expected Behavior
30
+
31
+ Describe what you expect to happen.
32
+
33
+ ## Screenshots
34
+
35
+ If relevant, include screenshots or GIFs to illustrate the bug.
.github/ISSUE_TEMPLATE/config.yml ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ blank_issues_enabled: false
2
+ contact_links:
3
+ - name: 🙋 Get Help and Technical Support
4
+ url: https://github.com/gpbl/react-day-picker/discussions
5
+ about: Ask and answer questions in the GitHub discussions page
6
+ - name: 💡 Ideas and Feature requests
7
+ url: https://github.com/gpbl/react-day-picker/discussions/categories/ideas
8
+ about: Discuss and propose new features or improvements
.github/PULL_REQUEST_TEMPLATE.md ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Pull Request Template
2
+
3
+ Thanks for your PR! Make sure you have read the [CONTRIBUTING](./CONTRIBUTING.md) guide.
4
+
5
+ ## What's Changed
6
+
7
+ _Briefly describe the changes in this pull request._
8
+
9
+ ## Type of Change
10
+
11
+ - [ ] Bug fix
12
+ - [ ] New feature
13
+ - [ ] Breaking change
14
+ - [ ] Documentation update
15
+
16
+ ## Tips for a good PR
17
+
18
+ - If you are changing code, please add tests to cover the changes.
19
+ - Some screenshots or screen recording could help to understand the changes.
20
+ - If it is a bug, please provide the code to reproduce it.
21
+
22
+ Thanks
23
+
24
+ ## Additional Notes
25
+
26
+ Add any extra comments or questions here.
.github/workflows/package.yml ADDED
@@ -0,0 +1,116 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ name: react-day-picker
2
+
3
+ on:
4
+ release:
5
+ types: [published]
6
+ pull_request:
7
+ branches:
8
+ - "**"
9
+ push:
10
+ branches:
11
+ - "**"
12
+ workflow_dispatch:
13
+ inputs:
14
+ publish:
15
+ description: Publish on npm
16
+ required: false
17
+ default: false
18
+ type: boolean
19
+
20
+ permissions:
21
+ id-token: write # Required for OIDC
22
+ contents: read
23
+
24
+ jobs:
25
+ typecheck:
26
+ runs-on: ubuntu-latest
27
+ steps:
28
+ - uses: actions/checkout@v4
29
+ - uses: pnpm/action-setup@v4
30
+ - uses: actions/setup-node@v4
31
+ with:
32
+ node-version: 24
33
+ cache: pnpm
34
+ registry-url: "https://registry.npmjs.org"
35
+ - run: pnpm install --frozen-lockfile
36
+ - run: pnpm typecheck
37
+
38
+ lint:
39
+ runs-on: ubuntu-latest
40
+ steps:
41
+ - uses: actions/checkout@v4
42
+ - uses: pnpm/action-setup@v4
43
+ - uses: actions/setup-node@v4
44
+ with:
45
+ node-version: 24
46
+ cache: pnpm
47
+ - run: pnpm install --frozen-lockfile
48
+ - run: pnpm lint ci . --reporter=github
49
+
50
+ test:
51
+ needs: [lint, typecheck]
52
+ runs-on: ubuntu-latest
53
+ steps:
54
+ - uses: actions/checkout@v4
55
+ - uses: pnpm/action-setup@v4
56
+ - uses: actions/setup-node@v4
57
+ with:
58
+ node-version: 24
59
+ cache: pnpm
60
+ - run: pnpm install --frozen-lockfile
61
+ - run: pnpm test
62
+ - run: pnpm test:tz
63
+
64
+ build:
65
+ runs-on: ubuntu-latest
66
+ steps:
67
+ - uses: actions/checkout@v4
68
+ - uses: pnpm/action-setup@v4
69
+ - uses: actions/setup-node@v4
70
+ with:
71
+ node-version: 24
72
+ cache: pnpm
73
+ - run: pnpm install --frozen-lockfile
74
+ - run: pnpm build
75
+ - uses: actions/upload-artifact@v4
76
+ with:
77
+ name: rdp-dist
78
+ path: dist
79
+
80
+ test-build:
81
+ runs-on: ubuntu-latest
82
+ needs: [build]
83
+ steps:
84
+ - uses: actions/checkout@v4
85
+ - uses: pnpm/action-setup@v4
86
+ - uses: actions/setup-node@v4
87
+ with:
88
+ node-version: 24
89
+ cache: pnpm
90
+ - uses: actions/download-artifact@v4
91
+ with:
92
+ name: rdp-dist
93
+ - run: pnpm install --frozen-lockfile
94
+ - run: pnpm run build
95
+ - run: pnpm test:build
96
+
97
+ publish-on-npm:
98
+ runs-on: ubuntu-latest
99
+ needs: [build, test]
100
+ if: ${{ github.event_name == 'release' || github.event.inputs.publish }}
101
+ permissions:
102
+ contents: write
103
+ id-token: write
104
+ steps:
105
+ - uses: actions/checkout@v4
106
+ - uses: pnpm/action-setup@v4
107
+ - uses: actions/setup-node@v4
108
+ with:
109
+ node-version: 24
110
+ registry-url: https://registry.npmjs.org/
111
+ always-auth: false
112
+ - uses: actions/download-artifact@v4
113
+ with:
114
+ name: rdp-dist
115
+ path: dist
116
+ - run: npm publish --provenance --tag latest
.github/workflows/performance.yml ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ name: performance
2
+
3
+ on:
4
+ pull_request:
5
+ types: [labeled, synchronize, opened]
6
+ branches:
7
+ - main
8
+ push:
9
+ branches:
10
+ - main
11
+
12
+ permissions:
13
+ contents: read
14
+ pull-requests: write
15
+
16
+ jobs:
17
+ build:
18
+ if: contains(github.event.pull_request.labels.*.name, 'performance')
19
+ runs-on: ubuntu-latest
20
+ steps:
21
+ - name: Checkout repository
22
+ uses: actions/checkout@v4
23
+
24
+ - name: Set up pnpm
25
+ uses: pnpm/action-setup@v4
26
+
27
+ - name: Set up Node.js
28
+ uses: actions/setup-node@v4
29
+
30
+ - name: Create pnpm store directory
31
+ run: mkdir -p ~/.pnpm-store
32
+
33
+ - name: Install dependencies
34
+ run: pnpm install --frozen-lockfile
35
+
36
+ - name: Build project
37
+ run: pnpm build
38
+
39
+ - name: Upload build artifacts
40
+ uses: actions/upload-artifact@v4
41
+ with:
42
+ name: rdp-dist
43
+ path: dist
44
+
45
+ capture-report:
46
+ if: contains(github.event.pull_request.labels.*.name, 'performance')
47
+ needs: [build]
48
+ runs-on: ubuntu-latest
49
+ steps:
50
+ - name: Checkout repository
51
+ uses: actions/checkout@v4
52
+
53
+ - name: Set up Chrome
54
+ uses: browser-actions/setup-chrome@v1
55
+ id: setup-chrome
56
+
57
+ - name: Set up pnpm
58
+ uses: pnpm/action-setup@v4
59
+
60
+ - name: Set up Node.js
61
+ uses: actions/setup-node@v4
62
+
63
+ - name: Download build artifacts
64
+ uses: actions/download-artifact@v4
65
+ with:
66
+ name: rdp-dist
67
+ path: dist
68
+
69
+ - name: Create pnpm store directory
70
+ run: mkdir -p ~/.pnpm-store
71
+
72
+ - name: Install dependencies
73
+ run: pnpm install --frozen-lockfile
74
+
75
+ - name: Start server
76
+ run: pnpm --filter performance-tests start-server &
77
+ env:
78
+ CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }}
79
+
80
+ - name: Wait for server to start
81
+ run: pnpx wait-on http://localhost:4173 --timeout 10000
82
+
83
+ - name: Capture performance test
84
+ run: pnpm --filter performance-tests run capture
85
+ env:
86
+ CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }}
87
+ CI: true
88
+
89
+ - name: Upload report
90
+ uses: actions/upload-artifact@v4
91
+ with:
92
+ name: report
93
+ path: ./performance-tests/reports/report.html
.github/workflows/website.yml ADDED
@@ -0,0 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ name: website
2
+
3
+ on:
4
+ release:
5
+ types: [published]
6
+ pull_request:
7
+ branches:
8
+ - main
9
+ push:
10
+ branches:
11
+ - main
12
+
13
+ jobs:
14
+ build-react-day-picker:
15
+ runs-on: ubuntu-latest
16
+ steps:
17
+ - uses: actions/checkout@v4
18
+ - uses: pnpm/action-setup@v4
19
+ - uses: actions/setup-node@v4
20
+ with:
21
+ node-version: 20.16
22
+ cache: pnpm
23
+ - run: pnpm install --frozen-lockfile
24
+ - run: pnpm build
25
+ - uses: actions/upload-artifact@v4
26
+ with:
27
+ name: rdp-dist
28
+ path: dist
29
+
30
+ typecheck-website:
31
+ needs: [build-react-day-picker]
32
+ runs-on: ubuntu-latest
33
+ steps:
34
+ - uses: actions/checkout@v4
35
+ - uses: pnpm/action-setup@v4
36
+ - uses: actions/setup-node@v4
37
+ with:
38
+ node-version: 20.16
39
+ cache: pnpm
40
+ - uses: actions/download-artifact@v4
41
+ with:
42
+ name: rdp-dist
43
+ path: dist
44
+ - run: pnpm install --frozen-lockfile
45
+ - run: pnpm -F website typecheck
46
+
47
+ build-website:
48
+ needs: [build-react-day-picker]
49
+ runs-on: ubuntu-latest
50
+ steps:
51
+ - uses: actions/checkout@v4
52
+ - uses: pnpm/action-setup@v4
53
+ - uses: actions/setup-node@v4
54
+ with:
55
+ node-version: 20.16
56
+ cache: pnpm
57
+ - uses: actions/download-artifact@v4
58
+ with:
59
+ name: rdp-dist
60
+ path: dist
61
+ - run: pnpm install --frozen-lockfile
62
+ - run: pnpm -F website build
63
+ - uses: actions/upload-artifact@v4
64
+ with:
65
+ name: website-build
66
+ path: website/build
.gitignore ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ .DS_Store
2
+
3
+ node_modules
4
+ dist
5
+ /performance-tests/reports/report.html
6
+ /performance-tests/reports/markdown-report.md
7
+ /coverage
.npmrc ADDED
@@ -0,0 +1 @@
 
 
1
+ ignore-workspace-root-check=true
.nvmrc ADDED
@@ -0,0 +1 @@
 
 
1
+ 18
.prettierignore ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ **/api/**
2
+ **/dist/**
3
+ **/build/**
4
+ **/versioned_docs/**
5
+ website/.docusaurus/**
6
+ website/examples-v8/**
7
+ performance-tests
.prettierrc ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "plugins": ["prettier-plugin-jsdoc"],
3
+ "overrides": [
4
+ {
5
+ "files": ["*.md", "*.mdx"]
6
+ },
7
+ {
8
+ "files": ["*.ts", "*.tsx"]
9
+ }
10
+ ]
11
+ }
.vscode/settings.json ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "editor.formatOnSave": true,
3
+ "editor.codeActionsOnSave": {
4
+ "source.fixAll.biome": "explicit"
5
+ },
6
+ "[typescript]": {
7
+ "editor.defaultFormatter": "biomejs.biome"
8
+ },
9
+ "[typescriptreact]": {
10
+ "editor.defaultFormatter": "biomejs.biome"
11
+ },
12
+ "[javascript]": {
13
+ "editor.defaultFormatter": "biomejs.biome"
14
+ },
15
+ "[javascriptreact]": {
16
+ "editor.defaultFormatter": "biomejs.biome"
17
+ }
18
+ }
.vscode/tasks.json ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "version": "2.0.0",
3
+ "tasks": [
4
+ {
5
+ "type": "typescript",
6
+ "tsconfig": "tsconfig-esm.json",
7
+ "option": "watch",
8
+ "problemMatcher": [
9
+ "$tsc-watch"
10
+ ],
11
+ "group": "build",
12
+ "label": "👀 tsc: watch - tsconfig-esm.json",
13
+ "detail": "Watch the project in ESM format",
14
+ "runOptions": {
15
+ "runOn": "folderOpen"
16
+ }
17
+ },
18
+ {
19
+ "type": "npm",
20
+ "script": "build",
21
+ "group": "build",
22
+ "problemMatcher": [],
23
+ "label": "🔨 npm: build",
24
+ "detail": "Build the project in ESM and CJS format"
25
+ },
26
+ {
27
+ "type": "typescript",
28
+ "tsconfig": "tsconfig-esm.json",
29
+ "option": "watch",
30
+ "problemMatcher": [
31
+ "$tsc-watch"
32
+ ],
33
+ "group": "build",
34
+ "label": "⏯️ tsc: watch",
35
+ "detail": "Watch the project in ESM format",
36
+ "runOptions": {
37
+ "runOn": "folderOpen"
38
+ }
39
+ },
40
+ {
41
+ "label": "🧹 format and lint",
42
+ "detail": "Run formatting and linting",
43
+ "type": "shell",
44
+ "command": "pnpm format && pnpm lint --fix",
45
+ "problemMatcher": []
46
+ }
47
+ ]
48
+ }
CHANGELOG.md ADDED
The diff for this file is too large to render. See raw diff
 
CONTRIBUTING.md ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Contributing to DayPicker
2
+
3
+ You are welcome to join the [DayPicker contributors](https://github.com/gpbl/react-day-picker/graphs/contributors) and help us build the best date picker for React.
4
+
5
+ ## Ways to Contribute
6
+
7
+ There are many ways to contribute to the development of DayPicker:
8
+
9
+ - Improve our build tools and GitHub actions
10
+ - Open PRs with new features, bug fixes, and improved rendering performance
11
+ - Align the source code with the latest TypeScript/React practices
12
+ - Help with unit and integration tests
13
+ - Proofread [our website](https://daypicker.dev/) and the code documentation in the source files
14
+ - Make the website more stylish
15
+ - Help maintain [the repository](https://github.com/gpbl/react-day-picker) on GitHub and triage issues and PRs
16
+ - Answer [support questions](https://github.com/gpbl/react-day-picker/discussions/categories/support)
17
+ - [Sponsor the project](https://github.com/sponsors/gpbl)
18
+
19
+ [Send a message](https://github.com/gpbl/react-day-picker/discussions) on our discussions page to introduce yourself!
20
+
21
+ ## Working With the Source Code
22
+
23
+ DayPicker is built using the following tools and libraries:
24
+
25
+ - [pnpm](https://pnpm.io/) - for package management
26
+ - [TypeScript](https://www.typescriptlang.org/) with [React](https://reactjs.org/)
27
+ - [Docusaurus](https://docusaurus.io/) - for the documentation website
28
+ - [Vite](https://vitejs.dev/) - for the examples app
29
+ - [Jest](https://jestjs.io/) - for unit tests
30
+
31
+ To contribute to DayPicker, start by cloning the repository:
32
+
33
+ ```sh
34
+ git clone https://github.com/gpbl/react-day-picker.git
35
+ cd react-day-picker
36
+ pnpm install
37
+ ```
38
+
39
+ ### DayPicker Workspace
40
+
41
+ If your are using [Visual Studio code](https://code.visualstudio.com) open the [react-day-picker.code-workspace](https://github.com/gpbl/react-day-picker/blob/main/react-day-picker.code-workspace) to set up the development environment. This workspace includes:
42
+
43
+ - Suggested extensions for the project
44
+ - TypeScript compiler running in watch mode for the ESM export
45
+ - Docusaurus website running at http://localhost:2001, with documentation and API docs
46
+ - Vite.js examples app served at http://localhost:5173
47
+ - Use this app to run isolated test cases and examples, exported by `/examples/index.ts`
48
+
49
+ ### Test Driven Development
50
+
51
+ DayPicker development is test-driven. Change code and run the tests using `pnpm run test-watch` or `pnpm run test`. The Jest plugin in the VS Code workspace is recommended for running tests.
52
+
53
+ ### Useful Scripts
54
+
55
+ - To run the build in watch mode:
56
+ ```sh
57
+ pnpm tsc --project tsconfig-esm.json --watch
58
+ ```
59
+ - To run the tests in watch mode:
60
+ ```
61
+ pnpm run test-watch
62
+ ```
63
+ - To run the examples app at http://localhost:5173
64
+ ```
65
+ pnpm --filter examples-app run dev
66
+ ```
67
+ - To run the documentation at http://localhost:2001:
68
+ ```
69
+ pnpm --filter website run start
70
+ ```
LICENSE ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014-2025 Giampaolo Bellavite <io@gpbl.dev> and contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
README.md ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # React DayPicker
2
+
3
+ DayPicker is a [React](https://react.dev) component for creating date pickers, calendars, and date inputs for web applications.
4
+
5
+ ## Documentation
6
+
7
+ See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference, or read [the docs in the repository](website/docs/start.mdx).
8
+
9
+ <picture>
10
+ <source media="(prefers-color-scheme: dark)" srcset="./website/static/img/screenshot-dark.png" />
11
+ <source media="(prefers-color-scheme: light)" srcset="./website/static/img/screenshot-light.png" />
12
+ <img width="460" src="./website/static/img/screenshot.png" alt="Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected." />
13
+ </picture>
14
+
15
+ ## Features
16
+
17
+ - 🛠 Extensive set of props for [customizing](https://daypicker.dev/docs/customization) the calendar.
18
+ - 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
19
+ - 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
20
+ - 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/time-zone).
21
+ - 🌐 Support for [ISO 8601](http://daypicker.dev/localization/iso-and-broadcast#iso-8601-calendar), [Persian](http://daypicker.dev/localization/persian), [Buddhist (Thai)](http://daypicker.dev/localization/buddhist), [Ethiopic](http://daypicker.dev/localization/ethiopic), [Hebrew](http://daypicker.dev/localization/hebrew) and [broadcast](http://daypicker.dev/localization/iso-and-broadcast#broadcast-calendar) calendar.
22
+ - 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
23
+ - ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
24
+ - 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).
25
+
26
+ DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on [date-fns](https://date-fns.org) for date manipulation and formatting.
27
+
28
+ ## Installation
29
+
30
+ ```bash
31
+ npm install react-day-picker
32
+ ```
33
+
34
+ <a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
35
+
36
+ ## Example
37
+
38
+ ```tsx
39
+ import { DayPicker } from "react-day-picker";
40
+ import "react-day-picker/style.css";
41
+
42
+ function MyDatePicker() {
43
+ const [selected, setSelected] = useState<Date>();
44
+
45
+ return (
46
+ <DayPicker
47
+ mode="single"
48
+ selected={selected}
49
+ onSelect={setSelected}
50
+ footer={
51
+ selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
52
+ }
53
+ />
54
+ );
55
+ }
56
+ ```
57
+
58
+ ## Compatibility
59
+
60
+ DayPicker is compatible with React 16.8 and later.
61
+
62
+ ## License
63
+
64
+ DayPicker is released under the [MIT License](https://daypicker.dev/license).
65
+
66
+ ## Community
67
+
68
+ Ask for help and share your experience with DayPicker:
69
+
70
+ - 💬 [Discussion forums](https://github.com/gpbl/react-day-picker/discussions) - Get support and provide feedback.
71
+ - 🪳 [Report an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) - Report bugs or request features.
72
+
73
+ ## Sponsors
74
+
75
+ Thank you to everyone supporting DayPicker - your sponsorship keeps this project maintained and evolving.
76
+
77
+ <p>
78
+ <a href="https://github.com/CHECK24" title="CHECK24"><img src="https://github.com/CHECK24.png?size=64" alt="CHECK24" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
79
+ <a href="https://github.com/wilsonadenuga" title="wilsonadenuga"><img src="https://github.com/wilsonadenuga.png?size=64" alt="wilsonadenuga" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
80
+ <a href="https://github.com/severinlandolt" title="severinlandolt"><img src="https://github.com/severinlandolt.png?size=64" alt="severinlandolt" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
81
+ <a href="https://github.com/syntaxfm" title="syntaxfm"><img src="https://github.com/syntaxfm.png?size=64" alt="syntaxfm" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
82
+ <a href="https://github.com/thnxdev" title="thnxdev"><img src="https://github.com/thnxdev.png?size=64" alt="thnxdev" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
83
+ <a href="https://github.com/katyabilokur" title="katyabilokur"><img src="https://github.com/katyabilokur.png?size=64" alt="katyabilokur" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
84
+ <a href="https://github.com/bedandbreakfasteu" title="bedandbreakfasteu"><img src="https://github.com/bedandbreakfasteu.png?size=64" alt="bedandbreakfasteu" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
85
+ <a href="https://github.com/Thinkmill" title="Thinkmill"><img src="https://github.com/Thinkmill.png?size=64" alt="Thinkmill" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
86
+ <a href="https://github.com/AlexKDawson" title="AlexKDawson"><img src="https://github.com/AlexKDawson.png?size=64" alt="AlexKDawson" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
87
+ <a href="https://github.com/dimitur2204" title="dimitur2204"><img src="https://github.com/dimitur2204.png?size=64" alt="dimitur2204" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
88
+ <a href="https://github.com/indeedeng" title="indeedeng"><img src="https://github.com/indeedeng.png?size=64" alt="indeedeng" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
89
+ <a href="https://github.com/flexbox" title="flexbox"><img src="https://github.com/flexbox.png?size=64" alt="flexbox" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
90
+ <a href="https://github.com/github" title="github"><img src="https://github.com/github.png?size=64" alt="github" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
91
+ <a href="https://github.com/tjfred35" title="tjfred35"><img src="https://github.com/tjfred35.png?size=64" alt="tjfred35" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
92
+ </p>
93
+
94
+ - 🎗️ Become a sponsor: https://github.com/sponsors/gpbl
SECURITY.md ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Security Policy
2
+
3
+ ## Supported Versions
4
+
5
+ We support security updates for the following versions:
6
+
7
+ | Version | Supported |
8
+ | ------- | ------------------ |
9
+ | 8.9 | :white_check_mark: |
10
+ | < 8.9 | :x: |
11
+
12
+ ## Reporting a Vulnerability
13
+
14
+ To report a vulnerability please write a message to `io@gpbl.dev`.
biome.json ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
3
+ "vcs": {
4
+ "enabled": false,
5
+ "clientKind": "git",
6
+ "useIgnoreFile": false
7
+ },
8
+ "files": {
9
+ "ignoreUnknown": false,
10
+ "includes": [
11
+ "**/*.ts",
12
+ "**/*.tsx",
13
+ "!**/dist",
14
+ "!**/build",
15
+ "!**/versioned_docs",
16
+ "!website/.docusaurus",
17
+ "!website/examples-v8"
18
+ ]
19
+ },
20
+ "formatter": {
21
+ "enabled": true,
22
+ "indentStyle": "space"
23
+ },
24
+ "linter": {
25
+ "enabled": true,
26
+ "rules": {
27
+ "recommended": true,
28
+ "correctness": {
29
+ "useUniqueElementIds": "off",
30
+ "noUnusedVariables": {
31
+ "level": "error",
32
+ "options": {
33
+ "ignoreRestSiblings": true
34
+ }
35
+ }
36
+ }
37
+ }
38
+ },
39
+ "javascript": {
40
+ "jsxRuntime": "reactClassic",
41
+ "formatter": {
42
+ "quoteStyle": "double"
43
+ }
44
+ },
45
+ "assist": {
46
+ "enabled": true,
47
+ "actions": {
48
+ "source": {
49
+ "organizeImports": "on"
50
+ }
51
+ }
52
+ }
53
+ }
buddhist.d.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ export * from "./dist/cjs/buddhist/index.d.ts";
buddhist.js ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ const buddhist = require("./dist/cjs/buddhist/index.js");
2
+ module.exports = buddhist;
ethiopic.d.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ export * from "./dist/cjs/ethiopic/index.d.ts";
ethiopic.js ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ /* eslint-disable @typescript-eslint/no-require-imports */
2
+ /* eslint-disable no-undef */
3
+ const ethiopic = require("./dist/cjs/ethiopic/index.js");
4
+ module.exports = ethiopic;
examples-app/.gitignore ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Logs
2
+ logs
3
+ *.log
4
+ npm-debug.log*
5
+ yarn-debug.log*
6
+ yarn-error.log*
7
+ pnpm-debug.log*
8
+ lerna-debug.log*
9
+
10
+ node_modules
11
+ dist
12
+ dist-ssr
13
+ *.local
14
+
15
+ # Editor directories and files
16
+ .vscode/*
17
+ !.vscode/extensions.json
18
+ .idea
19
+ .DS_Store
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
examples-app/README.md ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ # Examples app
2
+
3
+ This small app run the examples in DayPicker and can be used to test the library.
examples-app/index.html ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>DayPicker Examples</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
examples-app/package.json ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "examples-app",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsc -b && vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "react": "^19.2.1",
13
+ "react-day-picker": "workspace:*",
14
+ "react-dom": "^19.2.1"
15
+ },
16
+ "devDependencies": {
17
+ "@types/react": "^19.2.7",
18
+ "@types/react-dom": "^19.2.3",
19
+ "@vitejs/plugin-react": "^5.1.1",
20
+ "typescript": "^5.9.3",
21
+ "vite": "^7.2.6"
22
+ }
23
+ }
examples-app/public/vite.svg ADDED
examples-app/src/App.css ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ /* text-align: center; */
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5em;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ @media (prefers-color-scheme: dark) {
37
+ .rdp-root {
38
+ --rdp-accent-background-color: #073845;
39
+ /* --rdp-range_end-color: black; */
40
+ /* --rdp-range_start-color: black; */
41
+ }
42
+ }
43
+
44
+ .card {
45
+ padding: 2em;
46
+ }
47
+
48
+ .read-the-docs {
49
+ color: #888;
50
+ }
examples-app/src/App.tsx ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React, { useEffect, useState } from "react";
2
+
3
+ import * as Examples from "react-day-picker/examples";
4
+ import "react-day-picker/style.css";
5
+
6
+ import "./App.css";
7
+
8
+ const updateQueryString = (key: string, value: string) => {
9
+ const url = new URL(window.location.href);
10
+ const params = new URLSearchParams(url.search);
11
+ params.set(key, value);
12
+ window.history.pushState({}, "", `${url.pathname}?${params.toString()}`);
13
+ };
14
+
15
+ function App() {
16
+ const [example, setExample] = useState("Start");
17
+
18
+ useEffect(() => {
19
+ const params = new URLSearchParams(window.location.search);
20
+ const value = params.get("example");
21
+ if (value) {
22
+ setExample(value);
23
+ }
24
+ }, []);
25
+
26
+ // biome-ignore lint: suspicious/noDynamicNamespaceImportAccess: not a concern
27
+ const Component: React.ComponentType = Examples[
28
+ example as keyof typeof Examples
29
+ ] as React.ComponentType;
30
+ return (
31
+ <>
32
+ {/* create a select that allows to choose between the examples */}
33
+ <label>
34
+ Example:{" "}
35
+ <select
36
+ name="example_name"
37
+ onChange={(e) => {
38
+ updateQueryString("example", e.target.value);
39
+ setExample(e.target.value);
40
+ }}
41
+ value={example}
42
+ >
43
+ {Object.keys(Examples).map((name) => (
44
+ <option key={name} value={name}>
45
+ {name}
46
+ </option>
47
+ ))}
48
+ </select>
49
+ </label>
50
+ <div>
51
+ <Component />
52
+ </div>
53
+ </>
54
+ );
55
+ }
56
+
57
+ export default App;
examples-app/src/assets/react.svg ADDED
examples-app/src/index.css ADDED
@@ -0,0 +1,71 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --ifm-background-color: #242424;
3
+ --ifm-menu-color-background-hover: rgba(255, 255, 255, 0.05);
4
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
5
+ line-height: 1.5;
6
+ font-weight: 400;
7
+
8
+ color-scheme: light dark;
9
+ color: rgba(255, 255, 255, 0.87);
10
+ background-color: var(--ifm-background-color);
11
+
12
+ font-synthesis: none;
13
+ text-rendering: optimizeLegibility;
14
+ -webkit-font-smoothing: antialiased;
15
+ -moz-osx-font-smoothing: grayscale;
16
+ }
17
+
18
+ a {
19
+ font-weight: 500;
20
+ color: #646cff;
21
+ text-decoration: inherit;
22
+ }
23
+ a:hover {
24
+ color: #535bf2;
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ /* display: flex;
30
+ place-items: center; */
31
+ min-width: 320px;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ h1 {
36
+ font-size: 3.2em;
37
+ line-height: 1.1;
38
+ }
39
+ /*
40
+ button {
41
+ border-radius: 8px;
42
+ border: 1px solid transparent;
43
+ padding: 0.6em 1.2em;
44
+ font-size: 1em;
45
+ font-weight: 500;
46
+ font-family: inherit;
47
+ background-color: #1a1a1a;
48
+ cursor: pointer;
49
+ transition: border-color 0.25s;
50
+ }
51
+ button:hover {
52
+ border-color: #646cff;
53
+ }
54
+ button:focus,
55
+ button:focus-visible {
56
+ outline: 4px auto -webkit-focus-ring-color;
57
+ } */
58
+
59
+ @media (prefers-color-scheme: light) {
60
+ :root {
61
+ --ifm-background-color: #ffffff;
62
+ --ifm-menu-color-background-hover: rgba(0, 0, 0, 0.05);
63
+ color: #213547;
64
+ }
65
+ a:hover {
66
+ color: #747bff;
67
+ }
68
+ button {
69
+ background-color: #f9f9f9;
70
+ }
71
+ }
examples-app/src/main.tsx ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+
3
+ import ReactDOM from "react-dom/client";
4
+
5
+ import App from "./App.tsx";
6
+ import "./index.css";
7
+
8
+ ReactDOM.createRoot(document.getElementById("root") ?? document.body).render(
9
+ <React.StrictMode>
10
+ <App />
11
+ </React.StrictMode>,
12
+ );
examples-app/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ /// <reference types="vite/client" />
examples-app/tsconfig.app.json ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5
+ "target": "ES2020",
6
+ "useDefineForClassFields": true,
7
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
8
+ "module": "ESNext",
9
+ "skipLibCheck": true,
10
+
11
+ /* Bundler mode */
12
+ "moduleResolution": "bundler",
13
+ "allowImportingTsExtensions": true,
14
+ "resolveJsonModule": true,
15
+ "isolatedModules": true,
16
+ "moduleDetection": "force",
17
+ "noEmit": true,
18
+ "jsx": "react-jsx",
19
+
20
+ /* Linting */
21
+ "strict": true,
22
+ "noUnusedLocals": false,
23
+ "noUnusedParameters": false,
24
+ "noFallthroughCasesInSwitch": true
25
+ },
26
+ "include": ["src"]
27
+ }
examples-app/tsconfig.json ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "files": [],
3
+ "references": [
4
+ {
5
+ "path": "./tsconfig.app.json"
6
+ },
7
+ {
8
+ "path": "./tsconfig.node.json"
9
+ }
10
+ ]
11
+ }
examples-app/tsconfig.node.json ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
5
+ "skipLibCheck": true,
6
+ "module": "ESNext",
7
+ "moduleResolution": "bundler",
8
+ "allowSyntheticDefaultImports": true,
9
+ "strict": true,
10
+ "noEmit": true
11
+ },
12
+ "include": ["vite.config.ts"]
13
+ }
examples-app/vite.config.ts ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ import react from "@vitejs/plugin-react";
2
+ import { defineConfig } from "vite";
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [react()],
7
+ });
examples/AccessibleDatePicker.tsx ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { format } from "date-fns";
2
+ import React, { useState } from "react";
3
+ import { DayPicker } from "react-day-picker";
4
+
5
+ export function AccessibleDatePicker() {
6
+ const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
7
+ return (
8
+ <DayPicker
9
+ mode="single"
10
+ onSelect={setMeetingDate}
11
+ selected={meetingDate}
12
+ labels={{
13
+ labelDayButton: (date, modifiers) => {
14
+ return modifiers.selected
15
+ ? `Selected Meeting Date: ${format(date, "PPP")}`
16
+ : "";
17
+ },
18
+ }}
19
+ footer={
20
+ meetingDate
21
+ ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
22
+ : "Please pick a date for the meeting."
23
+ }
24
+ />
25
+ );
26
+ }
examples/Animate.tsx ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React, { useState } from "react";
2
+
3
+ import { DayPicker } from "react-day-picker";
4
+
5
+ export function Animate() {
6
+ const [selected, setSelected] = useState<Date>();
7
+
8
+ return (
9
+ <DayPicker
10
+ mode="single"
11
+ animate
12
+ selected={selected}
13
+ onSelect={setSelected}
14
+ fixedWeeks
15
+ />
16
+ );
17
+ }
examples/AnimateCSSVars.tsx ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+
3
+ import { DayPicker } from "react-day-picker";
4
+
5
+ export function AnimateCSSVars() {
6
+ return (
7
+ <>
8
+ <style>
9
+ {`
10
+ .custom-animate {
11
+ --rdp-animation_duration: .1s;
12
+ --rdp-animation_timing: ease-in;
13
+ }
14
+ `}
15
+ </style>
16
+ <DayPicker className="custom-animate" animate />
17
+ </>
18
+ );
19
+ }
examples/AnimateRange.tsx ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React, { useState } from "react";
2
+
3
+ import { type DateRange, DayPicker } from "react-day-picker";
4
+
5
+ export function AnimateRange() {
6
+ const [selected, setSelected] = useState<DateRange>();
7
+
8
+ return (
9
+ <DayPicker
10
+ mode="range"
11
+ animate
12
+ selected={selected}
13
+ onSelect={setSelected}
14
+ numberOfMonths={6}
15
+ />
16
+ );
17
+ }
examples/AnimateRtl.tsx ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { ar } from "date-fns/locale";
2
+ import React, { useState } from "react";
3
+ import { DayPicker } from "react-day-picker";
4
+ import classNames from "react-day-picker/style.module.css";
5
+
6
+ export function AnimateRtl() {
7
+ const [selected, setSelected] = useState<Date>();
8
+
9
+ return (
10
+ <DayPicker
11
+ mode="single"
12
+ locale={ar}
13
+ animate
14
+ dir="rtl"
15
+ selected={selected}
16
+ onSelect={setSelected}
17
+ classNames={classNames}
18
+ />
19
+ );
20
+ }
examples/AsiaSaigonTimezone.test.tsx ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+
3
+ import { render, screen } from "@/test/render";
4
+ import { AsiaSaigonTimezone } from "./AsiaSaigonTimezone";
5
+
6
+ beforeEach(() => {
7
+ render(<AsiaSaigonTimezone />);
8
+ });
9
+
10
+ test("the first row should display 7 days", () => {
11
+ expect(
12
+ screen.getAllByRole("row")[0].querySelectorAll("[role='gridcell']"),
13
+ ).toHaveLength(7);
14
+ });
examples/AsiaSaigonTimezone.tsx ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+
3
+ import { DayPicker, TZDate } from "react-day-picker";
4
+
5
+ export function AsiaSaigonTimezone() {
6
+ const timeZone = "Asia/Saigon";
7
+
8
+ return (
9
+ <DayPicker
10
+ defaultMonth={new TZDate(1900, 11, 1, timeZone)}
11
+ timeZone={timeZone}
12
+ showOutsideDays
13
+ fixedWeeks
14
+ noonSafe
15
+ />
16
+ );
17
+ }