feat(Datepicker): add outOfMonth styling for days outside current month

[NguyenTuMinhLong]

Changes

• Added outOfMonth class support in DatepickerViewsDaysTheme
• Added logic to detect isOutOfMonth in Days.tsx
• Added default styling for out-of-month days (lighter color, consistent with Flowbite design)

This allows users to easily distinguish days from the previous/next month in the calendar grid.

Summary by CodeRabbit

• Style
  • Out-of-month dates in the datepicker are now visually distinguished with muted styling to improve calendar readability and navigation clarity.

[vercel]

@NguyenTuMinhLong is attempting to deploy a commit to the Bergside Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2b0038c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

The datepicker now identifies days falling outside the currently viewed month by comparing each day's month against the viewDate month. A new theme class items.item.outOfMonth was introduced and conditionally applied to these days. Theme styling provides muted gray text and hover effects for out-of-month days.

Changes

Cohort / File(s)	Summary
Out-of-Month Day Styling packages/ui/src/components/Datepicker/Views/Days.tsx, packages/ui/src/components/Datepicker/theme.ts	Introduced isOutOfMonth flag to identify days outside the viewed month. Added outOfMonth property to the DatepickerViewsDaysTheme interface and defined corresponding theme styling with muted gray text and hover effects.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• Issue #1647: This PR directly implements the feature to style out-of-month days in the datepicker by adding the outOfMonth theme token and conditional class application.

Possibly related PRs

• PR #1627: Both PRs extend the Datepicker Days view with new per-day theme keys and conditional className logic (this PR adds outOfMonth, the retrieved PR adds today).

Suggested reviewers

• SutuSebastian

Poem

🐰 Out-of-month days now wear their muted gray,
A subtle style for dates that fade away,
The theme comes through with just a touch of care,
Days outside the view get styling flair! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and specifically describes the main change: adding outOfMonth styling for days outside the current month viewed in the Datepicker component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/components/Datepicker/Views/Days.tsx`:
- Line 28: The new required property outOfMonth on DatepickerViewsDaysTheme
breaks the public DatepickerTheme shape; make outOfMonth optional (change
outOfMonth: string to outOfMonth?: string) in the DatepickerViewsDaysTheme
declaration so consumers who pass custom DatepickerTheme objects to the exported
DatepickerTheme (via views.days) won’t get TypeScript errors, and ensure any
internal uses handle undefined or provide a default value where referenced.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 22c30170-203e-42fd-8e2b-78877a07a5e4

📥 Commits

Reviewing files that changed from the base of the PR and between 0f526aa and 2b0038c.

📒 Files selected for processing (2)

• packages/ui/src/components/Datepicker/Views/Days.tsx
• packages/ui/src/components/Datepicker/theme.ts

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify whether DatepickerViewsDaysTheme is publicly exported/consumed.
# Expected:
# - If exported from package barrels, this is a user-facing breaking type change.
# - If internal-only, risk is limited.

rg -n "DatepickerViewsDaysTheme" -C3
rg -n "export .*Datepicker|from \".*Datepicker" packages/ui/src -C3
rg -n "DatepickerTheme" packages/ui/src/components/Datepicker -C3

Repository: themesberg/flowbite-react

Length of output: 19717

---

🏁 Script executed:

# Get the full context of DatepickerViewsDaysTheme interface
sed -n '16,31p' packages/ui/src/components/Datepicker/Views/Days.tsx

Repository: themesberg/flowbite-react

Length of output: 337

---

🏁 Script executed:

# Check the theme definition to see how outOfMonth is defined there
cat packages/ui/src/components/Datepicker/theme.ts

Repository: themesberg/flowbite-react

Length of output: 3391

---

🏁 Script executed:

# Check if DatepickerViewsDaysTheme is re-exported anywhere else
rg "export.*DatepickerViewsDaysTheme|from.*Views/Days" packages/ui/src

Repository: themesberg/flowbite-react

Length of output: 386

---

Verify breaking change for public DatepickerTheme consumers.

Adding outOfMonth: string as a required field to DatepickerViewsDaysTheme breaks the public API. Although DatepickerViewsDaysTheme is not directly exported, it is embedded in the publicly exported DatepickerTheme interface (via views.days). Users providing custom DatepickerTheme objects without outOfMonth will encounter TypeScript compilation errors.

Consider making it optional (outOfMonth?: string) or document this as a breaking change.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/Datepicker/Views/Days.tsx` at line 28, The new
required property outOfMonth on DatepickerViewsDaysTheme breaks the public
DatepickerTheme shape; make outOfMonth optional (change outOfMonth: string to
outOfMonth?: string) in the DatepickerViewsDaysTheme declaration so consumers
who pass custom DatepickerTheme objects to the exported DatepickerTheme (via
views.days) won’t get TypeScript errors, and ensure any internal uses handle
undefined or provide a default value where referenced.