fix(datepicker): support styling for out-of-month days

[Shreyasshukla957]

• I have followed the Your First Code Contribution section of the Contributing guide

Summary & Motivation

Right now, the datepicker renders leading and trailing days from adjacent months with the same weight as the current month. This makes the calendar grid hard to read.

This PR adds an outside theme token to Datepicker and dims those out-of-month days by default (text-gray-300 dark:text-gray-500) while keeping them clickable.

Related Issues

Closes #1647

Breaking API Changes

No breaking changes. Just added the outside key to the days theme interface.

Summary by CodeRabbit

• Style
  • Updated the Datepicker “days” view so days that fall outside the currently viewed month render with muted/outside styling.
  • The new appearance includes dark mode support for consistent contrast and readability.

[changeset-bot]

⚠️ No Changeset found

Latest commit: e00c386

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

[vercel]

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

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dc9351a5-6c4c-49e9-a0f6-7625f6f15687

📥 Commits

Reviewing files that changed from the base of the PR and between 5d6200e and e00c386.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

📝 Walkthrough

Walkthrough

The Datepicker days view identifies dates outside the displayed month and applies a configurable outside theme class. The default theme uses muted gray text with a dark-mode variant.

Changes

Datepicker outside-day styling

Layer / File(s)	Summary
Detect and style outside days packages/ui/src/components/Datepicker/Views/Days.tsx, packages/ui/src/components/Datepicker/theme.ts	Adds the outside theme field, detects dates outside the current month and year, conditionally applies its class, and defines muted gray default styling.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• themesberg/flowbite-react#1627: Extends Datepicker day-item theming and conditionally applies an additional day-cell class.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: styling out-of-month Datepicker days.
Linked Issues check	✅ Passed	The PR adds an outside day theme token and applies it to out-of-month days without changing clickability, matching the issue's core requirements.
Out of Scope Changes check	✅ Passed	The changes are limited to Datepicker day styling and the related theme token, with no unrelated scope detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

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.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/ui/src/components/Datepicker/Views/Days.tsx (1)

76-81: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Preserve selected styling precedence. isOutside is merged after isSelected, so its text color can override text-white on selected out-of-month days. Move it before isSelected (and isDisabled) so selected days stay readable.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/Datepicker/Views/Days.tsx` around lines 76 - 81,
Update the class merge order in the Days view’s date item styling so
theme.items.item.outside is applied before theme.items.item.selected and
theme.items.item.disabled. Preserve selected styling precedence, ensuring
selected out-of-month days retain their readable selected text color.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/ui/src/components/Datepicker/Views/Days.tsx`:
- Around line 76-81: Update the class merge order in the Days view’s date item
styling so theme.items.item.outside is applied before theme.items.item.selected
and theme.items.item.disabled. Preserve selected styling precedence, ensuring
selected out-of-month days retain their readable selected text color.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 28482308-e9fb-4bc2-9939-e9e32aa0962e

📥 Commits

Reviewing files that changed from the base of the PR and between 85319bd and 5d6200e.

📒 Files selected for processing (2)

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