feat: add calendar component to coss UI

[devin-ai-integration]

feat: add calendar component to coss UI

Summary

Adds a new Calendar primitive component to coss UI based on react-day-picker v9.13.0. The component supports single date selection (default), multiple selection, and range selection modes.

Key features:

• captionLayout prop with "label" (default) and "dropdown" variants for month/year navigation
• Custom CalendarDayButton component with focus management and data attributes for range selection
• CSS custom properties (--cell-size) for easy size customization
• RTL support for navigation chevrons
• buttonVariant prop to customize navigation button styling
• Support for custom Dropdown component via components prop

Files added:

• apps/ui/registry/default/ui/calendar.tsx - Main component implementation
• apps/ui/content/docs/components/calendar.mdx - Documentation with installation instructions and API reference
• apps/ui/registry/default/particles/p-calendar-1.tsx - Basic calendar example
• apps/ui/registry/default/particles/p-calendar-2.tsx - Single date selection example
• apps/ui/registry/default/particles/p-calendar-3.tsx - Date range selection example
• apps/ui/registry/default/particles/p-calendar-4.tsx - Dropdown navigation example (native select)
• apps/ui/registry/default/particles/p-calendar-5.tsx - Custom Select dropdown example (coss UI Select)
• Generated registry JSON files for shadcn CLI consumption
• Synced component to packages/ui/src/components/calendar.tsx

Updates since last revision

• Added new particle example (p-calendar-5) demonstrating custom dropdown navigation using coss UI Select component instead of native HTML select
• This shows how to use the components={{ Dropdown: CustomDropdown }} prop to integrate design system components

Review & Testing Checklist for Human

• Custom Select dropdown: Test p-calendar-5 example - verify the coss UI Select component works correctly for month/year selection and that the calendar updates when selections change
• Native dropdown navigation: Test p-calendar-4 with captionLayout="dropdown" - verify native month/year dropdowns render and function correctly
• Visual verification: Run bun run dev --filter=ui and navigate to /ui/docs/components/calendar to verify all five examples render correctly in light and dark modes
• Range selection: Test date range selection to verify the data attributes apply correct styling
• Focus management: Test keyboard navigation between days to verify focus moves correctly

Recommended test plan:

1. Start the UI dev server and visually inspect all five calendar examples
2. Test p-calendar-5 (custom Select dropdown) - select different months and years, verify calendar updates
3. Test p-calendar-4 (native dropdown) - compare behavior with custom Select version
4. Test date range selection and verify visual styling of start/middle/end dates
5. Test keyboard navigation (arrow keys) to verify focus management

Notes

The component uses CSS custom properties for cell sizing and extends react-day-picker's default classNames. The dropdown navigation feature requires startMonth and endMonth props to define the selectable range. The p-calendar-5 example demonstrates how to replace the native select with a custom component using the components prop - this pattern can be used to integrate any design system dropdown.

Link to Devin run: https://app.devin.ai/sessions/8ad5b6dada474847b8231d120581c23d
Requested by: pasquale@cal.com

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
coss-com	Ready	Preview, Comment	Feb 11, 2026 0:12am
coss-com-ui	Ready	Preview, Comment	Feb 11, 2026 0:12am
coss-examples-calcom	Ready	Preview, Comment	Feb 11, 2026 0:12am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
coss-com-origin	Skipped		Feb 11, 2026 0:12am

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/ui/content/docs/components/calendar.mdx">

<violation number="1" location="apps/ui/content/docs/components/calendar.mdx:84">
P3: The default-size description now conflicts with the example values (text says 9/8, example shows 10/9). Keep the example consistent with the stated defaults or update the text to match.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[sean-brydon]

This PR looks scary but its just json again :D

This components/particals look amazing!