From 82d94eee385317eb2eb2fd24019a5312cf3c0a60 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Fri, 6 Jun 2025 20:09:53 +0400
Subject: [PATCH] feat: calendar v2 (#7551)

* feat(v4): upgrade calendar

* feat: more calendar examples

* fix: remove grid

* feat: more examples

* feat: more examples

* fix

* feat: update examples

* fix: dark mode

* fix: calendar in dark mode

* fix: examples

* fix

* docs: update calendar docs

* feat: update cmdk

* fix: block viewer patterns

* feat: update new-york and default

* fix: docs and examples

* fix: command menu

* feat: remove blocks from cmdk

* fix

* fix: calendar 13

* fix: format

* fix

* feat: update calendar default
---
 apps/v4/.prettierignore                       |   1 +
 .../sink/components/calendar-demo.tsx         | 259 ++++-
 .../sink/components/date-picker-demo.tsx      |  94 +-
 apps/v4/app/(view)/view/[name]/page.tsx       |   2 +-
 apps/v4/components/block-display.tsx          |  13 +-
 apps/v4/components/block-viewer.tsx           | 152 ++-
 apps/v4/components/command-menu.tsx           |  56 +-
 apps/v4/components/component-preview-tabs.tsx |   2 +-
 apps/v4/components/site-footer.tsx            |   9 +
 apps/v4/components/site-header.tsx            |   4 +-
 apps/v4/content/docs/(root)/changelog.mdx     |  10 +
 apps/v4/content/docs/components/calendar.mdx  | 335 +++++-
 .../content/docs/components/date-picker.mdx   |  53 +-
 apps/v4/hooks/use-mobile.ts                   |  17 +
 apps/v4/lib/blocks.ts                         |  30 +-
 apps/v4/package.json                          |   4 +-
 apps/v4/public/r/index.json                   |   2 +-
 .../public/r/styles/default/calendar-01.json  |  27 +
 .../public/r/styles/default/calendar-02.json  |  27 +
 .../public/r/styles/default/calendar-03.json  |  27 +
 .../public/r/styles/default/calendar-04.json  |  27 +
 .../public/r/styles/default/calendar-05.json  |  27 +
 .../public/r/styles/default/calendar-06.json  |  27 +
 .../public/r/styles/default/calendar-07.json  |  27 +
 .../public/r/styles/default/calendar-08.json  |  27 +
 .../public/r/styles/default/calendar-09.json  |  27 +
 .../public/r/styles/default/calendar-10.json  |  29 +
 .../public/r/styles/default/calendar-11.json  |  27 +
 .../public/r/styles/default/calendar-12.json  |  29 +
 .../public/r/styles/default/calendar-13.json  |  29 +
 .../public/r/styles/default/calendar-14.json  |  27 +
 .../public/r/styles/default/calendar-15.json  |  27 +
 .../public/r/styles/default/calendar-16.json  |  30 +
 .../public/r/styles/default/calendar-17.json  |  30 +
 .../public/r/styles/default/calendar-18.json  |  27 +
 .../public/r/styles/default/calendar-19.json  |  33 +
 .../public/r/styles/default/calendar-20.json  |  29 +
 .../public/r/styles/default/calendar-21.json  |  27 +
 .../public/r/styles/default/calendar-22.json  |  30 +
 .../public/r/styles/default/calendar-23.json  |  30 +
 .../public/r/styles/default/calendar-24.json  |  30 +
 .../public/r/styles/default/calendar-25.json  |  30 +
 .../public/r/styles/default/calendar-26.json  |  31 +
 .../public/r/styles/default/calendar-27.json  |  31 +
 .../public/r/styles/default/calendar-28.json  |  31 +
 .../public/r/styles/default/calendar-29.json  |  34 +
 .../public/r/styles/default/calendar-30.json  |  31 +
 .../public/r/styles/default/calendar-31.json  |  29 +
 .../public/r/styles/default/calendar-32.json  |  29 +
 apps/v4/public/r/styles/default/calendar.json |   4 +-
 .../r/styles/new-york-v4/accordion-demo.json  |   2 +-
 .../r/styles/new-york-v4/calendar-01.json     |  25 +
 .../r/styles/new-york-v4/calendar-02.json     |  25 +
 .../r/styles/new-york-v4/calendar-03.json     |  25 +
 .../r/styles/new-york-v4/calendar-04.json     |  25 +
 .../r/styles/new-york-v4/calendar-05.json     |  25 +
 .../r/styles/new-york-v4/calendar-06.json     |  25 +
 .../r/styles/new-york-v4/calendar-07.json     |  25 +
 .../r/styles/new-york-v4/calendar-08.json     |  25 +
 .../r/styles/new-york-v4/calendar-09.json     |  25 +
 .../r/styles/new-york-v4/calendar-10.json     |  27 +
 .../r/styles/new-york-v4/calendar-11.json     |  25 +
 .../r/styles/new-york-v4/calendar-12.json     |  27 +
 .../r/styles/new-york-v4/calendar-13.json     |  27 +
 .../r/styles/new-york-v4/calendar-14.json     |  25 +
 .../r/styles/new-york-v4/calendar-15.json     |  25 +
 .../r/styles/new-york-v4/calendar-16.json     |  28 +
 .../r/styles/new-york-v4/calendar-17.json     |  28 +
 .../r/styles/new-york-v4/calendar-18.json     |  25 +
 .../r/styles/new-york-v4/calendar-19.json     |  31 +
 .../r/styles/new-york-v4/calendar-20.json     |  27 +
 .../r/styles/new-york-v4/calendar-21.json     |  25 +
 .../r/styles/new-york-v4/calendar-22.json     |  28 +
 .../r/styles/new-york-v4/calendar-23.json     |  28 +
 .../r/styles/new-york-v4/calendar-24.json     |  28 +
 .../r/styles/new-york-v4/calendar-25.json     |  28 +
 .../r/styles/new-york-v4/calendar-26.json     |  29 +
 .../r/styles/new-york-v4/calendar-27.json     |  29 +
 .../r/styles/new-york-v4/calendar-28.json     |  29 +
 .../r/styles/new-york-v4/calendar-29.json     |  32 +
 .../r/styles/new-york-v4/calendar-30.json     |  29 +
 .../r/styles/new-york-v4/calendar-31.json     |  27 +
 .../r/styles/new-york-v4/calendar-32.json     |  27 +
 .../r/styles/new-york-v4/calendar-demo.json   |   2 +-
 .../r/styles/new-york-v4/calendar-form.json   |   2 +-
 .../r/styles/new-york-v4/calendar-hijri.json  |  25 +
 .../public/r/styles/new-york-v4/calendar.json |   4 +-
 .../styles/new-york-v4/date-picker-form.json  |   2 +-
 .../public/r/styles/new-york-v4/drawer.json   |   2 +-
 .../public/r/styles/new-york/calendar-01.json |  27 +
 .../public/r/styles/new-york/calendar-02.json |  27 +
 .../public/r/styles/new-york/calendar-03.json |  27 +
 .../public/r/styles/new-york/calendar-04.json |  27 +
 .../public/r/styles/new-york/calendar-05.json |  27 +
 .../public/r/styles/new-york/calendar-06.json |  27 +
 .../public/r/styles/new-york/calendar-07.json |  27 +
 .../public/r/styles/new-york/calendar-08.json |  27 +
 .../public/r/styles/new-york/calendar-09.json |  27 +
 .../public/r/styles/new-york/calendar-10.json |  29 +
 .../public/r/styles/new-york/calendar-11.json |  27 +
 .../public/r/styles/new-york/calendar-12.json |  29 +
 .../public/r/styles/new-york/calendar-13.json |  29 +
 .../public/r/styles/new-york/calendar-14.json |  27 +
 .../public/r/styles/new-york/calendar-15.json |  27 +
 .../public/r/styles/new-york/calendar-16.json |  30 +
 .../public/r/styles/new-york/calendar-17.json |  30 +
 .../public/r/styles/new-york/calendar-18.json |  27 +
 .../public/r/styles/new-york/calendar-19.json |  33 +
 .../public/r/styles/new-york/calendar-20.json |  29 +
 .../public/r/styles/new-york/calendar-21.json |  27 +
 .../public/r/styles/new-york/calendar-22.json |  30 +
 .../public/r/styles/new-york/calendar-23.json |  30 +
 .../public/r/styles/new-york/calendar-24.json |  30 +
 .../public/r/styles/new-york/calendar-25.json |  30 +
 .../public/r/styles/new-york/calendar-26.json |  31 +
 .../public/r/styles/new-york/calendar-27.json |  31 +
 .../public/r/styles/new-york/calendar-28.json |  31 +
 .../public/r/styles/new-york/calendar-29.json |  34 +
 .../public/r/styles/new-york/calendar-30.json |  31 +
 .../public/r/styles/new-york/calendar-31.json |  29 +
 .../public/r/styles/new-york/calendar-32.json |  29 +
 .../v4/public/r/styles/new-york/calendar.json |   4 +-
 apps/v4/registry.json                         | 820 ++++++++++++++-
 apps/v4/registry/__blocks__.json              | 272 +++++
 apps/v4/registry/__index__.tsx                | 594 +++++++++++
 .../new-york-v4/blocks/calendar-01.tsx        |  21 +
 .../new-york-v4/blocks/calendar-02.tsx        |  22 +
 .../new-york-v4/blocks/calendar-03.tsx        |  25 +
 .../new-york-v4/blocks/calendar-04.tsx        |  23 +
 .../new-york-v4/blocks/calendar-05.tsx        |  24 +
 .../new-york-v4/blocks/calendar-06.tsx        |  30 +
 .../new-york-v4/blocks/calendar-07.tsx        |  31 +
 .../new-york-v4/blocks/calendar-08.tsx        |  24 +
 .../new-york-v4/blocks/calendar-09.tsx        |  26 +
 .../new-york-v4/blocks/calendar-10.tsx        |  52 +
 .../new-york-v4/blocks/calendar-11.tsx        |  31 +
 .../new-york-v4/blocks/calendar-12.tsx        |  81 ++
 .../new-york-v4/blocks/calendar-13.tsx        |  62 ++
 .../new-york-v4/blocks/calendar-14.tsx        |  32 +
 .../new-york-v4/blocks/calendar-15.tsx        |  22 +
 .../new-york-v4/blocks/calendar-16.tsx        |  56 +
 .../new-york-v4/blocks/calendar-17.tsx        |  54 +
 .../new-york-v4/blocks/calendar-18.tsx        |  21 +
 .../new-york-v4/blocks/calendar-19.tsx        |  50 +
 .../new-york-v4/blocks/calendar-20.tsx        |  95 ++
 .../new-york-v4/blocks/calendar-21.tsx        |  42 +
 .../new-york-v4/blocks/calendar-22.tsx        |  49 +
 .../new-york-v4/blocks/calendar-23.tsx        |  50 +
 .../new-york-v4/blocks/calendar-24.tsx        |  64 ++
 .../new-york-v4/blocks/calendar-25.tsx        |  78 ++
 .../new-york-v4/blocks/calendar-26.tsx        | 133 +++
 .../new-york-v4/blocks/calendar-27.tsx        | 180 ++++
 .../new-york-v4/blocks/calendar-28.tsx        | 103 ++
 .../new-york-v4/blocks/calendar-29.tsx        |  96 ++
 .../new-york-v4/blocks/calendar-30.tsx        |  56 +
 .../new-york-v4/blocks/calendar-31.tsx        |  80 ++
 .../new-york-v4/blocks/calendar-32.tsx        |  60 ++
 .../new-york-v4/examples/calendar-demo.tsx    |  15 +-
 .../new-york-v4/examples/calendar-form.tsx    |   2 +-
 .../new-york-v4/examples/calendar-hijri.tsx   | 229 +++++
 .../new-york-v4/examples/date-picker-form.tsx |   2 +-
 apps/v4/registry/new-york-v4/ui/calendar.tsx  | 229 ++++-
 apps/v4/registry/new-york-v4/ui/drawer.tsx    |   5 +-
 apps/v4/registry/registry-blocks.ts           | 610 +++++++++++
 apps/v4/registry/registry-categories.ts       |  41 +-
 apps/v4/registry/registry-examples.ts         |  19 +
 apps/v4/registry/registry-ui.ts               |   2 +-
 apps/v4/scripts/build-registry.mts            |  20 +
 .../default/blocks/calendar-01.tsx            |  21 +
 .../default/blocks/calendar-02.tsx            |  22 +
 .../default/blocks/calendar-03.tsx            |  25 +
 .../default/blocks/calendar-04.tsx            |  23 +
 .../default/blocks/calendar-05.tsx            |  24 +
 .../default/blocks/calendar-06.tsx            |  30 +
 .../default/blocks/calendar-07.tsx            |  31 +
 .../default/blocks/calendar-08.tsx            |  24 +
 .../default/blocks/calendar-09.tsx            |  26 +
 .../default/blocks/calendar-10.tsx            |  50 +
 .../default/blocks/calendar-11.tsx            |  31 +
 .../default/blocks/calendar-12.tsx            |  78 ++
 .../default/blocks/calendar-13.tsx            |  58 ++
 .../default/blocks/calendar-14.tsx            |  32 +
 .../default/blocks/calendar-15.tsx            |  22 +
 .../default/blocks/calendar-16.tsx            |  56 +
 .../default/blocks/calendar-17.tsx            |  54 +
 .../default/blocks/calendar-18.tsx            |  21 +
 .../default/blocks/calendar-19.tsx            |  50 +
 .../default/blocks/calendar-20.tsx            |  97 ++
 .../default/blocks/calendar-21.tsx            |  42 +
 .../default/blocks/calendar-22.tsx            |  49 +
 .../default/blocks/calendar-23.tsx            |  50 +
 .../default/blocks/calendar-24.tsx            |  64 ++
 .../default/blocks/calendar-25.tsx            |  78 ++
 .../default/blocks/calendar-26.tsx            | 133 +++
 .../default/blocks/calendar-27.tsx            | 177 ++++
 .../default/blocks/calendar-28.tsx            | 104 ++
 .../default/blocks/calendar-29.tsx            |  96 ++
 .../default/blocks/calendar-30.tsx            |  56 +
 .../default/blocks/calendar-31.tsx            |  80 ++
 .../default/blocks/calendar-32.tsx            |  60 ++
 apps/www/__registry__/index.tsx               | 960 ++++++++++++++++++
 .../new-york/blocks/calendar-01.tsx           |  21 +
 .../new-york/blocks/calendar-02.tsx           |  22 +
 .../new-york/blocks/calendar-03.tsx           |  25 +
 .../new-york/blocks/calendar-04.tsx           |  23 +
 .../new-york/blocks/calendar-05.tsx           |  24 +
 .../new-york/blocks/calendar-06.tsx           |  30 +
 .../new-york/blocks/calendar-07.tsx           |  31 +
 .../new-york/blocks/calendar-08.tsx           |  24 +
 .../new-york/blocks/calendar-09.tsx           |  26 +
 .../new-york/blocks/calendar-10.tsx           |  50 +
 .../new-york/blocks/calendar-11.tsx           |  31 +
 .../new-york/blocks/calendar-12.tsx           |  78 ++
 .../new-york/blocks/calendar-13.tsx           |  58 ++
 .../new-york/blocks/calendar-14.tsx           |  32 +
 .../new-york/blocks/calendar-15.tsx           |  22 +
 .../new-york/blocks/calendar-16.tsx           |  56 +
 .../new-york/blocks/calendar-17.tsx           |  54 +
 .../new-york/blocks/calendar-18.tsx           |  21 +
 .../new-york/blocks/calendar-19.tsx           |  50 +
 .../new-york/blocks/calendar-20.tsx           |  97 ++
 .../new-york/blocks/calendar-21.tsx           |  42 +
 .../new-york/blocks/calendar-22.tsx           |  49 +
 .../new-york/blocks/calendar-23.tsx           |  50 +
 .../new-york/blocks/calendar-24.tsx           |  64 ++
 .../new-york/blocks/calendar-25.tsx           |  78 ++
 .../new-york/blocks/calendar-26.tsx           | 133 +++
 .../new-york/blocks/calendar-27.tsx           | 177 ++++
 .../new-york/blocks/calendar-28.tsx           | 104 ++
 .../new-york/blocks/calendar-29.tsx           |  96 ++
 .../new-york/blocks/calendar-30.tsx           |  56 +
 .../new-york/blocks/calendar-31.tsx           |  80 ++
 .../new-york/blocks/calendar-32.tsx           |  60 ++
 apps/www/package.json                         |   4 +-
 apps/www/public/r/index.json                  |   2 +-
 .../public/r/styles/default/calendar-01.json  |  27 +
 .../public/r/styles/default/calendar-02.json  |  27 +
 .../public/r/styles/default/calendar-03.json  |  27 +
 .../public/r/styles/default/calendar-04.json  |  27 +
 .../public/r/styles/default/calendar-05.json  |  27 +
 .../public/r/styles/default/calendar-06.json  |  27 +
 .../public/r/styles/default/calendar-07.json  |  27 +
 .../public/r/styles/default/calendar-08.json  |  27 +
 .../public/r/styles/default/calendar-09.json  |  27 +
 .../public/r/styles/default/calendar-10.json  |  29 +
 .../public/r/styles/default/calendar-11.json  |  27 +
 .../public/r/styles/default/calendar-12.json  |  29 +
 .../public/r/styles/default/calendar-13.json  |  29 +
 .../public/r/styles/default/calendar-14.json  |  27 +
 .../public/r/styles/default/calendar-15.json  |  27 +
 .../public/r/styles/default/calendar-16.json  |  30 +
 .../public/r/styles/default/calendar-17.json  |  30 +
 .../public/r/styles/default/calendar-18.json  |  27 +
 .../public/r/styles/default/calendar-19.json  |  33 +
 .../public/r/styles/default/calendar-20.json  |  29 +
 .../public/r/styles/default/calendar-21.json  |  27 +
 .../public/r/styles/default/calendar-22.json  |  30 +
 .../public/r/styles/default/calendar-23.json  |  30 +
 .../public/r/styles/default/calendar-24.json  |  30 +
 .../public/r/styles/default/calendar-25.json  |  30 +
 .../public/r/styles/default/calendar-26.json  |  31 +
 .../public/r/styles/default/calendar-27.json  |  31 +
 .../public/r/styles/default/calendar-28.json  |  31 +
 .../public/r/styles/default/calendar-29.json  |  34 +
 .../public/r/styles/default/calendar-30.json  |  31 +
 .../public/r/styles/default/calendar-31.json  |  29 +
 .../public/r/styles/default/calendar-32.json  |  29 +
 .../www/public/r/styles/default/calendar.json |   4 +-
 .../r/styles/new-york-v4/accordion-demo.json  |   2 +-
 .../r/styles/new-york-v4/calendar-01.json     |  25 +
 .../r/styles/new-york-v4/calendar-02.json     |  25 +
 .../r/styles/new-york-v4/calendar-03.json     |  25 +
 .../r/styles/new-york-v4/calendar-04.json     |  25 +
 .../r/styles/new-york-v4/calendar-05.json     |  25 +
 .../r/styles/new-york-v4/calendar-06.json     |  25 +
 .../r/styles/new-york-v4/calendar-07.json     |  25 +
 .../r/styles/new-york-v4/calendar-08.json     |  25 +
 .../r/styles/new-york-v4/calendar-09.json     |  25 +
 .../r/styles/new-york-v4/calendar-10.json     |  27 +
 .../r/styles/new-york-v4/calendar-11.json     |  25 +
 .../r/styles/new-york-v4/calendar-12.json     |  27 +
 .../r/styles/new-york-v4/calendar-13.json     |  27 +
 .../r/styles/new-york-v4/calendar-14.json     |  25 +
 .../r/styles/new-york-v4/calendar-15.json     |  25 +
 .../r/styles/new-york-v4/calendar-16.json     |  28 +
 .../r/styles/new-york-v4/calendar-17.json     |  28 +
 .../r/styles/new-york-v4/calendar-18.json     |  25 +
 .../r/styles/new-york-v4/calendar-19.json     |  31 +
 .../r/styles/new-york-v4/calendar-20.json     |  27 +
 .../r/styles/new-york-v4/calendar-21.json     |  25 +
 .../r/styles/new-york-v4/calendar-22.json     |  28 +
 .../r/styles/new-york-v4/calendar-23.json     |  28 +
 .../r/styles/new-york-v4/calendar-24.json     |  28 +
 .../r/styles/new-york-v4/calendar-25.json     |  28 +
 .../r/styles/new-york-v4/calendar-26.json     |  29 +
 .../r/styles/new-york-v4/calendar-27.json     |  29 +
 .../r/styles/new-york-v4/calendar-28.json     |  29 +
 .../r/styles/new-york-v4/calendar-29.json     |  32 +
 .../r/styles/new-york-v4/calendar-30.json     |  29 +
 .../r/styles/new-york-v4/calendar-31.json     |  27 +
 .../r/styles/new-york-v4/calendar-32.json     |  27 +
 .../r/styles/new-york-v4/calendar-demo.json   |   2 +-
 .../r/styles/new-york-v4/calendar-form.json   |   2 +-
 .../r/styles/new-york-v4/calendar-hijri.json  |  25 +
 .../public/r/styles/new-york-v4/calendar.json |   4 +-
 .../styles/new-york-v4/date-picker-form.json  |   2 +-
 .../public/r/styles/new-york-v4/drawer.json   |   2 +-
 .../public/r/styles/new-york/calendar-01.json |  27 +
 .../public/r/styles/new-york/calendar-02.json |  27 +
 .../public/r/styles/new-york/calendar-03.json |  27 +
 .../public/r/styles/new-york/calendar-04.json |  27 +
 .../public/r/styles/new-york/calendar-05.json |  27 +
 .../public/r/styles/new-york/calendar-06.json |  27 +
 .../public/r/styles/new-york/calendar-07.json |  27 +
 .../public/r/styles/new-york/calendar-08.json |  27 +
 .../public/r/styles/new-york/calendar-09.json |  27 +
 .../public/r/styles/new-york/calendar-10.json |  29 +
 .../public/r/styles/new-york/calendar-11.json |  27 +
 .../public/r/styles/new-york/calendar-12.json |  29 +
 .../public/r/styles/new-york/calendar-13.json |  29 +
 .../public/r/styles/new-york/calendar-14.json |  27 +
 .../public/r/styles/new-york/calendar-15.json |  27 +
 .../public/r/styles/new-york/calendar-16.json |  30 +
 .../public/r/styles/new-york/calendar-17.json |  30 +
 .../public/r/styles/new-york/calendar-18.json |  27 +
 .../public/r/styles/new-york/calendar-19.json |  33 +
 .../public/r/styles/new-york/calendar-20.json |  29 +
 .../public/r/styles/new-york/calendar-21.json |  27 +
 .../public/r/styles/new-york/calendar-22.json |  30 +
 .../public/r/styles/new-york/calendar-23.json |  30 +
 .../public/r/styles/new-york/calendar-24.json |  30 +
 .../public/r/styles/new-york/calendar-25.json |  30 +
 .../public/r/styles/new-york/calendar-26.json |  31 +
 .../public/r/styles/new-york/calendar-27.json |  31 +
 .../public/r/styles/new-york/calendar-28.json |  31 +
 .../public/r/styles/new-york/calendar-29.json |  34 +
 .../public/r/styles/new-york/calendar-30.json |  31 +
 .../public/r/styles/new-york/calendar-31.json |  29 +
 .../public/r/styles/new-york/calendar-32.json |  29 +
 .../public/r/styles/new-york/calendar.json    |   4 +-
 .../registry/default/blocks/calendar-01.tsx   |  21 +
 .../registry/default/blocks/calendar-02.tsx   |  22 +
 .../registry/default/blocks/calendar-03.tsx   |  25 +
 .../registry/default/blocks/calendar-04.tsx   |  23 +
 .../registry/default/blocks/calendar-05.tsx   |  24 +
 .../registry/default/blocks/calendar-06.tsx   |  30 +
 .../registry/default/blocks/calendar-07.tsx   |  31 +
 .../registry/default/blocks/calendar-08.tsx   |  24 +
 .../registry/default/blocks/calendar-09.tsx   |  26 +
 .../registry/default/blocks/calendar-10.tsx   |  50 +
 .../registry/default/blocks/calendar-11.tsx   |  31 +
 .../registry/default/blocks/calendar-12.tsx   |  78 ++
 .../registry/default/blocks/calendar-13.tsx   |  58 ++
 .../registry/default/blocks/calendar-14.tsx   |  32 +
 .../registry/default/blocks/calendar-15.tsx   |  22 +
 .../registry/default/blocks/calendar-16.tsx   |  56 +
 .../registry/default/blocks/calendar-17.tsx   |  54 +
 .../registry/default/blocks/calendar-18.tsx   |  21 +
 .../registry/default/blocks/calendar-19.tsx   |  50 +
 .../registry/default/blocks/calendar-20.tsx   |  97 ++
 .../registry/default/blocks/calendar-21.tsx   |  42 +
 .../registry/default/blocks/calendar-22.tsx   |  49 +
 .../registry/default/blocks/calendar-23.tsx   |  50 +
 .../registry/default/blocks/calendar-24.tsx   |  64 ++
 .../registry/default/blocks/calendar-25.tsx   |  78 ++
 .../registry/default/blocks/calendar-26.tsx   | 133 +++
 .../registry/default/blocks/calendar-27.tsx   | 177 ++++
 .../registry/default/blocks/calendar-28.tsx   | 104 ++
 .../registry/default/blocks/calendar-29.tsx   |  96 ++
 .../registry/default/blocks/calendar-30.tsx   |  56 +
 .../registry/default/blocks/calendar-31.tsx   |  80 ++
 .../registry/default/blocks/calendar-32.tsx   |  60 ++
 apps/www/registry/default/ui/calendar.tsx     | 226 ++++-
 .../registry/new-york/blocks/calendar-01.tsx  |  21 +
 .../registry/new-york/blocks/calendar-02.tsx  |  22 +
 .../registry/new-york/blocks/calendar-03.tsx  |  25 +
 .../registry/new-york/blocks/calendar-04.tsx  |  23 +
 .../registry/new-york/blocks/calendar-05.tsx  |  24 +
 .../registry/new-york/blocks/calendar-06.tsx  |  30 +
 .../registry/new-york/blocks/calendar-07.tsx  |  31 +
 .../registry/new-york/blocks/calendar-08.tsx  |  24 +
 .../registry/new-york/blocks/calendar-09.tsx  |  26 +
 .../registry/new-york/blocks/calendar-10.tsx  |  50 +
 .../registry/new-york/blocks/calendar-11.tsx  |  31 +
 .../registry/new-york/blocks/calendar-12.tsx  |  78 ++
 .../registry/new-york/blocks/calendar-13.tsx  |  58 ++
 .../registry/new-york/blocks/calendar-14.tsx  |  32 +
 .../registry/new-york/blocks/calendar-15.tsx  |  22 +
 .../registry/new-york/blocks/calendar-16.tsx  |  56 +
 .../registry/new-york/blocks/calendar-17.tsx  |  54 +
 .../registry/new-york/blocks/calendar-18.tsx  |  21 +
 .../registry/new-york/blocks/calendar-19.tsx  |  50 +
 .../registry/new-york/blocks/calendar-20.tsx  |  97 ++
 .../registry/new-york/blocks/calendar-21.tsx  |  42 +
 .../registry/new-york/blocks/calendar-22.tsx  |  49 +
 .../registry/new-york/blocks/calendar-23.tsx  |  50 +
 .../registry/new-york/blocks/calendar-24.tsx  |  64 ++
 .../registry/new-york/blocks/calendar-25.tsx  |  78 ++
 .../registry/new-york/blocks/calendar-26.tsx  | 133 +++
 .../registry/new-york/blocks/calendar-27.tsx  | 177 ++++
 .../registry/new-york/blocks/calendar-28.tsx  | 104 ++
 .../registry/new-york/blocks/calendar-29.tsx  |  96 ++
 .../registry/new-york/blocks/calendar-30.tsx  |  56 +
 .../registry/new-york/blocks/calendar-31.tsx  |  80 ++
 .../registry/new-york/blocks/calendar-32.tsx  |  60 ++
 apps/www/registry/new-york/ui/calendar.tsx    | 230 ++++-
 apps/www/registry/registry-blocks.ts          | 610 +++++++++++
 apps/www/registry/registry-categories.ts      |  10 +
 apps/www/registry/registry-ui.ts              |   2 +-
 pnpm-lock.yaml                                |  73 +-
 410 files changed, 20012 insertions(+), 341 deletions(-)
 create mode 100644 apps/v4/hooks/use-mobile.ts
 create mode 100644 apps/v4/public/r/styles/default/calendar-01.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-02.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-03.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-04.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-05.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-06.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-07.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-08.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-09.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-10.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-11.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-12.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-13.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-14.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-15.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-16.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-17.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-18.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-19.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-20.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-21.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-22.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-23.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-24.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-25.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-26.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-27.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-28.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-29.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-30.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-31.json
 create mode 100644 apps/v4/public/r/styles/default/calendar-32.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-01.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-02.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-03.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-04.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-05.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-06.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-07.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-08.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-09.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-10.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-11.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-12.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-13.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-14.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-15.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-16.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-17.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-18.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-19.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-20.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-21.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-22.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-23.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-24.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-25.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-26.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-27.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-28.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-29.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-30.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-31.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-32.json
 create mode 100644 apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-01.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-02.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-03.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-04.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-05.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-06.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-07.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-08.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-09.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-10.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-11.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-12.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-13.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-14.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-15.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-16.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-17.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-18.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-19.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-20.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-21.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-22.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-23.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-24.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-25.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-26.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-27.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-28.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-29.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-30.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-31.json
 create mode 100644 apps/v4/public/r/styles/new-york/calendar-32.json
 create mode 100644 apps/v4/registry/__blocks__.json
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-01.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-02.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-03.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-04.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-05.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-06.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-07.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-08.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-09.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-10.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-11.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-12.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-13.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-14.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-15.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-16.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-17.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-18.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-19.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-21.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-22.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-23.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-24.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-25.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-26.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-27.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-28.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-29.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-30.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-31.tsx
 create mode 100644 apps/v4/registry/new-york-v4/blocks/calendar-32.tsx
 create mode 100644 apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-01.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-02.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-03.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-04.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-05.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-06.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-07.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-08.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-09.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-10.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-11.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-12.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-13.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-14.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-15.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-16.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-17.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-18.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-19.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-20.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-21.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-22.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-23.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-24.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-25.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-26.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-27.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-28.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-29.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-30.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-31.tsx
 create mode 100644 apps/www/__registry__/default/blocks/calendar-32.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-01.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-02.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-03.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-04.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-05.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-06.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-07.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-08.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-09.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-10.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-11.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-12.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-13.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-14.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-15.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-16.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-17.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-18.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-19.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-20.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-21.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-22.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-23.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-24.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-25.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-26.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-27.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-28.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-29.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-30.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-31.tsx
 create mode 100644 apps/www/__registry__/new-york/blocks/calendar-32.tsx
 create mode 100644 apps/www/public/r/styles/default/calendar-01.json
 create mode 100644 apps/www/public/r/styles/default/calendar-02.json
 create mode 100644 apps/www/public/r/styles/default/calendar-03.json
 create mode 100644 apps/www/public/r/styles/default/calendar-04.json
 create mode 100644 apps/www/public/r/styles/default/calendar-05.json
 create mode 100644 apps/www/public/r/styles/default/calendar-06.json
 create mode 100644 apps/www/public/r/styles/default/calendar-07.json
 create mode 100644 apps/www/public/r/styles/default/calendar-08.json
 create mode 100644 apps/www/public/r/styles/default/calendar-09.json
 create mode 100644 apps/www/public/r/styles/default/calendar-10.json
 create mode 100644 apps/www/public/r/styles/default/calendar-11.json
 create mode 100644 apps/www/public/r/styles/default/calendar-12.json
 create mode 100644 apps/www/public/r/styles/default/calendar-13.json
 create mode 100644 apps/www/public/r/styles/default/calendar-14.json
 create mode 100644 apps/www/public/r/styles/default/calendar-15.json
 create mode 100644 apps/www/public/r/styles/default/calendar-16.json
 create mode 100644 apps/www/public/r/styles/default/calendar-17.json
 create mode 100644 apps/www/public/r/styles/default/calendar-18.json
 create mode 100644 apps/www/public/r/styles/default/calendar-19.json
 create mode 100644 apps/www/public/r/styles/default/calendar-20.json
 create mode 100644 apps/www/public/r/styles/default/calendar-21.json
 create mode 100644 apps/www/public/r/styles/default/calendar-22.json
 create mode 100644 apps/www/public/r/styles/default/calendar-23.json
 create mode 100644 apps/www/public/r/styles/default/calendar-24.json
 create mode 100644 apps/www/public/r/styles/default/calendar-25.json
 create mode 100644 apps/www/public/r/styles/default/calendar-26.json
 create mode 100644 apps/www/public/r/styles/default/calendar-27.json
 create mode 100644 apps/www/public/r/styles/default/calendar-28.json
 create mode 100644 apps/www/public/r/styles/default/calendar-29.json
 create mode 100644 apps/www/public/r/styles/default/calendar-30.json
 create mode 100644 apps/www/public/r/styles/default/calendar-31.json
 create mode 100644 apps/www/public/r/styles/default/calendar-32.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-01.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-02.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-03.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-04.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-05.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-06.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-07.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-08.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-09.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-10.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-11.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-12.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-13.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-14.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-15.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-16.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-17.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-18.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-19.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-20.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-21.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-22.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-23.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-24.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-25.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-26.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-27.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-28.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-29.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-30.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-31.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-32.json
 create mode 100644 apps/www/public/r/styles/new-york-v4/calendar-hijri.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-01.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-02.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-03.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-04.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-05.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-06.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-07.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-08.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-09.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-10.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-11.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-12.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-13.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-14.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-15.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-16.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-17.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-18.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-19.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-20.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-21.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-22.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-23.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-24.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-25.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-26.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-27.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-28.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-29.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-30.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-31.json
 create mode 100644 apps/www/public/r/styles/new-york/calendar-32.json
 create mode 100644 apps/www/registry/default/blocks/calendar-01.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-02.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-03.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-04.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-05.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-06.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-07.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-08.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-09.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-10.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-11.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-12.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-13.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-14.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-15.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-16.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-17.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-18.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-19.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-20.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-21.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-22.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-23.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-24.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-25.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-26.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-27.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-28.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-29.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-30.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-31.tsx
 create mode 100644 apps/www/registry/default/blocks/calendar-32.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-01.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-02.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-03.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-04.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-05.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-06.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-07.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-08.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-09.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-10.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-11.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-12.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-13.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-14.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-15.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-16.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-17.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-18.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-19.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-20.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-21.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-22.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-23.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-24.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-25.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-26.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-27.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-28.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-29.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-30.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-31.tsx
 create mode 100644 apps/www/registry/new-york/blocks/calendar-32.tsx

diff --git a/apps/v4/.prettierignore b/apps/v4/.prettierignore
index 21825d3542..1a1509ae77 100644
--- a/apps/v4/.prettierignore
+++ b/apps/v4/.prettierignore
@@ -4,3 +4,4 @@ node_modules
 build
 .contentlayer
 registry/__index__.tsx
+content/docs/components/calendar.mdx
diff --git a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
index 290d65176b..2cb1b3346c 100644
--- a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
@@ -2,29 +2,67 @@
 
 import * as React from "react"
 import { addDays } from "date-fns"
+import { Clock2Icon } from "lucide-react"
 import { type DateRange } from "react-day-picker"
+import { es } from "react-day-picker/locale"
 
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar, CalendarDayButton } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
 
 export function CalendarDemo() {
-  const [date, setDate] = React.useState<Date | undefined>(new Date())
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 0, 12),
-    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
-  })
-  const [range, setRange] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 0, 12),
-    to: addDays(new Date(new Date().getFullYear(), 0, 12), 50),
-  })
-
   return (
-    <div className="flex flex-col flex-wrap items-start gap-2 @md:flex-row">
+    <div className="bg-muted flex flex-1 flex-col flex-wrap justify-center gap-8 p-10 lg:flex-row">
+      <CalendarSingle />
+      <CalendarMultiple />
+      <CalendarRange />
+      <CalendarBookedDates />
+      <CalendarRangeMultipleMonths />
+      <CalendarWithTime />
+      <CalendarWithPresets />
+      <CalendarCustomDays />
+    </div>
+  )
+}
+
+function CalendarSingle() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Single Selection</div>
       <Calendar
         mode="single"
         selected={date}
         onSelect={setDate}
-        className="rounded-md border shadow-sm"
+        className="rounded-lg border shadow-sm"
+        captionLayout="dropdown"
       />
+    </div>
+  )
+}
+
+function CalendarMultiple() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Multiple Selection</div>
+      <Calendar mode="multiple" className="rounded-lg border shadow-sm" />
+    </div>
+  )
+}
+
+function CalendarRange() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 0, 12),
+    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Range Selection</div>
       <Calendar
         mode="range"
         defaultMonth={dateRange?.from}
@@ -32,16 +70,207 @@ export function CalendarDemo() {
         onSelect={setDateRange}
         numberOfMonths={2}
         disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
-        className="rounded-md border shadow-sm"
+        className="rounded-lg border shadow-sm"
       />
+    </div>
+  )
+}
+
+function CalendarRangeMultipleMonths() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 3, 12),
+    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Range Selection + Locale</div>
       <Calendar
         mode="range"
         defaultMonth={range?.from}
         selected={range}
         onSelect={setRange}
         numberOfMonths={3}
-        className="hidden rounded-md border shadow-sm @4xl:flex [&>div]:gap-5"
+        locale={es}
+        fixedWeeks
+        className="rounded-lg border shadow-sm"
       />
     </div>
   )
 }
+
+function CalendarBookedDates() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 3)
+  )
+  const bookedDates = Array.from(
+    { length: 15 },
+    (_, i) => new Date(new Date().getFullYear(), new Date().getMonth(), 12 + i)
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">With booked dates</div>
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        disabled={bookedDates}
+        modifiers={{
+          booked: bookedDates,
+        }}
+        modifiersClassNames={{
+          booked: "[&>button]:line-through opacity-100",
+        }}
+        className="rounded-lg border shadow-sm"
+      />
+    </div>
+  )
+}
+
+function CalendarWithTime() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">With Time Input</div>
+      <Card className="w-fit py-4">
+        <CardContent className="px-4">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            className="p-0"
+          />
+        </CardContent>
+        <CardFooter className="flex flex-col gap-3 border-t px-4 pt-4">
+          <div className="flex w-full flex-col gap-2">
+            <Label htmlFor="time-from">Start Time</Label>
+            <div className="relative flex w-full items-center gap-2">
+              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Input
+                id="time-from"
+                type="time"
+                step="1"
+                defaultValue="10:30:00"
+                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+            </div>
+          </div>
+          <div className="flex w-full flex-col gap-2">
+            <Label htmlFor="time-to">End Time</Label>
+            <div className="relative flex w-full items-center gap-2">
+              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Input
+                id="time-to"
+                type="time"
+                step="1"
+                defaultValue="12:30:00"
+                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+            </div>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+function CalendarCustomDays() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 11, 8),
+    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">
+        With Custom Days and Formatters
+      </div>
+      <Calendar
+        mode="range"
+        defaultMonth={range?.from}
+        selected={range}
+        onSelect={setRange}
+        numberOfMonths={1}
+        captionLayout="dropdown"
+        className="rounded-lg border shadow-sm [--cell-size:--spacing(12)]"
+        formatters={{
+          formatMonthDropdown: (date) => {
+            return date.toLocaleString("default", { month: "long" })
+          },
+        }}
+        components={{
+          DayButton: ({ children, modifiers, day, ...props }) => {
+            const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+            return (
+              <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+                {children}
+                {!modifiers.outside && (
+                  <span>{isWeekend ? "$120" : "$100"}</span>
+                )}
+              </CalendarDayButton>
+            )
+          },
+        }}
+      />
+    </div>
+  )
+}
+
+function CalendarWithPresets() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 12)
+  )
+  const [currentMonth, setCurrentMonth] = React.useState<Date>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 1)
+  )
+
+  return (
+    <div className="flex max-w-[300px] flex-col gap-3">
+      <div className="px-2 text-center text-sm">With Presets</div>
+      <Card className="w-fit py-4">
+        <CardContent className="px-4">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            month={currentMonth}
+            onMonthChange={setCurrentMonth}
+            fixedWeeks
+            className="p-0 [--cell-size:--spacing(9.5)]"
+          />
+        </CardContent>
+        <CardFooter className="flex flex-wrap gap-2 border-t px-4 pt-4">
+          {[
+            { label: "Today", value: 0 },
+            { label: "Tomorrow", value: 1 },
+            { label: "In 3 days", value: 3 },
+            { label: "In a week", value: 7 },
+            { label: "In 2 weeks", value: 14 },
+          ].map((preset) => (
+            <Button
+              key={preset.value}
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={() => {
+                const newDate = addDays(new Date(), preset.value)
+                setDate(newDate)
+                setCurrentMonth(
+                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+                )
+              }}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
index e2c92198a6..d0e55d6062 100644
--- a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
@@ -6,8 +6,17 @@ import { CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
 import {
   Popover,
   PopoverContent,
@@ -18,6 +27,7 @@ export function DatePickerDemo() {
   return (
     <div className="flex flex-col items-start gap-4 md:flex-row">
       <DatePickerSimple />
+      <DataPickerWithDropdowns />
       <DatePickerWithRange />
     </div>
   )
@@ -41,12 +51,7 @@ function DatePickerSimple() {
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
+        <Calendar mode="single" selected={date} onSelect={setDate} />
       </PopoverContent>
     </Popover>
   )
@@ -86,7 +91,6 @@ function DatePickerWithRange() {
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0" align="start">
         <Calendar
-          initialFocus
           mode="range"
           defaultMonth={date?.from}
           selected={date}
@@ -97,3 +101,79 @@ function DatePickerWithRange() {
     </Popover>
   )
 }
+
+function DataPickerWithDropdowns() {
+  const [date, setDate] = React.useState<Date>()
+  const [open, setOpen] = React.useState(false)
+  const isMobile = useIsMobile(450)
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "min-w-[200px] justify-start px-2 font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            {date ? format(date, "PPP") : <span>Pick a date</span>}
+            <CalendarIcon className="text-muted-foreground ml-auto" />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select a date</DrawerTitle>
+            <DrawerDescription>
+              Pick a date for your appointment.
+            </DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={(day) => {
+              setDate(day)
+              setOpen(false)
+            }}
+          />
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "min-w-[200px] justify-start px-2 font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+          <CalendarIcon className="text-muted-foreground ml-auto" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          captionLayout="dropdown"
+        />
+        <div className="flex gap-2 border-t p-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={() => setOpen(false)}
+          >
+            Done
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(view)/view/[name]/page.tsx b/apps/v4/app/(view)/view/[name]/page.tsx
index 065864d90a..61ebbf2920 100644
--- a/apps/v4/app/(view)/view/[name]/page.tsx
+++ b/apps/v4/app/(view)/view/[name]/page.tsx
@@ -34,7 +34,7 @@ export async function generateMetadata({
   const description = item.description
 
   return {
-    title: `${item.name}${item.description ? ` - ${item.description}` : ""}`,
+    title: item.description,
     description,
     openGraph: {
       title,
diff --git a/apps/v4/components/block-display.tsx b/apps/v4/components/block-display.tsx
index e3c62a69f7..34b223cd2c 100644
--- a/apps/v4/components/block-display.tsx
+++ b/apps/v4/components/block-display.tsx
@@ -7,7 +7,9 @@ import {
   createFileTreeForRegistryItemFiles,
   getRegistryItem,
 } from "@/lib/registry"
+import { cn } from "@/lib/utils"
 import { BlockViewer } from "@/components/block-viewer"
+import { ComponentPreview } from "@/components/component-preview"
 
 export async function BlockDisplay({ name }: { name: string }) {
   const item = await getCachedRegistryItem(name)
@@ -22,7 +24,16 @@ export async function BlockDisplay({ name }: { name: string }) {
   ])
 
   return (
-    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles} />
+    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles}>
+      <ComponentPreview
+        name={item.name}
+        hideCode
+        className={cn(
+          "my-0 **:[.preview]:h-auto **:[.preview]:p-4 **:[.preview>.p-6]:p-0",
+          item.meta?.containerClassName
+        )}
+      />
+    </BlockViewer>
   )
 }
 
diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx
index 0830bb5851..1507ed5de6 100644
--- a/apps/v4/components/block-viewer.tsx
+++ b/apps/v4/components/block-viewer.tsx
@@ -11,6 +11,7 @@ import {
   Folder,
   Fullscreen,
   Monitor,
+  RotateCw,
   Smartphone,
   Tablet,
   Terminal,
@@ -21,6 +22,7 @@ import { z } from "zod"
 
 import { trackEvent } from "@/lib/events"
 import { createFileTreeForRegistryItemFiles, FileTree } from "@/lib/registry"
+import { cn } from "@/lib/utils"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { getIconForLanguageExtension } from "@/components/icons"
 import { OpenInV0Button } from "@/components/open-in-v0-button"
@@ -66,6 +68,8 @@ type BlockViewerContext = {
         highlightedContent: string
       })[]
     | null
+  iframeKey?: number
+  setIframeKey?: React.Dispatch<React.SetStateAction<number>>
 }
 
 const BlockViewerContext = React.createContext<BlockViewerContext | null>(null)
@@ -91,6 +95,7 @@ function BlockViewerProvider({
     BlockViewerContext["activeFile"]
   >(highlightedFiles?.[0].target ?? null)
   const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+  const [iframeKey, setIframeKey] = React.useState(0)
 
   return (
     <BlockViewerContext.Provider
@@ -103,12 +108,14 @@ function BlockViewerProvider({
         setActiveFile,
         tree,
         highlightedFiles,
+        iframeKey,
+        setIframeKey,
       }}
     >
       <div
         id={item.name}
         data-view={view}
-        className="group/block-view-wrapper flex min-w-0 flex-col-reverse items-stretch gap-4 overflow-hidden md:flex-col"
+        className="group/block-view-wrapper flex min-w-0 scroll-mt-24 flex-col-reverse items-stretch gap-4 overflow-hidden md:flex-col"
         style={
           {
             "--height": item.meta?.iframeHeight ?? "930px",
@@ -122,30 +129,30 @@ function BlockViewerProvider({
 }
 
 function BlockViewerToolbar() {
-  const { setView, view, item, resizablePanelRef } = useBlockViewer()
+  const { setView, view, item, resizablePanelRef, setIframeKey } =
+    useBlockViewer()
   const { copyToClipboard, isCopied } = useCopyToClipboard()
 
   return (
-    <div className="flex w-full items-center gap-2 pl-2 md:pr-[14px]">
+    <div className="hidden w-full items-center gap-2 pl-2 md:pr-6 lg:flex">
       <Tabs
         value={view}
         onValueChange={(value) => setView(value as "preview" | "code")}
-        className="hidden lg:flex"
       >
         <TabsList className="grid h-8 grid-cols-2 items-center rounded-md p-1 *:data-[slot=tabs-trigger]:h-6 *:data-[slot=tabs-trigger]:rounded-sm *:data-[slot=tabs-trigger]:px-2 *:data-[slot=tabs-trigger]:text-xs">
           <TabsTrigger value="preview">Preview</TabsTrigger>
           <TabsTrigger value="code">Code</TabsTrigger>
         </TabsList>
       </Tabs>
-      <Separator orientation="vertical" className="mx-2 hidden !h-4 lg:flex" />
+      <Separator orientation="vertical" className="mx-2 !h-4" />
       <a
         href={`#${item.name}`}
         className="flex-1 text-center text-sm font-medium underline-offset-2 hover:underline md:flex-auto md:text-left"
       >
-        {item.description}
+        {item.description?.replace(/\.$/, "")}
       </a>
-      <div className="ml-auto hidden items-center gap-2 md:flex">
-        <div className="hidden h-8 items-center gap-1.5 rounded-md border p-1 shadow-none lg:flex">
+      <div className="ml-auto flex items-center gap-2">
+        <div className="h-8 items-center gap-1.5 rounded-md border p-1 shadow-none">
           <ToggleGroup
             type="single"
             defaultValue="100"
@@ -179,15 +186,27 @@ function BlockViewerToolbar() {
                 <Fullscreen />
               </Link>
             </Button>
+            <Separator orientation="vertical" className="!h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              className="size-6 rounded-sm p-0"
+              title="Refresh Preview"
+              onClick={() => {
+                if (setIframeKey) {
+                  setIframeKey((k) => k + 1)
+                }
+              }}
+            >
+              <RotateCw />
+              <span className="sr-only">Refresh Preview</span>
+            </Button>
           </ToggleGroup>
         </div>
-        <Separator
-          orientation="vertical"
-          className="mx-1 hidden !h-4 lg:flex"
-        />
+        <Separator orientation="vertical" className="mx-1 !h-4" />
         <Button
           variant="outline"
-          className="hidden w-fit gap-1 px-2 shadow-none md:flex"
+          className="w-fit gap-1 px-2 shadow-none"
           size="sm"
           onClick={() => {
             copyToClipboard(`npx shadcn@latest add ${item.name}`)
@@ -196,50 +215,48 @@ function BlockViewerToolbar() {
           {isCopied ? <Check /> : <Terminal />}
           <span>npx shadcn add {item.name}</span>
         </Button>
-        <Separator
-          orientation="vertical"
-          className="mx-1 hidden !h-4 xl:flex"
-        />
+        <Separator orientation="vertical" className="mx-1 !h-4" />
         <OpenInV0Button name={item.name} />
       </div>
     </div>
   )
 }
 
-function BlockViewerView() {
-  const { item, resizablePanelRef } = useBlockViewer()
+function BlockViewerIframe({ className }: { className?: string }) {
+  const { item, iframeKey } = useBlockViewer()
 
   return (
-    <div className="group-data-[view=code]/block-view-wrapper:hidden md:h-[calc(var(--height)+10px)]">
-      <div className="grid w-full gap-4">
-        <ResizablePanelGroup direction="horizontal" className="relative z-10">
+    <iframe
+      key={iframeKey}
+      src={`/view/${item.name}`}
+      height={item.meta?.iframeHeight ?? 930}
+      loading="lazy"
+      className={cn(
+        "bg-background no-scrollbar relative z-20 w-full",
+        className
+      )}
+    />
+  )
+}
+
+function BlockViewerView() {
+  const { resizablePanelRef } = useBlockViewer()
+
+  return (
+    <div className="hidden group-data-[view=code]/block-view-wrapper:hidden md:h-(--height) lg:flex">
+      <div className="relative grid w-full gap-4">
+        <div className="absolute inset-0 right-4 [background-image:radial-gradient(#d4d4d4_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]"></div>
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="after:bg-surface/50 relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl"
+        >
           <ResizablePanel
             ref={resizablePanelRef}
             className="bg-background relative aspect-[4/2.5] overflow-hidden rounded-lg border md:aspect-auto md:rounded-xl"
             defaultSize={100}
             minSize={30}
           >
-            <Image
-              src={`/r/styles/new-york-v4/${item.name}-light.png`}
-              alt={item.name}
-              data-block={item.name}
-              width={1440}
-              height={900}
-              className="object-cover md:hidden dark:hidden md:dark:hidden"
-            />
-            <Image
-              src={`/r/styles/new-york-v4/${item.name}-dark.png`}
-              alt={item.name}
-              data-block={item.name}
-              width={1440}
-              height={900}
-              className="hidden object-cover md:hidden dark:block md:dark:hidden"
-            />
-            <iframe
-              src={`/view/${item.name}`}
-              height={item.meta?.iframeHeight ?? 930}
-              className="bg-background no-scrollbar relative z-20 hidden w-full md:block"
-            />
+            <BlockViewerIframe />
           </ResizablePanel>
           <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
           <ResizablePanel defaultSize={0} minSize={0} />
@@ -249,6 +266,45 @@ function BlockViewerView() {
   )
 }
 
+function BlockViewerMobile({ children }: { children: React.ReactNode }) {
+  const { item } = useBlockViewer()
+
+  return (
+    <div className="flex flex-col gap-2 lg:hidden">
+      <div className="flex items-center gap-2 px-2">
+        <div className="line-clamp-1 text-sm font-medium">
+          {item.description}
+        </div>
+        <div className="text-muted-foreground ml-auto shrink-0 font-mono text-xs">
+          {item.name}
+        </div>
+      </div>
+      {item.meta?.mobile === "component" ? (
+        children
+      ) : (
+        <div className="overflow-hidden rounded-xl border">
+          <Image
+            src={`/r/styles/new-york-v4/${item.name}-light.png`}
+            alt={item.name}
+            data-block={item.name}
+            width={1440}
+            height={900}
+            className="object-cover dark:hidden"
+          />
+          <Image
+            src={`/r/styles/new-york-v4/${item.name}-dark.png`}
+            alt={item.name}
+            data-block={item.name}
+            width={1440}
+            height={900}
+            className="hidden object-cover dark:block"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
 function BlockViewerCode() {
   const { activeFile, highlightedFiles } = useBlockViewer()
 
@@ -269,7 +325,7 @@ function BlockViewerCode() {
       </div>
       <figure
         data-rehype-pretty-code-figure=""
-        className="mt-0 flex min-w-0 flex-1 flex-col rounded-xl border-none"
+        className="!mx-0 mt-0 flex min-w-0 flex-1 flex-col rounded-xl border-none"
       >
         <figcaption
           className="text-code-foreground [&_svg]:text-code-foreground flex h-12 shrink-0 items-center gap-2 border-b px-4 py-2 [&_svg]:size-4 [&_svg]:opacity-70"
@@ -299,7 +355,7 @@ export function BlockViewerFileTree() {
   }
 
   return (
-    <SidebarProvider className="flex !min-h-full flex-col">
+    <SidebarProvider className="flex !min-h-full flex-col border-r">
       <Sidebar collapsible="none" className="w-full flex-1">
         <SidebarGroupLabel className="h-12 rounded-none border-b px-4 text-sm">
           Files
@@ -414,8 +470,11 @@ function BlockViewer({
   item,
   tree,
   highlightedFiles,
+  children,
   ...props
-}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles">) {
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
+  children: React.ReactNode
+}) {
   return (
     <BlockViewerProvider
       item={item}
@@ -426,6 +485,7 @@ function BlockViewer({
       <BlockViewerToolbar />
       <BlockViewerView />
       <BlockViewerCode />
+      <BlockViewerMobile>{children}</BlockViewerMobile>
     </BlockViewerProvider>
   )
 }
diff --git a/apps/v4/components/command-menu.tsx b/apps/v4/components/command-menu.tsx
index a5b5080d35..b76588910d 100644
--- a/apps/v4/components/command-menu.tsx
+++ b/apps/v4/components/command-menu.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { useRouter } from "next/navigation"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { IconArrowRight } from "@tabler/icons-react"
-import { CornerDownLeftIcon } from "lucide-react"
+import { CornerDownLeftIcon, SquareDashedIcon } from "lucide-react"
 
 import { type Color, type ColorPalette } from "@/lib/colors"
 import { source } from "@/lib/source"
@@ -35,17 +35,19 @@ import { Separator } from "@/registry/new-york-v4/ui/separator"
 export function CommandMenu({
   tree,
   colors,
+  blocks,
   ...props
 }: DialogProps & {
   tree: typeof source.pageTree
   colors: ColorPalette[]
+  blocks?: { name: string; description: string; categories: string[] }[]
 }) {
   const router = useRouter()
   const isMac = useIsMac()
   const [config] = useConfig()
   const [open, setOpen] = React.useState(false)
   const [selectedType, setSelectedType] = React.useState<
-    "color" | "page" | "component" | null
+    "color" | "page" | "component" | "block" | null
   >(null)
   const [copyPayload, setCopyPayload] = React.useState("")
   const packageManager = config.packageManager || "pnpm"
@@ -74,6 +76,14 @@ export function CommandMenu({
     [setSelectedType, setCopyPayload]
   )
 
+  const handleBlockHighlight = React.useCallback(
+    (block: { name: string; description: string; categories: string[] }) => {
+      setSelectedType("block")
+      setCopyPayload(`${packageManager} dlx shadcn@latest add ${block.name}`)
+    },
+    [setSelectedType, setCopyPayload, packageManager]
+  )
+
   const runCommand = React.useCallback((command: () => unknown) => {
     setOpen(false)
     command()
@@ -104,6 +114,13 @@ export function CommandMenu({
             })
           }
 
+          if (selectedType === "block") {
+            copyToClipboardWithMeta(copyPayload, {
+              name: "copy_npm_command",
+              properties: { command: copyPayload, pm: packageManager },
+            })
+          }
+
           if (selectedType === "page" || selectedType === "component") {
             copyToClipboardWithMeta(copyPayload, {
               name: "copy_npm_command",
@@ -227,6 +244,41 @@ export function CommandMenu({
                 ))}
               </CommandGroup>
             ))}
+            {blocks?.length ? (
+              <CommandGroup
+                heading="Blocks"
+                className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+              >
+                {blocks.map((block) => (
+                  <CommandMenuItem
+                    key={block.name}
+                    value={block.name}
+                    onHighlight={() => {
+                      handleBlockHighlight(block)
+                    }}
+                    keywords={[
+                      "block",
+                      block.name,
+                      block.description,
+                      ...block.categories,
+                    ]}
+                    onSelect={() => {
+                      runCommand(() =>
+                        router.push(
+                          `/blocks/${block.categories[0]}#${block.name}`
+                        )
+                      )
+                    }}
+                  >
+                    <SquareDashedIcon />
+                    {block.description}
+                    <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+                      {block.name}
+                    </span>
+                  </CommandMenuItem>
+                ))}
+              </CommandGroup>
+            ) : null}
           </CommandList>
         </Command>
         <div className="text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800">
diff --git a/apps/v4/components/component-preview-tabs.tsx b/apps/v4/components/component-preview-tabs.tsx
index 00cd77cf65..ce81f47aa6 100644
--- a/apps/v4/components/component-preview-tabs.tsx
+++ b/apps/v4/components/component-preview-tabs.tsx
@@ -22,7 +22,7 @@ export function ComponentPreviewTabs({
 
   return (
     <div
-      className={cn("group relative my-4 flex flex-col gap-2", className)}
+      className={cn("group relative mt-4 mb-12 flex flex-col gap-2", className)}
       {...props}
     >
       <Tabs
diff --git a/apps/v4/components/site-footer.tsx b/apps/v4/components/site-footer.tsx
index 1d296522c0..e80f470f68 100644
--- a/apps/v4/components/site-footer.tsx
+++ b/apps/v4/components/site-footer.tsx
@@ -14,6 +14,15 @@ export function SiteFooter() {
               className="font-medium underline underline-offset-4"
             >
               shadcn
+            </a>{" "}
+            at{" "}
+            <a
+              href="https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              Vercel
             </a>
             . The source code is available on{" "}
             <a
diff --git a/apps/v4/components/site-header.tsx b/apps/v4/components/site-header.tsx
index 209e58e50e..5099b8afe5 100644
--- a/apps/v4/components/site-header.tsx
+++ b/apps/v4/components/site-header.tsx
@@ -9,11 +9,11 @@ import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
 import { MobileNav } from "@/components/mobile-nav"
 import { ModeSwitcher } from "@/components/mode-switcher"
+import { SiteConfig } from "@/components/site-config"
+// import blocks from "@/registry/__blocks__.json"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 
-import { SiteConfig } from "./site-config"
-
 export function SiteHeader() {
   const colors = getColors()
   const pageTree = source.pageTree
diff --git a/apps/v4/content/docs/(root)/changelog.mdx b/apps/v4/content/docs/(root)/changelog.mdx
index c89a648634..a9e3c4c3b9 100644
--- a/apps/v4/content/docs/(root)/changelog.mdx
+++ b/apps/v4/content/docs/(root)/changelog.mdx
@@ -4,6 +4,16 @@ description: Latest updates and announcements.
 toc: false
 ---
 
+## June 2025 - Calendar Component
+
+We've upgraded the `Calendar` component to the latest version of [React DayPicker](https://daypicker.dev).
+
+This is a major upgrade and includes a lot of new features and improvements. We've also built a collection of 30+ calendar blocks that you can use to build your own calendar components.
+
+See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
+
+To upgrade your project to the latest version of the `Calendar` component, see the [upgrade guide](/docs/components/calendar#upgrade-guide).
+
 ## May 2025 - New Site
 
 We've upgraded [ui.shadcn.com](https://ui.shadcn.com) to Next.js 15.3 and Tailwind v4. The site now uses the upgraded `new-york` components.
diff --git a/apps/v4/content/docs/components/calendar.mdx b/apps/v4/content/docs/components/calendar.mdx
index a3557c33f1..8b109644f3 100644
--- a/apps/v4/content/docs/components/calendar.mdx
+++ b/apps/v4/content/docs/components/calendar.mdx
@@ -12,9 +12,11 @@ links:
   description="A calendar showing the current date."
 />
 
-## About
+## Blocks
 
-The `Calendar` component is built on top of [React DayPicker](https://react-day-picker.js.org).
+We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.
+
+See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
 
 ## Installation
 
@@ -72,19 +74,346 @@ return (
     mode="single"
     selected={date}
     onSelect={setDate}
-    className="rounded-md border"
+    className="rounded-lg border"
   />
 )
 ```
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
+## About
+
+The `Calendar` component is built on top of [React DayPicker](https://react-day-picker.js.org).
+
+## Customization
+
+See the [React DayPicker](https://react-day-picker.js.org/docs/customization) documentation for more information on how to customize the `Calendar` component.
+
 ## Date Picker
 
 You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
 
+## Persian / Hijri / Jalali Calendar
+
+To use the Persian calendar, edit `components/ui/calendar.tsx` and replace `react-day-picker` with `react-day-picker/persian`.
+
+```diff
+- import { DayPicker } from "react-day-picker"
++ import { DayPicker } from "react-day-picker/persian"
+```
+
+<ComponentPreview
+  name="calendar-hijri"
+  title="Persian / Hijri / Jalali Calendar"
+  description="A Persian calendar."
+/>
+
 ## Examples
 
+### Range Calendar
+
+<ComponentPreview
+  name="calendar-02"
+  title="Range Calendar"
+  description="A calendar showing the current date and range selection."
+  className="**:[.preview]:h-auto lg:**:[.preview]:h-[450px]"
+/>
+
+### Month and Year Selector
+
+<ComponentPreview
+  name="calendar-13"
+  title="Month and Year Selector"
+  description="A calendar with month and year dropdowns."
+/>
+
+### Date of Birth Picker
+
+<ComponentPreview
+  name="calendar-22"
+  title="Date of Birth Picker"
+  description="A calendar with date of birth picker."
+/>
+
+### Date and Time Picker
+
+<ComponentPreview
+  name="calendar-24"
+  title="Date and Time Picker"
+  description="A calendar with date and time picker."
+/>
+
+### Natural Language Picker
+
+This component uses the `chrono-node` library to parse natural language dates.
+
+<ComponentPreview
+  name="calendar-29"
+  title="Natural Language Picker"
+  description="A calendar with natural language picker."
+/>
+
 ### Form
 
 <ComponentPreview name="calendar-form" />
+
+## Upgrade Guide
+
+### Tailwind v4
+
+If you're already using Tailwind v4, you can upgrade to the latest version of the `Calendar` component by running the following command:
+
+```bash
+npx shadcn@latest add calendar
+```
+
+When you're prompted to overwrite the existing `Calendar` component, select `Yes`. **If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
+
+This will update the `Calendar` component and `react-day-picker` to the latest version.
+
+Next, follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your existing components to the latest version.
+
+#### Installing Blocks
+
+After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
+
+```bash
+npx shadcn@latest add calendar-02
+```
+
+This will install the latest version of the calendar blocks.
+
+### Tailwind v3
+
+If you're using Tailwind v3, you can upgrade to the latest version of the `Calendar` by copying the following code to your `calendar.tsx` file.
+
+<CodeCollapsibleWrapper>
+
+```tsx showLineNumbers title="components/ui/calendar.tsx"
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
+```
+
+</CodeCollapsibleWrapper>
+
+**If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
+
+Then follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your dependencies and existing components to the latest version.
+
+#### Installing Blocks
+
+After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
+
+```bash
+npx shadcn@latest add calendar-02
+```
+
+This will install the latest version of the calendar blocks.
diff --git a/apps/v4/content/docs/components/date-picker.mdx b/apps/v4/content/docs/components/date-picker.mdx
index af19922891..f94ca0a014 100644
--- a/apps/v4/content/docs/components/date-picker.mdx
+++ b/apps/v4/content/docs/components/date-picker.mdx
@@ -5,8 +5,9 @@ component: true
 ---
 
 <ComponentPreview
-  name="date-picker-demo"
-  description="A date picker in a popover"
+  name="calendar-22"
+  title="Date of Birth Picker"
+  description="A calendar with date of birth picker."
 />
 
 ## Installation
@@ -40,23 +41,16 @@ export function DatePickerDemo() {
     <Popover>
       <PopoverTrigger asChild>
         <Button
-          variant={"outline"}
-          className={cn(
-            "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
+          variant="outline"
+          data-empty={!date}
+          className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
+          <CalendarIcon />
           {date ? format(date, "PPP") : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
+        <Calendar mode="single" selected={date} onSelect={setDate} />
       </PopoverContent>
     </Popover>
   )
@@ -67,25 +61,38 @@ See the [React DayPicker](https://react-day-picker.js.org) documentation for mor
 
 ## Examples
 
-### Date Picker
+### Date of Birth Picker
 
 <ComponentPreview
-  name="date-picker-demo"
-  description="A date picker in a popover"
+  name="calendar-22"
+  title="Date of Birth Picker"
+  description="A calendar with date of birth picker."
 />
 
-### Date Range Picker
+### Picker with Input
 
 <ComponentPreview
-  name="date-picker-with-range"
-  description="A date range picker"
+  name="calendar-28"
+  title="Picker with Input"
+  description="A calendar with input and picker."
 />
 
-### With Presets
+### Date and Time Picker
 
 <ComponentPreview
-  name="date-picker-with-presets"
-  description="A date picker with presets"
+  name="calendar-24"
+  title="Date and Time Picker"
+  description="A calendar with date and time picker."
+/>
+
+### Natural Language Picker
+
+This component uses the `chrono-node` library to parse natural language dates.
+
+<ComponentPreview
+  name="calendar-29"
+  title="Natural Language Picker"
+  description="A calendar with natural language picker."
 />
 
 ### Form
diff --git a/apps/v4/hooks/use-mobile.ts b/apps/v4/hooks/use-mobile.ts
new file mode 100644
index 0000000000..519c959355
--- /dev/null
+++ b/apps/v4/hooks/use-mobile.ts
@@ -0,0 +1,17 @@
+import * as React from "react"
+
+export function useIsMobile(mobileBreakpoint = 768) {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < mobileBreakpoint)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/v4/lib/blocks.ts b/apps/v4/lib/blocks.ts
index 2a61f2b6db..81d01d7fa3 100644
--- a/apps/v4/lib/blocks.ts
+++ b/apps/v4/lib/blocks.ts
@@ -10,18 +10,26 @@ export async function getAllBlockIds(
   ],
   categories: string[] = []
 ): Promise<string[]> {
+  const blocks = await getAllBlocks(types, categories)
+
+  return blocks.map((block) => block.name)
+}
+
+export async function getAllBlocks(
+  types: z.infer<typeof registryItemSchema>["type"][] = [
+    "registry:block",
+    "registry:internal",
+  ],
+  categories: string[] = []
+) {
   const { Index } = await import("@/registry/__index__")
   const index = z.record(registryItemSchema).parse(Index)
 
-  return Object.values(index)
-    .filter(
-      (block) =>
-        types.includes(block.type) &&
-        (categories.length === 0 ||
-          block.categories?.some((category) =>
-            categories.includes(category)
-          )) &&
-        !block.name.startsWith("chart-")
-    )
-    .map((block) => block.name)
+  return Object.values(index).filter(
+    (block) =>
+      types.includes(block.type) &&
+      (categories.length === 0 ||
+        block.categories?.some((category) => categories.includes(category))) &&
+      !block.name.startsWith("chart-")
+  )
 }
diff --git a/apps/v4/package.json b/apps/v4/package.json
index 27fd91b973..f0fef47910 100644
--- a/apps/v4/package.json
+++ b/apps/v4/package.json
@@ -58,6 +58,7 @@
     "@tanstack/react-table": "^8.9.1",
     "@vercel/analytics": "^1.4.1",
     "change-case": "^5.4.4",
+    "chrono-node": "^2.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -70,6 +71,7 @@
     "fumadocs-ui": "^15.3.1",
     "input-otp": "^1.4.2",
     "jotai": "^2.1.0",
+    "little-date": "^1.0.0",
     "lodash": "^4.17.21",
     "lucide-react": "0.474.0",
     "motion": "^12.12.1",
@@ -77,7 +79,7 @@
     "next-themes": "0.4.6",
     "postcss": "^8.5.1",
     "react": "19.1.0",
-    "react-day-picker": "^8.7.1",
+    "react-day-picker": "^9.7.0",
     "react-dom": "19.1.0",
     "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^2.1.7",
diff --git a/apps/v4/public/r/index.json b/apps/v4/public/r/index.json
index 8dbe1aecc2..178a1a7463 100644
--- a/apps/v4/public/r/index.json
+++ b/apps/v4/public/r/index.json
@@ -137,7 +137,7 @@
     "name": "calendar",
     "type": "registry:ui",
     "dependencies": [
-      "react-day-picker@8.10.1",
+      "react-day-picker@latest",
       "date-fns"
     ],
     "registryDependencies": [
diff --git a/apps/v4/public/r/styles/default/calendar-01.json b/apps/v4/public/r/styles/default/calendar-01.json
new file mode 100644
index 0000000000..5055c73cee
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-02.json b/apps/v4/public/r/styles/default/calendar-02.json
new file mode 100644
index 0000000000..fe9bf781ce
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-03.json b/apps/v4/public/r/styles/default/calendar-03.json
new file mode 100644
index 0000000000..722062cf86
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-04.json b/apps/v4/public/r/styles/default/calendar-04.json
new file mode 100644
index 0000000000..4a238ea4a3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-05.json b/apps/v4/public/r/styles/default/calendar-05.json
new file mode 100644
index 0000000000..70aecb22a7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-06.json b/apps/v4/public/r/styles/default/calendar-06.json
new file mode 100644
index 0000000000..a6486cb573
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-07.json b/apps/v4/public/r/styles/default/calendar-07.json
new file mode 100644
index 0000000000..e8558053ba
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-08.json b/apps/v4/public/r/styles/default/calendar-08.json
new file mode 100644
index 0000000000..c4f47ebea3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-09.json b/apps/v4/public/r/styles/default/calendar-09.json
new file mode 100644
index 0000000000..109eb92cbe
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-10.json b/apps/v4/public/r/styles/default/calendar-10.json
new file mode 100644
index 0000000000..1851e7ead5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-11.json b/apps/v4/public/r/styles/default/calendar-11.json
new file mode 100644
index 0000000000..5807637528
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-12.json b/apps/v4/public/r/styles/default/calendar-12.json
new file mode 100644
index 0000000000..4b4034cb7f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-13.json b/apps/v4/public/r/styles/default/calendar-13.json
new file mode 100644
index 0000000000..f772b672f4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-14.json b/apps/v4/public/r/styles/default/calendar-14.json
new file mode 100644
index 0000000000..132c490637
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-15.json b/apps/v4/public/r/styles/default/calendar-15.json
new file mode 100644
index 0000000000..aaf941d647
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-16.json b/apps/v4/public/r/styles/default/calendar-16.json
new file mode 100644
index 0000000000..19c92ec665
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-17.json b/apps/v4/public/r/styles/default/calendar-17.json
new file mode 100644
index 0000000000..9fee2d25b3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-18.json b/apps/v4/public/r/styles/default/calendar-18.json
new file mode 100644
index 0000000000..c9fa9d20c1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-19.json b/apps/v4/public/r/styles/default/calendar-19.json
new file mode 100644
index 0000000000..197ccf33f7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-20.json b/apps/v4/public/r/styles/default/calendar-20.json
new file mode 100644
index 0000000000..280a23e319
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-21.json b/apps/v4/public/r/styles/default/calendar-21.json
new file mode 100644
index 0000000000..e75290eea6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-22.json b/apps/v4/public/r/styles/default/calendar-22.json
new file mode 100644
index 0000000000..8a83ac97d9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-23.json b/apps/v4/public/r/styles/default/calendar-23.json
new file mode 100644
index 0000000000..a87121360e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-24.json b/apps/v4/public/r/styles/default/calendar-24.json
new file mode 100644
index 0000000000..994c70a211
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-25.json b/apps/v4/public/r/styles/default/calendar-25.json
new file mode 100644
index 0000000000..7b7ccd9a1e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-26.json b/apps/v4/public/r/styles/default/calendar-26.json
new file mode 100644
index 0000000000..c3a2ec7784
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-27.json b/apps/v4/public/r/styles/default/calendar-27.json
new file mode 100644
index 0000000000..be7ad4f592
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-28.json b/apps/v4/public/r/styles/default/calendar-28.json
new file mode 100644
index 0000000000..2d0bf94cc9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-29.json b/apps/v4/public/r/styles/default/calendar-29.json
new file mode 100644
index 0000000000..1d81663cdc
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-30.json b/apps/v4/public/r/styles/default/calendar-30.json
new file mode 100644
index 0000000000..4297f6e8fe
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-31.json b/apps/v4/public/r/styles/default/calendar-31.json
new file mode 100644
index 0000000000..34b2aecb5c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-32.json b/apps/v4/public/r/styles/default/calendar-32.json
new file mode 100644
index 0000000000..f0a8ca3703
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar.json b/apps/v4/public/r/styles/default/calendar.json
index ac931a83dc..568af25965 100644
--- a/apps/v4/public/r/styles/default/calendar.json
+++ b/apps/v4/public/r/styles/default/calendar.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/v4/public/r/styles/new-york-v4/accordion-demo.json b/apps/v4/public/r/styles/new-york-v4/accordion-demo.json
index 274a9d14b5..606f111270 100644
--- a/apps/v4/public/r/styles/new-york-v4/accordion-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/accordion-demo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/accordion-demo.tsx",
-      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york-v4/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york-v4/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"w-full\"\n      defaultValue=\"item-1\"\n    >\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-01.json b/apps/v4/public/r/styles/new-york-v4/calendar-01.json
new file mode 100644
index 0000000000..ae26b270f1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-01.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-02.json b/apps/v4/public/r/styles/new-york-v4/calendar-02.json
new file mode 100644
index 0000000000..1de8d714ed
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-02.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-03.json b/apps/v4/public/r/styles/new-york-v4/calendar-03.json
new file mode 100644
index 0000000000..6777fdaf50
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-03.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-04.json b/apps/v4/public/r/styles/new-york-v4/calendar-04.json
new file mode 100644
index 0000000000..ae12a61461
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-04.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-05.json b/apps/v4/public/r/styles/new-york-v4/calendar-05.json
new file mode 100644
index 0000000000..d64891b0f7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-05.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-06.json b/apps/v4/public/r/styles/new-york-v4/calendar-06.json
new file mode 100644
index 0000000000..0826945ec3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-06.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-07.json b/apps/v4/public/r/styles/new-york-v4/calendar-07.json
new file mode 100644
index 0000000000..0d7bfb1a8c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-07.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-08.json b/apps/v4/public/r/styles/new-york-v4/calendar-08.json
new file mode 100644
index 0000000000..d5088b71f8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-08.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-09.json b/apps/v4/public/r/styles/new-york-v4/calendar-09.json
new file mode 100644
index 0000000000..fe6a2830f9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-09.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-10.json b/apps/v4/public/r/styles/new-york-v4/calendar-10.json
new file mode 100644
index 0000000000..314cca76a0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-10.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <CardAction>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => {\n              setMonth(new Date())\n              setDate(new Date())\n            }}\n          >\n            Today\n          </Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-11.json b/apps/v4/public/r/styles/new-york-v4/calendar-11.json
new file mode 100644
index 0000000000..29a4e32507
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-11.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-12.json b/apps/v4/public/r/styles/new-york-v4/calendar-12.json
new file mode 100644
index 0000000000..11ce1eb5e2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-12.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <CardAction>\n          <Select\n            value={locale}\n            onValueChange={(value) =>\n              setLocale(value as keyof typeof localizedStrings)\n            }\n          >\n            <SelectTrigger className=\"w-[100px]\">\n              <SelectValue placeholder=\"Language\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"es\">Español</SelectItem>\n              <SelectItem value=\"en\">English</SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-13.json b/apps/v4/public/r/styles/new-york-v4/calendar-13.json
new file mode 100644
index 0000000000..121ef9abb1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-13.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger\n            id=\"dropdown\"\n            size=\"sm\"\n            className=\"bg-background w-full\"\n          >\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-14.json b/apps/v4/public/r/styles/new-york-v4/calendar-14.json
new file mode 100644
index 0000000000..2508f75d75
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-14.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-15.json b/apps/v4/public/r/styles/new-york-v4/calendar-15.json
new file mode 100644
index 0000000000..31c7c60a31
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-15.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-16.json b/apps/v4/public/r/styles/new-york-v4/calendar-16.json
new file mode 100644
index 0000000000..1f660e5857
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-16.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 !pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-17.json b/apps/v4/public/r/styles/new-york-v4/calendar-17.json
new file mode 100644
index 0000000000..4547a55a95
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-17.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(10.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex gap-2 border-t px-4 !pt-4 *:[div]:w-full\">\n        <div>\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div>\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-18.json b/apps/v4/public/r/styles/new-york-v4/calendar-18.json
new file mode 100644
index 0000000000..04c58b7ee5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-18.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-19.json b/apps/v4/public/r/styles/new-york-v4/calendar-19.json
new file mode 100644
index 0000000000..16eb47d187
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-19.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(9.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 !pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-20.json b/apps/v4/public/r/styles/new-york-v4/calendar-20.json
new file mode 100644
index 0000000000..f5c631564e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-20.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute.toString().padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t px-6 !py-5 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-21.json b/apps/v4/public/r/styles/new-york-v4/calendar-21.json
new file mode 100644
index 0000000000..8773d411e6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-21.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-22.json b/apps/v4/public/r/styles/new-york-v4/calendar-22.json
new file mode 100644
index 0000000000..ca4aeed570
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-22.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-23.json b/apps/v4/public/r/styles/new-york-v4/calendar-23.json
new file mode 100644
index 0000000000..838068b6c2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-23.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-24.json b/apps/v4/public/r/styles/new-york-v4/calendar-24.json
new file mode 100644
index 0000000000..226c5041a8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-24.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-25.json b/apps/v4/public/r/styles/new-york-v4/calendar-25.json
new file mode 100644
index 0000000000..18e56c8c28
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-25.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-26.json b/apps/v4/public/r/styles/new-york-v4/calendar-26.json
new file mode 100644
index 0000000000..230a4460a3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-26.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-27.json b/apps/v4/public/r/styles/new-york-v4/calendar-27.json
new file mode 100644
index 0000000000..0d62225511
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-27.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--color-primary)\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"flex flex-col border-b @md/card:grid\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <CardAction className=\"mt-2 @md/card:mt-0\">\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <CalendarIcon />\n                {range?.from && range?.to\n                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                  : \"June 2025\"}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n              <Calendar\n                className=\"w-full\"\n                mode=\"range\"\n                defaultMonth={range?.from}\n                selected={range}\n                onSelect={setRange}\n                disableNavigation\n                startMonth={range?.from}\n                fixedWeeks\n                showOutsideDays\n                disabled={{\n                  after: new Date(2025, 5, 31),\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-28.json b/apps/v4/public/r/styles/new-york-v4/calendar-28.json
new file mode 100644
index 0000000000..ae149ae0c6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-28.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-29.json b/apps/v4/public/r/styles/new-york-v4/calendar-29.json
new file mode 100644
index 0000000000..df3d574360
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-29.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-30.json b/apps/v4/public/r/styles/new-york-v4/calendar-30.json
new file mode 100644
index 0000000000..1aaaac6a11
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-30.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-31.json b/apps/v4/public/r/styles/new-york-v4/calendar-31.json
new file mode 100644
index 0000000000..03e2f971d6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-31.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 !pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-32.json b/apps/v4/public/r/styles/new-york-v4/calendar-32.json
new file mode 100644
index 0000000000..f231548786
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-32.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-demo.json b/apps/v4/public/r/styles/new-york-v4/calendar-demo.json
index bd7dc39a54..6e51dd8083 100644
--- a/apps/v4/public/r/styles/new-york-v4/calendar-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-demo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/calendar-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <div className=\"flex flex-col flex-wrap items-start gap-2 @md:flex-row\">\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border shadow-sm\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow-sm\"\n      captionLayout=\"dropdown\"\n    />\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-form.json b/apps/v4/public/r/styles/new-york-v4/calendar-form.json
index b177e885df..62fabe3d69 100644
--- a/apps/v4/public/r/styles/new-york-v4/calendar-form.json
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-form.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/calendar-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json b/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
new file mode 100644
index 0000000000..d317bd4cab
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-hijri",
+  "type": "registry:example",
+  "description": "A Persian calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, getDefaultClassNames } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function CalendarHijri() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar.json b/apps/v4/public/r/styles/new-york-v4/calendar.json
index 3140aee12a..7b5d74cd85 100644
--- a/apps/v4/public/r/styles/new-york-v4/calendar.json
+++ b/apps/v4/public/r/styles/new-york-v4/calendar.json
@@ -3,7 +3,7 @@
   "name": "calendar",
   "type": "registry:ui",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row gap-2\",\n        month: \"flex flex-col gap-4\",\n        caption: \"flex justify-center pt-1 relative items-center w-full\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"flex items-center gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-x-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"size-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start:\n          \"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground\",\n        day_range_end:\n          \"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"size-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"size-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/v4/public/r/styles/new-york-v4/date-picker-form.json b/apps/v4/public/r/styles/new-york-v4/date-picker-form.json
index 1384c3989e..0fb3b0c5aa 100644
--- a/apps/v4/public/r/styles/new-york-v4/date-picker-form.json
+++ b/apps/v4/public/r/styles/new-york-v4/date-picker-form.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/date-picker-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/v4/public/r/styles/new-york-v4/drawer.json b/apps/v4/public/r/styles/new-york-v4/drawer.json
index 30db560e08..b3641635d0 100644
--- a/apps/v4/public/r/styles/new-york-v4/drawer.json
+++ b/apps/v4/public/r/styles/new-york-v4/drawer.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/v4/public/r/styles/new-york/calendar-01.json b/apps/v4/public/r/styles/new-york/calendar-01.json
new file mode 100644
index 0000000000..3429d8ff75
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-02.json b/apps/v4/public/r/styles/new-york/calendar-02.json
new file mode 100644
index 0000000000..dbf49a6a42
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-03.json b/apps/v4/public/r/styles/new-york/calendar-03.json
new file mode 100644
index 0000000000..9eac847c94
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-04.json b/apps/v4/public/r/styles/new-york/calendar-04.json
new file mode 100644
index 0000000000..ac46925d13
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-05.json b/apps/v4/public/r/styles/new-york/calendar-05.json
new file mode 100644
index 0000000000..1a3cc272a7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-06.json b/apps/v4/public/r/styles/new-york/calendar-06.json
new file mode 100644
index 0000000000..3c93a8f865
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-07.json b/apps/v4/public/r/styles/new-york/calendar-07.json
new file mode 100644
index 0000000000..8143508a20
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-08.json b/apps/v4/public/r/styles/new-york/calendar-08.json
new file mode 100644
index 0000000000..1882fb4e2b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-09.json b/apps/v4/public/r/styles/new-york/calendar-09.json
new file mode 100644
index 0000000000..64a29e68dc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-10.json b/apps/v4/public/r/styles/new-york/calendar-10.json
new file mode 100644
index 0000000000..d91ca5e115
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-11.json b/apps/v4/public/r/styles/new-york/calendar-11.json
new file mode 100644
index 0000000000..16f7b18085
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-12.json b/apps/v4/public/r/styles/new-york/calendar-12.json
new file mode 100644
index 0000000000..ea591262f4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-13.json b/apps/v4/public/r/styles/new-york/calendar-13.json
new file mode 100644
index 0000000000..48686de333
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-14.json b/apps/v4/public/r/styles/new-york/calendar-14.json
new file mode 100644
index 0000000000..08268bb603
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-15.json b/apps/v4/public/r/styles/new-york/calendar-15.json
new file mode 100644
index 0000000000..4e0c8d11fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-16.json b/apps/v4/public/r/styles/new-york/calendar-16.json
new file mode 100644
index 0000000000..b9ed7abaeb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-17.json b/apps/v4/public/r/styles/new-york/calendar-17.json
new file mode 100644
index 0000000000..ade5449c4a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-18.json b/apps/v4/public/r/styles/new-york/calendar-18.json
new file mode 100644
index 0000000000..cbbeaa7e06
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-19.json b/apps/v4/public/r/styles/new-york/calendar-19.json
new file mode 100644
index 0000000000..c514d38355
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-20.json b/apps/v4/public/r/styles/new-york/calendar-20.json
new file mode 100644
index 0000000000..4429f6dd87
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-21.json b/apps/v4/public/r/styles/new-york/calendar-21.json
new file mode 100644
index 0000000000..4e085b2e01
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-22.json b/apps/v4/public/r/styles/new-york/calendar-22.json
new file mode 100644
index 0000000000..d9af6df607
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-23.json b/apps/v4/public/r/styles/new-york/calendar-23.json
new file mode 100644
index 0000000000..a8d3e19af9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-24.json b/apps/v4/public/r/styles/new-york/calendar-24.json
new file mode 100644
index 0000000000..2733e73977
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-25.json b/apps/v4/public/r/styles/new-york/calendar-25.json
new file mode 100644
index 0000000000..92aa408dfe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-26.json b/apps/v4/public/r/styles/new-york/calendar-26.json
new file mode 100644
index 0000000000..790ab1dd0f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-27.json b/apps/v4/public/r/styles/new-york/calendar-27.json
new file mode 100644
index 0000000000..20781d5bf3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-28.json b/apps/v4/public/r/styles/new-york/calendar-28.json
new file mode 100644
index 0000000000..7dd46474a7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-29.json b/apps/v4/public/r/styles/new-york/calendar-29.json
new file mode 100644
index 0000000000..8abbeb587e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-30.json b/apps/v4/public/r/styles/new-york/calendar-30.json
new file mode 100644
index 0000000000..db134b9b34
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-31.json b/apps/v4/public/r/styles/new-york/calendar-31.json
new file mode 100644
index 0000000000..00f7278c51
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-32.json b/apps/v4/public/r/styles/new-york/calendar-32.json
new file mode 100644
index 0000000000..610b102bc9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar.json b/apps/v4/public/r/styles/new-york/calendar.json
index f754cfb8f6..568af25965 100644
--- a/apps/v4/public/r/styles/new-york/calendar.json
+++ b/apps/v4/public/r/styles/new-york/calendar.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/v4/registry.json b/apps/v4/registry.json
index c91004e347..3731216de7 100644
--- a/apps/v4/registry.json
+++ b/apps/v4/registry.json
@@ -126,7 +126,7 @@
       "name": "calendar",
       "type": "registry:ui",
       "dependencies": [
-        "react-day-picker@8.10.1",
+        "react-day-picker@latest",
         "date-fns"
       ],
       "registryDependencies": [
@@ -1496,6 +1496,801 @@
         "login"
       ]
     },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": [
+        "calendar",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": [
+        "chrono-node"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": [
+        "calendar",
+        "button",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
     {
       "name": "chart-area-axes",
       "type": "registry:block",
@@ -4809,6 +5604,29 @@
         }
       ]
     },
+    {
+      "name": "calendar-hijri",
+      "type": "registry:example",
+      "description": "A Persian calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
     {
       "name": "sidebar-demo",
       "type": "registry:internal",
diff --git a/apps/v4/registry/__blocks__.json b/apps/v4/registry/__blocks__.json
new file mode 100644
index 0000000000..01ed55d0fd
--- /dev/null
+++ b/apps/v4/registry/__blocks__.json
@@ -0,0 +1,272 @@
+[
+  {
+    "name": "dashboard-01",
+    "description": "A dashboard with sidebar, charts and data table.",
+    "categories": ["dashboard"]
+  },
+  {
+    "name": "sidebar-01",
+    "description": "A simple sidebar with navigation grouped by section.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-02",
+    "description": "A sidebar with collapsible sections.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-03",
+    "description": "A sidebar with submenus.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-04",
+    "description": "A floating sidebar with submenus.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-05",
+    "description": "A sidebar with collapsible submenus.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-06",
+    "description": "A sidebar with submenus as dropdowns.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-07",
+    "description": "A sidebar that collapses to icons.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-08",
+    "description": "An inset sidebar with secondary navigation.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-09",
+    "description": "Collapsible nested sidebars.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-10",
+    "description": "A sidebar in a popover.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-11",
+    "description": "A sidebar with a collapsible file tree.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-12",
+    "description": "A sidebar with a calendar.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-13",
+    "description": "A sidebar in a dialog.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-14",
+    "description": "A sidebar on the right.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-15",
+    "description": "A left and right sidebar.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-16",
+    "description": "A sidebar with a sticky site header.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "login-01",
+    "description": "A simple login form.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-02",
+    "description": "A two column login page with a cover image.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-03",
+    "description": "A login page with a muted background color.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-04",
+    "description": "A login page with form and image.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-05",
+    "description": "A simple email-only login page.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "calendar-01",
+    "description": "A simple calendar.",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-02",
+    "description": "Multiple months with single selection.",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-03",
+    "description": "Multiple months with multiple selection.",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-04",
+    "description": "Single month with range selection",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-05",
+    "description": "Multiple months with range selection",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-06",
+    "description": "Range selection with minimum days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-07",
+    "description": "Range selection with minimum and maximum days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-08",
+    "description": "Calendar with disabled days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-09",
+    "description": "Calendar with disabled weekends",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-10",
+    "description": "Today button",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-11",
+    "description": "Start and end of month",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-12",
+    "description": "Localized calendar",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-13",
+    "description": "With Month and Year Dropdown",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-14",
+    "description": "With Booked/Unavailable Days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-15",
+    "description": "With Week Numbers",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-16",
+    "description": "With time picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-17",
+    "description": "With time picker inline",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-18",
+    "description": "Variable size",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-19",
+    "description": "With presets",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-20",
+    "description": "With time presets",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-21",
+    "description": "Custom days and formatters",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-22",
+    "description": "Date picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-23",
+    "description": "Date range picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-24",
+    "description": "Date and Time picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-25",
+    "description": "Date and Time range picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-26",
+    "description": "Date range picker with time",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-27",
+    "description": "Chart filter",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-28",
+    "description": "Input with date picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-29",
+    "description": "Natural language date picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-30",
+    "description": "With little-date",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-31",
+    "description": "With event slots",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-32",
+    "description": "Date picker in a drawer",
+    "categories": ["calendar", "date"]
+  }
+]
diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx
index cd3a3d2d21..c07cce4f03 100644
--- a/apps/v4/registry/__index__.tsx
+++ b/apps/v4/registry/__index__.tsx
@@ -1524,6 +1524,582 @@ export const Index: Record<string, any> = {
     categories: ["authentication","login"],
     meta: undefined,
   },
+  "calendar-01": {
+    name: "calendar-01",
+    description: "A simple calendar.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-01.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-01.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-02": {
+    name: "calendar-02",
+    description: "Multiple months with single selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-02.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-02.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-03": {
+    name: "calendar-03",
+    description: "Multiple months with multiple selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-03.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-03.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-04": {
+    name: "calendar-04",
+    description: "Single month with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-04.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-04.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28","mobile":"component"},
+  },
+  "calendar-05": {
+    name: "calendar-05",
+    description: "Multiple months with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-05.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-05.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-06": {
+    name: "calendar-06",
+    description: "Range selection with minimum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-06.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-06.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-07": {
+    name: "calendar-07",
+    description: "Range selection with minimum and maximum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-07.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-07.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-08": {
+    name: "calendar-08",
+    description: "Calendar with disabled days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-08.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-08.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-09": {
+    name: "calendar-09",
+    description: "Calendar with disabled weekends",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-09.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-09.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-10": {
+    name: "calendar-10",
+    description: "Today button",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-10.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-10.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-11": {
+    name: "calendar-11",
+    description: "Start and end of month",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-11.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-11.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-12": {
+    name: "calendar-12",
+    description: "Localized calendar",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","select"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-12.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-12.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-13": {
+    name: "calendar-13",
+    description: "With Month and Year Dropdown",
+    type: "registry:block",
+    registryDependencies: ["calendar","label","select"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-13.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-13.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-14": {
+    name: "calendar-14",
+    description: "With Booked/Unavailable Days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-14.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-14.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-15": {
+    name: "calendar-15",
+    description: "With Week Numbers",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-15.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-15.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-16": {
+    name: "calendar-16",
+    description: "With time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-16.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-16.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-17": {
+    name: "calendar-17",
+    description: "With time picker inline",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-17.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-17.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-18": {
+    name: "calendar-18",
+    description: "Variable size",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-18.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-18.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-19": {
+    name: "calendar-19",
+    description: "With presets",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-19.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-19.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-20": {
+    name: "calendar-20",
+    description: "With time presets",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-20.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-20.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-21": {
+    name: "calendar-21",
+    description: "Custom days and formatters",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-21.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-21.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-22": {
+    name: "calendar-22",
+    description: "Date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-22.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-22.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-23": {
+    name: "calendar-23",
+    description: "Date range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-23.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-23.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-24": {
+    name: "calendar-24",
+    description: "Date and Time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-24.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-24.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-25": {
+    name: "calendar-25",
+    description: "Date and Time range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-25.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-25.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-26": {
+    name: "calendar-26",
+    description: "Date range picker with time",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-26.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-26.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-27": {
+    name: "calendar-27",
+    description: "Chart filter",
+    type: "registry:block",
+    registryDependencies: ["calendar","chart","card","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-27.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-27.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-28": {
+    name: "calendar-28",
+    description: "Input with date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","input","label","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-28.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-28.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-29": {
+    name: "calendar-29",
+    description: "Natural language date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","input","label","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-29.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-29.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-30": {
+    name: "calendar-30",
+    description: "With little-date",
+    type: "registry:block",
+    registryDependencies: ["calendar","input","label","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-30.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-30.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-31": {
+    name: "calendar-31",
+    description: "With event slots",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-31.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-31.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"700px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-32": {
+    name: "calendar-32",
+    description: "Date picker in a drawer",
+    type: "registry:block",
+    registryDependencies: ["calendar","button","drawer"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-32.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-32.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
   "chart-area-axes": {
     name: "chart-area-axes",
     description: "",
@@ -5394,6 +5970,24 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "calendar-hijri": {
+    name: "calendar-hijri",
+    description: "A Persian calendar.",
+    type: "registry:example",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/examples/calendar-hijri.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/calendar-hijri.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
   "sidebar-demo": {
     name: "sidebar-demo",
     description: "",
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-01.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-01.tsx
new file mode 100644
index 0000000000..d3f663629e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-02.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-02.tsx
new file mode 100644
index 0000000000..1a078da3b8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-03.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-03.tsx
new file mode 100644
index 0000000000..cfe447ed24
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-04.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-04.tsx
new file mode 100644
index 0000000000..bfa6c0020f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-05.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-05.tsx
new file mode 100644
index 0000000000..f759899ee8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-06.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-06.tsx
new file mode 100644
index 0000000000..721c3aac3b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-07.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-07.tsx
new file mode 100644
index 0000000000..354e2a03e6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-08.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-08.tsx
new file mode 100644
index 0000000000..cfc8976924
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-09.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-09.tsx
new file mode 100644
index 0000000000..b150b17d23
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-10.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-10.tsx
new file mode 100644
index 0000000000..021061058b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-10.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <CardAction>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              setMonth(new Date())
+              setDate(new Date())
+            }}
+          >
+            Today
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-11.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-11.tsx
new file mode 100644
index 0000000000..aac7d909cd
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-12.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-12.tsx
new file mode 100644
index 0000000000..3785d5195a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-12.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <CardAction>
+          <Select
+            value={locale}
+            onValueChange={(value) =>
+              setLocale(value as keyof typeof localizedStrings)
+            }
+          >
+            <SelectTrigger className="w-[100px]">
+              <SelectValue placeholder="Language" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="es">Español</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-13.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-13.tsx
new file mode 100644
index 0000000000..e228944f3b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-13.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger
+            id="dropdown"
+            size="sm"
+            className="bg-background w-full"
+          >
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-14.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-14.tsx
new file mode 100644
index 0000000000..5483983070
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-15.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-15.tsx
new file mode 100644
index 0000000000..b4e37374c2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-16.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-16.tsx
new file mode 100644
index 0000000000..27f98962ba
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 !pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-17.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-17.tsx
new file mode 100644
index 0000000000..092c39b7c5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:--spacing(10.5)]"
+        />
+      </CardContent>
+      <CardFooter className="flex gap-2 border-t px-4 !pt-4 *:[div]:w-full">
+        <div>
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div>
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-18.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-18.tsx
new file mode 100644
index 0000000000..3211ab0dab
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-19.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-19.tsx
new file mode 100644
index 0000000000..d71170be30
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:--spacing(9.5)]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 !pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
new file mode 100644
index 0000000000..aa2e7e66b6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t px-6 !py-5 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-21.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-21.tsx
new file mode 100644
index 0000000000..51816164f4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-22.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-22.tsx
new file mode 100644
index 0000000000..1a37fd8a45
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-23.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-23.tsx
new file mode 100644
index 0000000000..641ab44c67
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-24.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-24.tsx
new file mode 100644
index 0000000000..0e9cca2796
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-25.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-25.tsx
new file mode 100644
index 0000000000..a573ce5764
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-26.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-26.tsx
new file mode 100644
index 0000000000..77495c87e0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-27.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-27.tsx
new file mode 100644
index 0000000000..ec86fa0b57
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-27.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--color-primary)",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="flex flex-col border-b @md/card:grid">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <CardAction className="mt-2 @md/card:mt-0">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline">
+                <CalendarIcon />
+                {range?.from && range?.to
+                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                  : "June 2025"}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+              <Calendar
+                className="w-full"
+                mode="range"
+                defaultMonth={range?.from}
+                selected={range}
+                onSelect={setRange}
+                disableNavigation
+                startMonth={range?.from}
+                fixedWeeks
+                showOutsideDays
+                disabled={{
+                  after: new Date(2025, 5, 31),
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-28.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-28.tsx
new file mode 100644
index 0000000000..2202cdfe6f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-28.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-29.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-29.tsx
new file mode 100644
index 0000000000..df57d9defc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-30.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-30.tsx
new file mode 100644
index 0000000000..533dd74f8c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-31.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-31.tsx
new file mode 100644
index 0000000000..88c8ddc74f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 !pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-32.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-32.tsx
new file mode 100644
index 0000000000..0d42454665
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx b/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx
index 8e9242cd33..1995831ffa 100644
--- a/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx
@@ -8,13 +8,12 @@ export default function CalendarDemo() {
   const [date, setDate] = React.useState<Date | undefined>(new Date())
 
   return (
-    <div className="flex flex-col flex-wrap items-start gap-2 @md:flex-row">
-      <Calendar
-        mode="single"
-        selected={date}
-        onSelect={setDate}
-        className="rounded-md border shadow-sm"
-      />
-    </div>
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border shadow-sm"
+      captionLayout="dropdown"
+    />
   )
 }
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-form.tsx b/apps/v4/registry/new-york-v4/examples/calendar-form.tsx
index db3cbdd47e..7bd9a5d123 100644
--- a/apps/v4/registry/new-york-v4/examples/calendar-form.tsx
+++ b/apps/v4/registry/new-york-v4/examples/calendar-form.tsx
@@ -82,7 +82,7 @@ export default function CalendarForm() {
                     disabled={(date) =>
                       date > new Date() || date < new Date("1900-01-01")
                     }
-                    initialFocus
+                    captionLayout="dropdown"
                   />
                 </PopoverContent>
               </Popover>
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
new file mode 100644
index 0000000000..b210c93c19
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
@@ -0,0 +1,229 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, getDefaultClassNames } from "react-day-picker"
+import { DayPicker } from "react-day-picker/persian"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+export default function CalendarHijri() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
+
+// ----------------------------------------------------------------------------
+// The code below is for this example only.
+// For your own calendar, you would edit the calendar.tsx component directly.
+// ----------------------------------------------------------------------------
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx b/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx
index 50c0d6c188..727a0da38d 100644
--- a/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx
+++ b/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx
@@ -82,7 +82,7 @@ export default function DatePickerForm() {
                     disabled={(date) =>
                       date > new Date() || date < new Date("1900-01-01")
                     }
-                    initialFocus
+                    captionLayout="dropdown"
                   />
                 </PopoverContent>
               </Popover>
diff --git a/apps/v4/registry/new-york-v4/ui/calendar.tsx b/apps/v4/registry/new-york-v4/ui/calendar.tsx
index cfb7c9e75b..9ae4b87df8 100644
--- a/apps/v4/registry/new-york-v4/ui/calendar.tsx
+++ b/apps/v4/registry/new-york-v4/ui/calendar.tsx
@@ -1,75 +1,210 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york-v4/ui/button"
+import { Button, buttonVariants } from "@/registry/new-york-v4/ui/button"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: React.ComponentProps<typeof DayPicker>) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100"
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
         ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("size-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
-        ),
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
       }}
       {...props}
     />
   )
 }
 
-export { Calendar }
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/v4/registry/new-york-v4/ui/drawer.tsx b/apps/v4/registry/new-york-v4/ui/drawer.tsx
index 199023b926..8aa69230a0 100644
--- a/apps/v4/registry/new-york-v4/ui/drawer.tsx
+++ b/apps/v4/registry/new-york-v4/ui/drawer.tsx
@@ -76,7 +76,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
       {...props}
     />
   )
diff --git a/apps/v4/registry/registry-blocks.ts b/apps/v4/registry/registry-blocks.ts
index bfaef76404..614fdf125d 100644
--- a/apps/v4/registry/registry-blocks.ts
+++ b/apps/v4/registry/registry-blocks.ts
@@ -705,4 +705,614 @@ export const blocks: Registry["items"] = [
     ],
     categories: ["authentication", "login"],
   },
+  {
+    name: "calendar-01",
+    description: "A simple calendar.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-01.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-02",
+    description: "Multiple months with single selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-02.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-03",
+    description: "Multiple months with multiple selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-03.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-04",
+    description: "Single month with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-04.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-05",
+    description: "Multiple months with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-05.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-06",
+    description: "Range selection with minimum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-06.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-07",
+    description: "Range selection with minimum and maximum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-07.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-08",
+    description: "Calendar with disabled days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-08.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-09",
+    description: "Calendar with disabled weekends",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-09.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-10",
+    description: "Today button",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-10.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-11",
+    description: "Start and end of month",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-11.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-12",
+    description: "Localized calendar",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "select"],
+    files: [
+      {
+        path: "blocks/calendar-12.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-13",
+    description: "With Month and Year Dropdown",
+    type: "registry:block",
+    registryDependencies: ["calendar", "label", "select"],
+    files: [
+      {
+        path: "blocks/calendar-13.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-14",
+    description: "With Booked/Unavailable Days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-14.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-15",
+    description: "With Week Numbers",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-15.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-16",
+    description: "With time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-16.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-17",
+    description: "With time picker inline",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-17.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-18",
+    description: "Variable size",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-18.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-19",
+    description: "With presets",
+    type: "registry:block",
+    dependencies: ["date-fns"],
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-19.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-20",
+    description: "With time presets",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-20.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-21",
+    description: "Custom days and formatters",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-21.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-22",
+    description: "Date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-22.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-23",
+    description: "Date range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-23.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-24",
+    description: "Date and Time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-24.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-25",
+    description: "Date and Time range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-25.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-26",
+    description: "Date range picker with time",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-26.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-27",
+    description: "Chart filter",
+    type: "registry:block",
+    registryDependencies: ["calendar", "chart", "card", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-27.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-28",
+    description: "Input with date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-28.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-29",
+    description: "Natural language date picker",
+    type: "registry:block",
+    dependencies: ["chrono-node"],
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-29.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-30",
+    description: "With little-date",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-30.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-31",
+    description: "With event slots",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-31.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "700px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-32",
+    description: "Date picker in a drawer",
+    type: "registry:block",
+    registryDependencies: ["calendar", "button", "drawer"],
+    files: [
+      {
+        path: "blocks/calendar-32.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
 ]
diff --git a/apps/v4/registry/registry-categories.ts b/apps/v4/registry/registry-categories.ts
index 8687469fd0..432a351b38 100644
--- a/apps/v4/registry/registry-categories.ts
+++ b/apps/v4/registry/registry-categories.ts
@@ -20,43 +20,8 @@ export const registryCategories = [
     hidden: false,
   },
   {
-    name: "Charts",
-    slug: "charts",
-    hidden: true,
-  },
-  {
-    name: "Area Charts",
-    slug: "charts-area",
-    hidden: true,
-  },
-  {
-    name: "Bar Charts",
-    slug: "charts-bar",
-    hidden: true,
-  },
-  {
-    name: "Line Charts",
-    slug: "charts-line",
-    hidden: true,
-  },
-  {
-    name: "Pie Charts",
-    slug: "charts-pie",
-    hidden: true,
-  },
-  {
-    name: "Radar Charts",
-    slug: "charts-radar",
-    hidden: true,
-  },
-  {
-    name: "Radial Charts",
-    slug: "charts-radial",
-    hidden: true,
-  },
-  {
-    name: "Charts Tooltip",
-    slug: "charts-tooltip",
-    hidden: true,
+    name: "Calendar",
+    slug: "calendar",
+    hidden: false,
   },
 ]
diff --git a/apps/v4/registry/registry-examples.ts b/apps/v4/registry/registry-examples.ts
index 4f07b12ed6..49251c4afe 100644
--- a/apps/v4/registry/registry-examples.ts
+++ b/apps/v4/registry/registry-examples.ts
@@ -1612,4 +1612,23 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "calendar-hijri",
+    description: "A Persian calendar.",
+    type: "registry:example",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "examples/calendar-hijri.tsx",
+        type: "registry:example",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
 ]
diff --git a/apps/v4/registry/registry-ui.ts b/apps/v4/registry/registry-ui.ts
index e522debd94..572434e619 100644
--- a/apps/v4/registry/registry-ui.ts
+++ b/apps/v4/registry/registry-ui.ts
@@ -114,7 +114,7 @@ export const ui: Registry["items"] = [
   {
     name: "calendar",
     type: "registry:ui",
-    dependencies: ["react-day-picker@8.10.1", "date-fns"],
+    dependencies: ["react-day-picker@latest", "date-fns"],
     registryDependencies: ["button"],
     files: [
       {
diff --git a/apps/v4/scripts/build-registry.mts b/apps/v4/scripts/build-registry.mts
index 5256a08d39..fdcc0952ed 100644
--- a/apps/v4/scripts/build-registry.mts
+++ b/apps/v4/scripts/build-registry.mts
@@ -3,6 +3,7 @@ import { promises as fs } from "fs"
 import path from "path"
 import { rimraf } from "rimraf"
 
+import { getAllBlocks } from "@/lib/blocks"
 import { registry } from "@/registry/index"
 
 async function buildRegistryIndex() {
@@ -139,10 +140,29 @@ async function syncRegistry() {
   }
 }
 
+async function buildBlocksIndex() {
+  const blocks = await getAllBlocks(["registry:block"])
+
+  const payload = blocks.map((block) => ({
+    name: block.name,
+    description: block.description,
+    categories: block.categories,
+  }))
+
+  rimraf.sync(path.join(process.cwd(), "registry/__blocks__.json"))
+  await fs.writeFile(
+    path.join(process.cwd(), "registry/__blocks__.json"),
+    JSON.stringify(payload, null, 2)
+  )
+}
+
 try {
   console.log("🗂️ Building registry/__index__.tsx...")
   await buildRegistryIndex()
 
+  console.log("🗂️ Building registry/__blocks__.json...")
+  await buildBlocksIndex()
+
   console.log("💅 Building registry.json...")
   await buildRegistryJsonFile()
 
diff --git a/apps/www/__registry__/default/blocks/calendar-01.tsx b/apps/www/__registry__/default/blocks/calendar-01.tsx
new file mode 100644
index 0000000000..7c254e7a0f
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-02.tsx b/apps/www/__registry__/default/blocks/calendar-02.tsx
new file mode 100644
index 0000000000..a3c937ecba
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-03.tsx b/apps/www/__registry__/default/blocks/calendar-03.tsx
new file mode 100644
index 0000000000..89de91fafb
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-04.tsx b/apps/www/__registry__/default/blocks/calendar-04.tsx
new file mode 100644
index 0000000000..86d58b8c98
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-05.tsx b/apps/www/__registry__/default/blocks/calendar-05.tsx
new file mode 100644
index 0000000000..b6a13b61c4
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-06.tsx b/apps/www/__registry__/default/blocks/calendar-06.tsx
new file mode 100644
index 0000000000..5c61050a69
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-07.tsx b/apps/www/__registry__/default/blocks/calendar-07.tsx
new file mode 100644
index 0000000000..3f46a659e0
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-08.tsx b/apps/www/__registry__/default/blocks/calendar-08.tsx
new file mode 100644
index 0000000000..93a90ff4e8
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-09.tsx b/apps/www/__registry__/default/blocks/calendar-09.tsx
new file mode 100644
index 0000000000..182d7f2bb9
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-10.tsx b/apps/www/__registry__/default/blocks/calendar-10.tsx
new file mode 100644
index 0000000000..592c66ded3
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-11.tsx b/apps/www/__registry__/default/blocks/calendar-11.tsx
new file mode 100644
index 0000000000..dfad509ae1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-12.tsx b/apps/www/__registry__/default/blocks/calendar-12.tsx
new file mode 100644
index 0000000000..0e3dda9632
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-13.tsx b/apps/www/__registry__/default/blocks/calendar-13.tsx
new file mode 100644
index 0000000000..047d67fa6c
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-14.tsx b/apps/www/__registry__/default/blocks/calendar-14.tsx
new file mode 100644
index 0000000000..e1d53f1a7d
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-15.tsx b/apps/www/__registry__/default/blocks/calendar-15.tsx
new file mode 100644
index 0000000000..6fec6f59a0
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-16.tsx b/apps/www/__registry__/default/blocks/calendar-16.tsx
new file mode 100644
index 0000000000..d21aa9fcab
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-17.tsx b/apps/www/__registry__/default/blocks/calendar-17.tsx
new file mode 100644
index 0000000000..bd66aeb3d2
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-18.tsx b/apps/www/__registry__/default/blocks/calendar-18.tsx
new file mode 100644
index 0000000000..950983dfa3
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-19.tsx b/apps/www/__registry__/default/blocks/calendar-19.tsx
new file mode 100644
index 0000000000..c9bff184e8
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-20.tsx b/apps/www/__registry__/default/blocks/calendar-20.tsx
new file mode 100644
index 0000000000..e9ba34fc43
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-21.tsx b/apps/www/__registry__/default/blocks/calendar-21.tsx
new file mode 100644
index 0000000000..4762f22b32
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/default/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-22.tsx b/apps/www/__registry__/default/blocks/calendar-22.tsx
new file mode 100644
index 0000000000..b184684762
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-23.tsx b/apps/www/__registry__/default/blocks/calendar-23.tsx
new file mode 100644
index 0000000000..a1110c054a
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-24.tsx b/apps/www/__registry__/default/blocks/calendar-24.tsx
new file mode 100644
index 0000000000..19f1fd0d03
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-25.tsx b/apps/www/__registry__/default/blocks/calendar-25.tsx
new file mode 100644
index 0000000000..bf01d207c3
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-26.tsx b/apps/www/__registry__/default/blocks/calendar-26.tsx
new file mode 100644
index 0000000000..2032623348
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-27.tsx b/apps/www/__registry__/default/blocks/calendar-27.tsx
new file mode 100644
index 0000000000..ebc120422d
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-28.tsx b/apps/www/__registry__/default/blocks/calendar-28.tsx
new file mode 100644
index 0000000000..2cd72f75a1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-29.tsx b/apps/www/__registry__/default/blocks/calendar-29.tsx
new file mode 100644
index 0000000000..22af360250
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-30.tsx b/apps/www/__registry__/default/blocks/calendar-30.tsx
new file mode 100644
index 0000000000..5cb30d9841
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-31.tsx b/apps/www/__registry__/default/blocks/calendar-31.tsx
new file mode 100644
index 0000000000..6c2c185df1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-32.tsx b/apps/www/__registry__/default/blocks/calendar-32.tsx
new file mode 100644
index 0000000000..afd47c1497
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 21f232da8a..bc015d6817 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -1332,6 +1332,486 @@ export const Index: Record<string, any> = {
       source: "__registry__/new-york/blocks/login-05/page.tsx",
       meta: undefined,
     },
+    "calendar-01": {
+      name: "calendar-01",
+      description: "A simple calendar.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-01.tsx")),
+      source: "__registry__/new-york/blocks/calendar-01.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-02": {
+      name: "calendar-02",
+      description: "Multiple months with single selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-02.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-02.tsx")),
+      source: "__registry__/new-york/blocks/calendar-02.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-03": {
+      name: "calendar-03",
+      description: "Multiple months with multiple selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-03.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-03.tsx")),
+      source: "__registry__/new-york/blocks/calendar-03.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-04": {
+      name: "calendar-04",
+      description: "Single month with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-04.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-04.tsx")),
+      source: "__registry__/new-york/blocks/calendar-04.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28","mobile":"component"},
+    },
+    "calendar-05": {
+      name: "calendar-05",
+      description: "Multiple months with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-05.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-05.tsx")),
+      source: "__registry__/new-york/blocks/calendar-05.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-06": {
+      name: "calendar-06",
+      description: "Range selection with minimum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-06.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-06.tsx")),
+      source: "__registry__/new-york/blocks/calendar-06.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-07": {
+      name: "calendar-07",
+      description: "Range selection with minimum and maximum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-07.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-07.tsx")),
+      source: "__registry__/new-york/blocks/calendar-07.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-08": {
+      name: "calendar-08",
+      description: "Calendar with disabled days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-08.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-08.tsx")),
+      source: "__registry__/new-york/blocks/calendar-08.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-09": {
+      name: "calendar-09",
+      description: "Calendar with disabled weekends",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-09.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-09.tsx")),
+      source: "__registry__/new-york/blocks/calendar-09.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-10": {
+      name: "calendar-10",
+      description: "Today button",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-10.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-10.tsx")),
+      source: "__registry__/new-york/blocks/calendar-10.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-11": {
+      name: "calendar-11",
+      description: "Start and end of month",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-11.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-11.tsx")),
+      source: "__registry__/new-york/blocks/calendar-11.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-12": {
+      name: "calendar-12",
+      description: "Localized calendar",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","select"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-12.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-12.tsx")),
+      source: "__registry__/new-york/blocks/calendar-12.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-13": {
+      name: "calendar-13",
+      description: "With Month and Year Dropdown",
+      type: "registry:block",
+      registryDependencies: ["calendar","label","select"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-13.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-13.tsx")),
+      source: "__registry__/new-york/blocks/calendar-13.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-14": {
+      name: "calendar-14",
+      description: "With Booked/Unavailable Days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-14.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-14.tsx")),
+      source: "__registry__/new-york/blocks/calendar-14.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-15": {
+      name: "calendar-15",
+      description: "With Week Numbers",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-15.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-15.tsx")),
+      source: "__registry__/new-york/blocks/calendar-15.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-16": {
+      name: "calendar-16",
+      description: "With time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-16.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-16.tsx")),
+      source: "__registry__/new-york/blocks/calendar-16.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-17": {
+      name: "calendar-17",
+      description: "With time picker inline",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-17.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-17.tsx")),
+      source: "__registry__/new-york/blocks/calendar-17.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-18": {
+      name: "calendar-18",
+      description: "Variable size",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-18.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-18.tsx")),
+      source: "__registry__/new-york/blocks/calendar-18.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-19": {
+      name: "calendar-19",
+      description: "With presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-19.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-19.tsx")),
+      source: "__registry__/new-york/blocks/calendar-19.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-20": {
+      name: "calendar-20",
+      description: "With time presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-20.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-20.tsx")),
+      source: "__registry__/new-york/blocks/calendar-20.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-21": {
+      name: "calendar-21",
+      description: "Custom days and formatters",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-21.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-21.tsx")),
+      source: "__registry__/new-york/blocks/calendar-21.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-22": {
+      name: "calendar-22",
+      description: "Date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-22.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-22.tsx")),
+      source: "__registry__/new-york/blocks/calendar-22.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-23": {
+      name: "calendar-23",
+      description: "Date range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-23.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-23.tsx")),
+      source: "__registry__/new-york/blocks/calendar-23.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-24": {
+      name: "calendar-24",
+      description: "Date and Time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-24.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-24.tsx")),
+      source: "__registry__/new-york/blocks/calendar-24.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-25": {
+      name: "calendar-25",
+      description: "Date and Time range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-25.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-25.tsx")),
+      source: "__registry__/new-york/blocks/calendar-25.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-26": {
+      name: "calendar-26",
+      description: "Date range picker with time",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-26.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-26.tsx")),
+      source: "__registry__/new-york/blocks/calendar-26.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-27": {
+      name: "calendar-27",
+      description: "Chart filter",
+      type: "registry:block",
+      registryDependencies: ["calendar","chart","card","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-27.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-27.tsx")),
+      source: "__registry__/new-york/blocks/calendar-27.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-28": {
+      name: "calendar-28",
+      description: "Input with date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-28.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-28.tsx")),
+      source: "__registry__/new-york/blocks/calendar-28.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-29": {
+      name: "calendar-29",
+      description: "Natural language date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-29.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-29.tsx")),
+      source: "__registry__/new-york/blocks/calendar-29.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-30": {
+      name: "calendar-30",
+      description: "With little-date",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-30.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-30.tsx")),
+      source: "__registry__/new-york/blocks/calendar-30.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-31": {
+      name: "calendar-31",
+      description: "With event slots",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-31.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-31.tsx")),
+      source: "__registry__/new-york/blocks/calendar-31.tsx",
+      meta: {"iframeHeight":"700px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-32": {
+      name: "calendar-32",
+      description: "Date picker in a drawer",
+      type: "registry:block",
+      registryDependencies: ["calendar","button","drawer"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-32.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-32.tsx")),
+      source: "__registry__/new-york/blocks/calendar-32.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "",
@@ -6685,6 +7165,486 @@ export const Index: Record<string, any> = {
       source: "__registry__/default/blocks/login-05/page.tsx",
       meta: undefined,
     },
+    "calendar-01": {
+      name: "calendar-01",
+      description: "A simple calendar.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-01.tsx")),
+      source: "__registry__/default/blocks/calendar-01.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-02": {
+      name: "calendar-02",
+      description: "Multiple months with single selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-02.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-02.tsx")),
+      source: "__registry__/default/blocks/calendar-02.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-03": {
+      name: "calendar-03",
+      description: "Multiple months with multiple selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-03.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-03.tsx")),
+      source: "__registry__/default/blocks/calendar-03.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-04": {
+      name: "calendar-04",
+      description: "Single month with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-04.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-04.tsx")),
+      source: "__registry__/default/blocks/calendar-04.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28","mobile":"component"},
+    },
+    "calendar-05": {
+      name: "calendar-05",
+      description: "Multiple months with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-05.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-05.tsx")),
+      source: "__registry__/default/blocks/calendar-05.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-06": {
+      name: "calendar-06",
+      description: "Range selection with minimum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-06.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-06.tsx")),
+      source: "__registry__/default/blocks/calendar-06.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-07": {
+      name: "calendar-07",
+      description: "Range selection with minimum and maximum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-07.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-07.tsx")),
+      source: "__registry__/default/blocks/calendar-07.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-08": {
+      name: "calendar-08",
+      description: "Calendar with disabled days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-08.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-08.tsx")),
+      source: "__registry__/default/blocks/calendar-08.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-09": {
+      name: "calendar-09",
+      description: "Calendar with disabled weekends",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-09.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-09.tsx")),
+      source: "__registry__/default/blocks/calendar-09.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-10": {
+      name: "calendar-10",
+      description: "Today button",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-10.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-10.tsx")),
+      source: "__registry__/default/blocks/calendar-10.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-11": {
+      name: "calendar-11",
+      description: "Start and end of month",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-11.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-11.tsx")),
+      source: "__registry__/default/blocks/calendar-11.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-12": {
+      name: "calendar-12",
+      description: "Localized calendar",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","select"],
+      files: [{
+        path: "registry/default/blocks/calendar-12.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-12.tsx")),
+      source: "__registry__/default/blocks/calendar-12.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-13": {
+      name: "calendar-13",
+      description: "With Month and Year Dropdown",
+      type: "registry:block",
+      registryDependencies: ["calendar","label","select"],
+      files: [{
+        path: "registry/default/blocks/calendar-13.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-13.tsx")),
+      source: "__registry__/default/blocks/calendar-13.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-14": {
+      name: "calendar-14",
+      description: "With Booked/Unavailable Days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-14.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-14.tsx")),
+      source: "__registry__/default/blocks/calendar-14.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-15": {
+      name: "calendar-15",
+      description: "With Week Numbers",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-15.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-15.tsx")),
+      source: "__registry__/default/blocks/calendar-15.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-16": {
+      name: "calendar-16",
+      description: "With time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-16.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-16.tsx")),
+      source: "__registry__/default/blocks/calendar-16.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-17": {
+      name: "calendar-17",
+      description: "With time picker inline",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-17.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-17.tsx")),
+      source: "__registry__/default/blocks/calendar-17.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-18": {
+      name: "calendar-18",
+      description: "Variable size",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-18.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-18.tsx")),
+      source: "__registry__/default/blocks/calendar-18.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-19": {
+      name: "calendar-19",
+      description: "With presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-19.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-19.tsx")),
+      source: "__registry__/default/blocks/calendar-19.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-20": {
+      name: "calendar-20",
+      description: "With time presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-20.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-20.tsx")),
+      source: "__registry__/default/blocks/calendar-20.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-21": {
+      name: "calendar-21",
+      description: "Custom days and formatters",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-21.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-21.tsx")),
+      source: "__registry__/default/blocks/calendar-21.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-22": {
+      name: "calendar-22",
+      description: "Date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-22.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-22.tsx")),
+      source: "__registry__/default/blocks/calendar-22.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-23": {
+      name: "calendar-23",
+      description: "Date range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-23.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-23.tsx")),
+      source: "__registry__/default/blocks/calendar-23.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-24": {
+      name: "calendar-24",
+      description: "Date and Time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-24.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-24.tsx")),
+      source: "__registry__/default/blocks/calendar-24.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-25": {
+      name: "calendar-25",
+      description: "Date and Time range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-25.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-25.tsx")),
+      source: "__registry__/default/blocks/calendar-25.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-26": {
+      name: "calendar-26",
+      description: "Date range picker with time",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-26.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-26.tsx")),
+      source: "__registry__/default/blocks/calendar-26.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-27": {
+      name: "calendar-27",
+      description: "Chart filter",
+      type: "registry:block",
+      registryDependencies: ["calendar","chart","card","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-27.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-27.tsx")),
+      source: "__registry__/default/blocks/calendar-27.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-28": {
+      name: "calendar-28",
+      description: "Input with date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-28.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-28.tsx")),
+      source: "__registry__/default/blocks/calendar-28.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-29": {
+      name: "calendar-29",
+      description: "Natural language date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-29.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-29.tsx")),
+      source: "__registry__/default/blocks/calendar-29.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-30": {
+      name: "calendar-30",
+      description: "With little-date",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-30.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-30.tsx")),
+      source: "__registry__/default/blocks/calendar-30.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-31": {
+      name: "calendar-31",
+      description: "With event slots",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-31.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-31.tsx")),
+      source: "__registry__/default/blocks/calendar-31.tsx",
+      meta: {"iframeHeight":"700px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-32": {
+      name: "calendar-32",
+      description: "Date picker in a drawer",
+      type: "registry:block",
+      registryDependencies: ["calendar","button","drawer"],
+      files: [{
+        path: "registry/default/blocks/calendar-32.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-32.tsx")),
+      source: "__registry__/default/blocks/calendar-32.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "",
diff --git a/apps/www/__registry__/new-york/blocks/calendar-01.tsx b/apps/www/__registry__/new-york/blocks/calendar-01.tsx
new file mode 100644
index 0000000000..6ec892f267
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-02.tsx b/apps/www/__registry__/new-york/blocks/calendar-02.tsx
new file mode 100644
index 0000000000..ec4099fc80
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-03.tsx b/apps/www/__registry__/new-york/blocks/calendar-03.tsx
new file mode 100644
index 0000000000..fa06eb391f
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-04.tsx b/apps/www/__registry__/new-york/blocks/calendar-04.tsx
new file mode 100644
index 0000000000..d3f823baf8
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-05.tsx b/apps/www/__registry__/new-york/blocks/calendar-05.tsx
new file mode 100644
index 0000000000..ec01627f23
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-06.tsx b/apps/www/__registry__/new-york/blocks/calendar-06.tsx
new file mode 100644
index 0000000000..9d8cc09c9d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-07.tsx b/apps/www/__registry__/new-york/blocks/calendar-07.tsx
new file mode 100644
index 0000000000..26651effb9
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-08.tsx b/apps/www/__registry__/new-york/blocks/calendar-08.tsx
new file mode 100644
index 0000000000..094f975b2d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-09.tsx b/apps/www/__registry__/new-york/blocks/calendar-09.tsx
new file mode 100644
index 0000000000..f46cb5b13e
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-10.tsx b/apps/www/__registry__/new-york/blocks/calendar-10.tsx
new file mode 100644
index 0000000000..05e48d5300
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-11.tsx b/apps/www/__registry__/new-york/blocks/calendar-11.tsx
new file mode 100644
index 0000000000..10a58ba3cd
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-12.tsx b/apps/www/__registry__/new-york/blocks/calendar-12.tsx
new file mode 100644
index 0000000000..89e8b422e1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-13.tsx b/apps/www/__registry__/new-york/blocks/calendar-13.tsx
new file mode 100644
index 0000000000..fbe5c58f77
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-14.tsx b/apps/www/__registry__/new-york/blocks/calendar-14.tsx
new file mode 100644
index 0000000000..41be778b9f
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-15.tsx b/apps/www/__registry__/new-york/blocks/calendar-15.tsx
new file mode 100644
index 0000000000..8031bd2ced
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-16.tsx b/apps/www/__registry__/new-york/blocks/calendar-16.tsx
new file mode 100644
index 0000000000..638ec8ff21
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-17.tsx b/apps/www/__registry__/new-york/blocks/calendar-17.tsx
new file mode 100644
index 0000000000..5ac8cbc4f0
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-18.tsx b/apps/www/__registry__/new-york/blocks/calendar-18.tsx
new file mode 100644
index 0000000000..d647923405
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-19.tsx b/apps/www/__registry__/new-york/blocks/calendar-19.tsx
new file mode 100644
index 0000000000..54a62dd7e9
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-20.tsx b/apps/www/__registry__/new-york/blocks/calendar-20.tsx
new file mode 100644
index 0000000000..2a2bb3f5eb
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-21.tsx b/apps/www/__registry__/new-york/blocks/calendar-21.tsx
new file mode 100644
index 0000000000..9016b91b8c
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-22.tsx b/apps/www/__registry__/new-york/blocks/calendar-22.tsx
new file mode 100644
index 0000000000..fbba5c925a
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-23.tsx b/apps/www/__registry__/new-york/blocks/calendar-23.tsx
new file mode 100644
index 0000000000..2702cd90fd
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-24.tsx b/apps/www/__registry__/new-york/blocks/calendar-24.tsx
new file mode 100644
index 0000000000..02640d5936
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-25.tsx b/apps/www/__registry__/new-york/blocks/calendar-25.tsx
new file mode 100644
index 0000000000..5ed864df3e
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-26.tsx b/apps/www/__registry__/new-york/blocks/calendar-26.tsx
new file mode 100644
index 0000000000..166cd46498
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-27.tsx b/apps/www/__registry__/new-york/blocks/calendar-27.tsx
new file mode 100644
index 0000000000..89c65876e2
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-28.tsx b/apps/www/__registry__/new-york/blocks/calendar-28.tsx
new file mode 100644
index 0000000000..40b63bc2e7
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-29.tsx b/apps/www/__registry__/new-york/blocks/calendar-29.tsx
new file mode 100644
index 0000000000..a08ffa1b1d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-30.tsx b/apps/www/__registry__/new-york/blocks/calendar-30.tsx
new file mode 100644
index 0000000000..05b5a9ae9f
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-31.tsx b/apps/www/__registry__/new-york/blocks/calendar-31.tsx
new file mode 100644
index 0000000000..c4d3844f9e
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-32.tsx b/apps/www/__registry__/new-york/blocks/calendar-32.tsx
new file mode 100644
index 0000000000..21c8f5e160
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/package.json b/apps/www/package.json
index be90d44b61..f6b80d68dd 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -62,6 +62,7 @@
     "@vercel/analytics": "^1.2.2",
     "@vercel/og": "^0.0.21",
     "change-case": "^5.4.4",
+    "chrono-node": "^2.8.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
@@ -73,6 +74,7 @@
     "geist": "^1.2.2",
     "input-otp": "^1.2.2",
     "jotai": "^2.1.0",
+    "little-date": "^1.0.0",
     "lodash": "^4.17.21",
     "lucide-react": "0.477.0",
     "markdown-wasm": "^1.2.0",
@@ -80,7 +82,7 @@
     "next-contentlayer2": "^0.4.6",
     "next-themes": "^0.4.3",
     "react": "^18.2.0",
-    "react-day-picker": "^8.7.1",
+    "react-day-picker": "^9.7.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.2",
     "react-resizable-panels": "^2.0.22",
diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index 8dbe1aecc2..178a1a7463 100644
--- a/apps/www/public/r/index.json
+++ b/apps/www/public/r/index.json
@@ -137,7 +137,7 @@
     "name": "calendar",
     "type": "registry:ui",
     "dependencies": [
-      "react-day-picker@8.10.1",
+      "react-day-picker@latest",
       "date-fns"
     ],
     "registryDependencies": [
diff --git a/apps/www/public/r/styles/default/calendar-01.json b/apps/www/public/r/styles/default/calendar-01.json
new file mode 100644
index 0000000000..5055c73cee
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-02.json b/apps/www/public/r/styles/default/calendar-02.json
new file mode 100644
index 0000000000..fe9bf781ce
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-03.json b/apps/www/public/r/styles/default/calendar-03.json
new file mode 100644
index 0000000000..722062cf86
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-04.json b/apps/www/public/r/styles/default/calendar-04.json
new file mode 100644
index 0000000000..4a238ea4a3
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-05.json b/apps/www/public/r/styles/default/calendar-05.json
new file mode 100644
index 0000000000..70aecb22a7
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-06.json b/apps/www/public/r/styles/default/calendar-06.json
new file mode 100644
index 0000000000..a6486cb573
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-07.json b/apps/www/public/r/styles/default/calendar-07.json
new file mode 100644
index 0000000000..e8558053ba
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-08.json b/apps/www/public/r/styles/default/calendar-08.json
new file mode 100644
index 0000000000..c4f47ebea3
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-09.json b/apps/www/public/r/styles/default/calendar-09.json
new file mode 100644
index 0000000000..109eb92cbe
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-10.json b/apps/www/public/r/styles/default/calendar-10.json
new file mode 100644
index 0000000000..1851e7ead5
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-11.json b/apps/www/public/r/styles/default/calendar-11.json
new file mode 100644
index 0000000000..5807637528
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-12.json b/apps/www/public/r/styles/default/calendar-12.json
new file mode 100644
index 0000000000..4b4034cb7f
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-13.json b/apps/www/public/r/styles/default/calendar-13.json
new file mode 100644
index 0000000000..f772b672f4
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-14.json b/apps/www/public/r/styles/default/calendar-14.json
new file mode 100644
index 0000000000..132c490637
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-15.json b/apps/www/public/r/styles/default/calendar-15.json
new file mode 100644
index 0000000000..aaf941d647
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-16.json b/apps/www/public/r/styles/default/calendar-16.json
new file mode 100644
index 0000000000..19c92ec665
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-17.json b/apps/www/public/r/styles/default/calendar-17.json
new file mode 100644
index 0000000000..9fee2d25b3
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-18.json b/apps/www/public/r/styles/default/calendar-18.json
new file mode 100644
index 0000000000..c9fa9d20c1
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-19.json b/apps/www/public/r/styles/default/calendar-19.json
new file mode 100644
index 0000000000..197ccf33f7
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-20.json b/apps/www/public/r/styles/default/calendar-20.json
new file mode 100644
index 0000000000..280a23e319
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-21.json b/apps/www/public/r/styles/default/calendar-21.json
new file mode 100644
index 0000000000..e75290eea6
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-22.json b/apps/www/public/r/styles/default/calendar-22.json
new file mode 100644
index 0000000000..8a83ac97d9
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-23.json b/apps/www/public/r/styles/default/calendar-23.json
new file mode 100644
index 0000000000..a87121360e
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-24.json b/apps/www/public/r/styles/default/calendar-24.json
new file mode 100644
index 0000000000..994c70a211
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-25.json b/apps/www/public/r/styles/default/calendar-25.json
new file mode 100644
index 0000000000..7b7ccd9a1e
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-26.json b/apps/www/public/r/styles/default/calendar-26.json
new file mode 100644
index 0000000000..c3a2ec7784
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-27.json b/apps/www/public/r/styles/default/calendar-27.json
new file mode 100644
index 0000000000..be7ad4f592
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-28.json b/apps/www/public/r/styles/default/calendar-28.json
new file mode 100644
index 0000000000..2d0bf94cc9
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-29.json b/apps/www/public/r/styles/default/calendar-29.json
new file mode 100644
index 0000000000..1d81663cdc
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-30.json b/apps/www/public/r/styles/default/calendar-30.json
new file mode 100644
index 0000000000..4297f6e8fe
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-31.json b/apps/www/public/r/styles/default/calendar-31.json
new file mode 100644
index 0000000000..34b2aecb5c
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-32.json b/apps/www/public/r/styles/default/calendar-32.json
new file mode 100644
index 0000000000..f0a8ca3703
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar.json b/apps/www/public/r/styles/default/calendar.json
index ac931a83dc..568af25965 100644
--- a/apps/www/public/r/styles/default/calendar.json
+++ b/apps/www/public/r/styles/default/calendar.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york-v4/accordion-demo.json b/apps/www/public/r/styles/new-york-v4/accordion-demo.json
index 274a9d14b5..606f111270 100644
--- a/apps/www/public/r/styles/new-york-v4/accordion-demo.json
+++ b/apps/www/public/r/styles/new-york-v4/accordion-demo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/accordion-demo.tsx",
-      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york-v4/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york-v4/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"w-full\"\n      defaultValue=\"item-1\"\n    >\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-01.json b/apps/www/public/r/styles/new-york-v4/calendar-01.json
new file mode 100644
index 0000000000..ae26b270f1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-01.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-02.json b/apps/www/public/r/styles/new-york-v4/calendar-02.json
new file mode 100644
index 0000000000..1de8d714ed
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-02.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-03.json b/apps/www/public/r/styles/new-york-v4/calendar-03.json
new file mode 100644
index 0000000000..6777fdaf50
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-03.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-04.json b/apps/www/public/r/styles/new-york-v4/calendar-04.json
new file mode 100644
index 0000000000..ae12a61461
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-04.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-05.json b/apps/www/public/r/styles/new-york-v4/calendar-05.json
new file mode 100644
index 0000000000..d64891b0f7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-05.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-06.json b/apps/www/public/r/styles/new-york-v4/calendar-06.json
new file mode 100644
index 0000000000..0826945ec3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-06.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-07.json b/apps/www/public/r/styles/new-york-v4/calendar-07.json
new file mode 100644
index 0000000000..0d7bfb1a8c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-07.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-08.json b/apps/www/public/r/styles/new-york-v4/calendar-08.json
new file mode 100644
index 0000000000..d5088b71f8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-08.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-09.json b/apps/www/public/r/styles/new-york-v4/calendar-09.json
new file mode 100644
index 0000000000..fe6a2830f9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-09.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-10.json b/apps/www/public/r/styles/new-york-v4/calendar-10.json
new file mode 100644
index 0000000000..314cca76a0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-10.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <CardAction>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => {\n              setMonth(new Date())\n              setDate(new Date())\n            }}\n          >\n            Today\n          </Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-11.json b/apps/www/public/r/styles/new-york-v4/calendar-11.json
new file mode 100644
index 0000000000..29a4e32507
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-11.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-12.json b/apps/www/public/r/styles/new-york-v4/calendar-12.json
new file mode 100644
index 0000000000..11ce1eb5e2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-12.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <CardAction>\n          <Select\n            value={locale}\n            onValueChange={(value) =>\n              setLocale(value as keyof typeof localizedStrings)\n            }\n          >\n            <SelectTrigger className=\"w-[100px]\">\n              <SelectValue placeholder=\"Language\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"es\">Español</SelectItem>\n              <SelectItem value=\"en\">English</SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-13.json b/apps/www/public/r/styles/new-york-v4/calendar-13.json
new file mode 100644
index 0000000000..121ef9abb1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-13.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger\n            id=\"dropdown\"\n            size=\"sm\"\n            className=\"bg-background w-full\"\n          >\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-14.json b/apps/www/public/r/styles/new-york-v4/calendar-14.json
new file mode 100644
index 0000000000..2508f75d75
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-14.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-15.json b/apps/www/public/r/styles/new-york-v4/calendar-15.json
new file mode 100644
index 0000000000..31c7c60a31
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-15.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-16.json b/apps/www/public/r/styles/new-york-v4/calendar-16.json
new file mode 100644
index 0000000000..1f660e5857
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-16.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 !pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-17.json b/apps/www/public/r/styles/new-york-v4/calendar-17.json
new file mode 100644
index 0000000000..4547a55a95
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-17.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(10.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex gap-2 border-t px-4 !pt-4 *:[div]:w-full\">\n        <div>\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div>\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-18.json b/apps/www/public/r/styles/new-york-v4/calendar-18.json
new file mode 100644
index 0000000000..04c58b7ee5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-18.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-19.json b/apps/www/public/r/styles/new-york-v4/calendar-19.json
new file mode 100644
index 0000000000..16eb47d187
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-19.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(9.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 !pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-20.json b/apps/www/public/r/styles/new-york-v4/calendar-20.json
new file mode 100644
index 0000000000..f5c631564e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-20.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute.toString().padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t px-6 !py-5 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-21.json b/apps/www/public/r/styles/new-york-v4/calendar-21.json
new file mode 100644
index 0000000000..8773d411e6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-21.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-22.json b/apps/www/public/r/styles/new-york-v4/calendar-22.json
new file mode 100644
index 0000000000..ca4aeed570
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-22.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-23.json b/apps/www/public/r/styles/new-york-v4/calendar-23.json
new file mode 100644
index 0000000000..838068b6c2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-23.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-24.json b/apps/www/public/r/styles/new-york-v4/calendar-24.json
new file mode 100644
index 0000000000..226c5041a8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-24.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-25.json b/apps/www/public/r/styles/new-york-v4/calendar-25.json
new file mode 100644
index 0000000000..18e56c8c28
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-25.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-26.json b/apps/www/public/r/styles/new-york-v4/calendar-26.json
new file mode 100644
index 0000000000..230a4460a3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-26.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-27.json b/apps/www/public/r/styles/new-york-v4/calendar-27.json
new file mode 100644
index 0000000000..0d62225511
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-27.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--color-primary)\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"flex flex-col border-b @md/card:grid\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <CardAction className=\"mt-2 @md/card:mt-0\">\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <CalendarIcon />\n                {range?.from && range?.to\n                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                  : \"June 2025\"}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n              <Calendar\n                className=\"w-full\"\n                mode=\"range\"\n                defaultMonth={range?.from}\n                selected={range}\n                onSelect={setRange}\n                disableNavigation\n                startMonth={range?.from}\n                fixedWeeks\n                showOutsideDays\n                disabled={{\n                  after: new Date(2025, 5, 31),\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-28.json b/apps/www/public/r/styles/new-york-v4/calendar-28.json
new file mode 100644
index 0000000000..ae149ae0c6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-28.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-29.json b/apps/www/public/r/styles/new-york-v4/calendar-29.json
new file mode 100644
index 0000000000..df3d574360
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-29.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-30.json b/apps/www/public/r/styles/new-york-v4/calendar-30.json
new file mode 100644
index 0000000000..1aaaac6a11
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-30.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-31.json b/apps/www/public/r/styles/new-york-v4/calendar-31.json
new file mode 100644
index 0000000000..03e2f971d6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-31.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 !pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-32.json b/apps/www/public/r/styles/new-york-v4/calendar-32.json
new file mode 100644
index 0000000000..f231548786
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-32.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-demo.json b/apps/www/public/r/styles/new-york-v4/calendar-demo.json
index bd7dc39a54..6e51dd8083 100644
--- a/apps/www/public/r/styles/new-york-v4/calendar-demo.json
+++ b/apps/www/public/r/styles/new-york-v4/calendar-demo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/calendar-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <div className=\"flex flex-col flex-wrap items-start gap-2 @md:flex-row\">\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border shadow-sm\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow-sm\"\n      captionLayout=\"dropdown\"\n    />\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-form.json b/apps/www/public/r/styles/new-york-v4/calendar-form.json
index b177e885df..62fabe3d69 100644
--- a/apps/www/public/r/styles/new-york-v4/calendar-form.json
+++ b/apps/www/public/r/styles/new-york-v4/calendar-form.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/calendar-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-hijri.json b/apps/www/public/r/styles/new-york-v4/calendar-hijri.json
new file mode 100644
index 0000000000..d317bd4cab
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-hijri.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-hijri",
+  "type": "registry:example",
+  "description": "A Persian calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, getDefaultClassNames } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function CalendarHijri() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar.json b/apps/www/public/r/styles/new-york-v4/calendar.json
index 3140aee12a..7b5d74cd85 100644
--- a/apps/www/public/r/styles/new-york-v4/calendar.json
+++ b/apps/www/public/r/styles/new-york-v4/calendar.json
@@ -3,7 +3,7 @@
   "name": "calendar",
   "type": "registry:ui",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row gap-2\",\n        month: \"flex flex-col gap-4\",\n        caption: \"flex justify-center pt-1 relative items-center w-full\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"flex items-center gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-x-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"size-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start:\n          \"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground\",\n        day_range_end:\n          \"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"size-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"size-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york-v4/date-picker-form.json b/apps/www/public/r/styles/new-york-v4/date-picker-form.json
index 1384c3989e..0fb3b0c5aa 100644
--- a/apps/www/public/r/styles/new-york-v4/date-picker-form.json
+++ b/apps/www/public/r/styles/new-york-v4/date-picker-form.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/date-picker-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york-v4/drawer.json b/apps/www/public/r/styles/new-york-v4/drawer.json
index 30db560e08..b3641635d0 100644
--- a/apps/www/public/r/styles/new-york-v4/drawer.json
+++ b/apps/www/public/r/styles/new-york-v4/drawer.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york/calendar-01.json b/apps/www/public/r/styles/new-york/calendar-01.json
new file mode 100644
index 0000000000..3429d8ff75
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-02.json b/apps/www/public/r/styles/new-york/calendar-02.json
new file mode 100644
index 0000000000..dbf49a6a42
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-03.json b/apps/www/public/r/styles/new-york/calendar-03.json
new file mode 100644
index 0000000000..9eac847c94
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-04.json b/apps/www/public/r/styles/new-york/calendar-04.json
new file mode 100644
index 0000000000..ac46925d13
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-05.json b/apps/www/public/r/styles/new-york/calendar-05.json
new file mode 100644
index 0000000000..1a3cc272a7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-06.json b/apps/www/public/r/styles/new-york/calendar-06.json
new file mode 100644
index 0000000000..3c93a8f865
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-07.json b/apps/www/public/r/styles/new-york/calendar-07.json
new file mode 100644
index 0000000000..8143508a20
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-08.json b/apps/www/public/r/styles/new-york/calendar-08.json
new file mode 100644
index 0000000000..1882fb4e2b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-09.json b/apps/www/public/r/styles/new-york/calendar-09.json
new file mode 100644
index 0000000000..64a29e68dc
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-10.json b/apps/www/public/r/styles/new-york/calendar-10.json
new file mode 100644
index 0000000000..d91ca5e115
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-11.json b/apps/www/public/r/styles/new-york/calendar-11.json
new file mode 100644
index 0000000000..16f7b18085
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-12.json b/apps/www/public/r/styles/new-york/calendar-12.json
new file mode 100644
index 0000000000..ea591262f4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-13.json b/apps/www/public/r/styles/new-york/calendar-13.json
new file mode 100644
index 0000000000..48686de333
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-14.json b/apps/www/public/r/styles/new-york/calendar-14.json
new file mode 100644
index 0000000000..08268bb603
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-15.json b/apps/www/public/r/styles/new-york/calendar-15.json
new file mode 100644
index 0000000000..4e0c8d11fd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-16.json b/apps/www/public/r/styles/new-york/calendar-16.json
new file mode 100644
index 0000000000..b9ed7abaeb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-17.json b/apps/www/public/r/styles/new-york/calendar-17.json
new file mode 100644
index 0000000000..ade5449c4a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-18.json b/apps/www/public/r/styles/new-york/calendar-18.json
new file mode 100644
index 0000000000..cbbeaa7e06
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-19.json b/apps/www/public/r/styles/new-york/calendar-19.json
new file mode 100644
index 0000000000..c514d38355
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-20.json b/apps/www/public/r/styles/new-york/calendar-20.json
new file mode 100644
index 0000000000..4429f6dd87
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-21.json b/apps/www/public/r/styles/new-york/calendar-21.json
new file mode 100644
index 0000000000..4e085b2e01
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-22.json b/apps/www/public/r/styles/new-york/calendar-22.json
new file mode 100644
index 0000000000..d9af6df607
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-23.json b/apps/www/public/r/styles/new-york/calendar-23.json
new file mode 100644
index 0000000000..a8d3e19af9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-24.json b/apps/www/public/r/styles/new-york/calendar-24.json
new file mode 100644
index 0000000000..2733e73977
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-25.json b/apps/www/public/r/styles/new-york/calendar-25.json
new file mode 100644
index 0000000000..92aa408dfe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-26.json b/apps/www/public/r/styles/new-york/calendar-26.json
new file mode 100644
index 0000000000..790ab1dd0f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-27.json b/apps/www/public/r/styles/new-york/calendar-27.json
new file mode 100644
index 0000000000..20781d5bf3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-28.json b/apps/www/public/r/styles/new-york/calendar-28.json
new file mode 100644
index 0000000000..7dd46474a7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-29.json b/apps/www/public/r/styles/new-york/calendar-29.json
new file mode 100644
index 0000000000..8abbeb587e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-30.json b/apps/www/public/r/styles/new-york/calendar-30.json
new file mode 100644
index 0000000000..db134b9b34
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-31.json b/apps/www/public/r/styles/new-york/calendar-31.json
new file mode 100644
index 0000000000..00f7278c51
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-32.json b/apps/www/public/r/styles/new-york/calendar-32.json
new file mode 100644
index 0000000000..610b102bc9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar.json b/apps/www/public/r/styles/new-york/calendar.json
index f754cfb8f6..568af25965 100644
--- a/apps/www/public/r/styles/new-york/calendar.json
+++ b/apps/www/public/r/styles/new-york/calendar.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/registry/default/blocks/calendar-01.tsx b/apps/www/registry/default/blocks/calendar-01.tsx
new file mode 100644
index 0000000000..7c254e7a0f
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-02.tsx b/apps/www/registry/default/blocks/calendar-02.tsx
new file mode 100644
index 0000000000..a3c937ecba
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-03.tsx b/apps/www/registry/default/blocks/calendar-03.tsx
new file mode 100644
index 0000000000..89de91fafb
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-04.tsx b/apps/www/registry/default/blocks/calendar-04.tsx
new file mode 100644
index 0000000000..86d58b8c98
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-05.tsx b/apps/www/registry/default/blocks/calendar-05.tsx
new file mode 100644
index 0000000000..b6a13b61c4
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-06.tsx b/apps/www/registry/default/blocks/calendar-06.tsx
new file mode 100644
index 0000000000..5c61050a69
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-07.tsx b/apps/www/registry/default/blocks/calendar-07.tsx
new file mode 100644
index 0000000000..3f46a659e0
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-08.tsx b/apps/www/registry/default/blocks/calendar-08.tsx
new file mode 100644
index 0000000000..93a90ff4e8
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-09.tsx b/apps/www/registry/default/blocks/calendar-09.tsx
new file mode 100644
index 0000000000..182d7f2bb9
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-10.tsx b/apps/www/registry/default/blocks/calendar-10.tsx
new file mode 100644
index 0000000000..592c66ded3
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-11.tsx b/apps/www/registry/default/blocks/calendar-11.tsx
new file mode 100644
index 0000000000..dfad509ae1
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-12.tsx b/apps/www/registry/default/blocks/calendar-12.tsx
new file mode 100644
index 0000000000..0e3dda9632
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-13.tsx b/apps/www/registry/default/blocks/calendar-13.tsx
new file mode 100644
index 0000000000..047d67fa6c
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-14.tsx b/apps/www/registry/default/blocks/calendar-14.tsx
new file mode 100644
index 0000000000..e1d53f1a7d
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-15.tsx b/apps/www/registry/default/blocks/calendar-15.tsx
new file mode 100644
index 0000000000..6fec6f59a0
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-16.tsx b/apps/www/registry/default/blocks/calendar-16.tsx
new file mode 100644
index 0000000000..d21aa9fcab
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-17.tsx b/apps/www/registry/default/blocks/calendar-17.tsx
new file mode 100644
index 0000000000..bd66aeb3d2
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-18.tsx b/apps/www/registry/default/blocks/calendar-18.tsx
new file mode 100644
index 0000000000..950983dfa3
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-19.tsx b/apps/www/registry/default/blocks/calendar-19.tsx
new file mode 100644
index 0000000000..c9bff184e8
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-20.tsx b/apps/www/registry/default/blocks/calendar-20.tsx
new file mode 100644
index 0000000000..e9ba34fc43
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-21.tsx b/apps/www/registry/default/blocks/calendar-21.tsx
new file mode 100644
index 0000000000..4762f22b32
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/default/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-22.tsx b/apps/www/registry/default/blocks/calendar-22.tsx
new file mode 100644
index 0000000000..b184684762
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-23.tsx b/apps/www/registry/default/blocks/calendar-23.tsx
new file mode 100644
index 0000000000..a1110c054a
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-24.tsx b/apps/www/registry/default/blocks/calendar-24.tsx
new file mode 100644
index 0000000000..19f1fd0d03
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-25.tsx b/apps/www/registry/default/blocks/calendar-25.tsx
new file mode 100644
index 0000000000..bf01d207c3
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-26.tsx b/apps/www/registry/default/blocks/calendar-26.tsx
new file mode 100644
index 0000000000..2032623348
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-27.tsx b/apps/www/registry/default/blocks/calendar-27.tsx
new file mode 100644
index 0000000000..ebc120422d
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-28.tsx b/apps/www/registry/default/blocks/calendar-28.tsx
new file mode 100644
index 0000000000..2cd72f75a1
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-29.tsx b/apps/www/registry/default/blocks/calendar-29.tsx
new file mode 100644
index 0000000000..22af360250
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-30.tsx b/apps/www/registry/default/blocks/calendar-30.tsx
new file mode 100644
index 0000000000..5cb30d9841
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-31.tsx b/apps/www/registry/default/blocks/calendar-31.tsx
new file mode 100644
index 0000000000..6c2c185df1
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-32.tsx b/apps/www/registry/default/blocks/calendar-32.tsx
new file mode 100644
index 0000000000..afd47c1497
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx
index b13169bec4..2d1d765776 100644
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -1,70 +1,210 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/default/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+import { Button, buttonVariants } from "@/registry/new-york/ui/button"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
         ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
-        ),
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
       }}
       {...props}
     />
   )
 }
-Calendar.displayName = "Calendar"
 
-export { Calendar }
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/www/registry/new-york/blocks/calendar-01.tsx b/apps/www/registry/new-york/blocks/calendar-01.tsx
new file mode 100644
index 0000000000..6ec892f267
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-02.tsx b/apps/www/registry/new-york/blocks/calendar-02.tsx
new file mode 100644
index 0000000000..ec4099fc80
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-03.tsx b/apps/www/registry/new-york/blocks/calendar-03.tsx
new file mode 100644
index 0000000000..fa06eb391f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-04.tsx b/apps/www/registry/new-york/blocks/calendar-04.tsx
new file mode 100644
index 0000000000..d3f823baf8
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-05.tsx b/apps/www/registry/new-york/blocks/calendar-05.tsx
new file mode 100644
index 0000000000..ec01627f23
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-06.tsx b/apps/www/registry/new-york/blocks/calendar-06.tsx
new file mode 100644
index 0000000000..9d8cc09c9d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-07.tsx b/apps/www/registry/new-york/blocks/calendar-07.tsx
new file mode 100644
index 0000000000..26651effb9
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-08.tsx b/apps/www/registry/new-york/blocks/calendar-08.tsx
new file mode 100644
index 0000000000..094f975b2d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-09.tsx b/apps/www/registry/new-york/blocks/calendar-09.tsx
new file mode 100644
index 0000000000..f46cb5b13e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-10.tsx b/apps/www/registry/new-york/blocks/calendar-10.tsx
new file mode 100644
index 0000000000..05e48d5300
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-11.tsx b/apps/www/registry/new-york/blocks/calendar-11.tsx
new file mode 100644
index 0000000000..10a58ba3cd
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-12.tsx b/apps/www/registry/new-york/blocks/calendar-12.tsx
new file mode 100644
index 0000000000..89e8b422e1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-13.tsx b/apps/www/registry/new-york/blocks/calendar-13.tsx
new file mode 100644
index 0000000000..fbe5c58f77
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-14.tsx b/apps/www/registry/new-york/blocks/calendar-14.tsx
new file mode 100644
index 0000000000..41be778b9f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-15.tsx b/apps/www/registry/new-york/blocks/calendar-15.tsx
new file mode 100644
index 0000000000..8031bd2ced
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-16.tsx b/apps/www/registry/new-york/blocks/calendar-16.tsx
new file mode 100644
index 0000000000..638ec8ff21
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-17.tsx b/apps/www/registry/new-york/blocks/calendar-17.tsx
new file mode 100644
index 0000000000..5ac8cbc4f0
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-18.tsx b/apps/www/registry/new-york/blocks/calendar-18.tsx
new file mode 100644
index 0000000000..d647923405
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-19.tsx b/apps/www/registry/new-york/blocks/calendar-19.tsx
new file mode 100644
index 0000000000..54a62dd7e9
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-20.tsx b/apps/www/registry/new-york/blocks/calendar-20.tsx
new file mode 100644
index 0000000000..2a2bb3f5eb
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-21.tsx b/apps/www/registry/new-york/blocks/calendar-21.tsx
new file mode 100644
index 0000000000..9016b91b8c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-22.tsx b/apps/www/registry/new-york/blocks/calendar-22.tsx
new file mode 100644
index 0000000000..fbba5c925a
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-23.tsx b/apps/www/registry/new-york/blocks/calendar-23.tsx
new file mode 100644
index 0000000000..2702cd90fd
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-24.tsx b/apps/www/registry/new-york/blocks/calendar-24.tsx
new file mode 100644
index 0000000000..02640d5936
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-25.tsx b/apps/www/registry/new-york/blocks/calendar-25.tsx
new file mode 100644
index 0000000000..5ed864df3e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-26.tsx b/apps/www/registry/new-york/blocks/calendar-26.tsx
new file mode 100644
index 0000000000..166cd46498
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-27.tsx b/apps/www/registry/new-york/blocks/calendar-27.tsx
new file mode 100644
index 0000000000..89c65876e2
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-28.tsx b/apps/www/registry/new-york/blocks/calendar-28.tsx
new file mode 100644
index 0000000000..40b63bc2e7
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-29.tsx b/apps/www/registry/new-york/blocks/calendar-29.tsx
new file mode 100644
index 0000000000..a08ffa1b1d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-30.tsx b/apps/www/registry/new-york/blocks/calendar-30.tsx
new file mode 100644
index 0000000000..05b5a9ae9f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-31.tsx b/apps/www/registry/new-york/blocks/calendar-31.tsx
new file mode 100644
index 0000000000..c4d3844f9e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-32.tsx b/apps/www/registry/new-york/blocks/calendar-32.tsx
new file mode 100644
index 0000000000..21c8f5e160
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx
index bf3185fc8f..2d1d765776 100644
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -1,76 +1,210 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+import { Button, buttonVariants } from "@/registry/new-york/ui/button"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
         ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
-        ),
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
       }}
       {...props}
     />
   )
 }
-Calendar.displayName = "Calendar"
 
-export { Calendar }
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/www/registry/registry-blocks.ts b/apps/www/registry/registry-blocks.ts
index f9cd06995f..8ef7eba65a 100644
--- a/apps/www/registry/registry-blocks.ts
+++ b/apps/www/registry/registry-blocks.ts
@@ -702,4 +702,614 @@ export const blocks: Registry["items"] = [
     ],
     categories: ["authentication", "login"],
   },
+  {
+    name: "calendar-01",
+    description: "A simple calendar.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-01.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-02",
+    description: "Multiple months with single selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-02.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-03",
+    description: "Multiple months with multiple selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-03.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-04",
+    description: "Single month with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-04.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-05",
+    description: "Multiple months with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-05.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-06",
+    description: "Range selection with minimum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-06.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-07",
+    description: "Range selection with minimum and maximum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-07.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-08",
+    description: "Calendar with disabled days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-08.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-09",
+    description: "Calendar with disabled weekends",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-09.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-10",
+    description: "Today button",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-10.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-11",
+    description: "Start and end of month",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-11.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-12",
+    description: "Localized calendar",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "select"],
+    files: [
+      {
+        path: "blocks/calendar-12.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-13",
+    description: "With Month and Year Dropdown",
+    type: "registry:block",
+    registryDependencies: ["calendar", "label", "select"],
+    files: [
+      {
+        path: "blocks/calendar-13.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-14",
+    description: "With Booked/Unavailable Days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-14.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-15",
+    description: "With Week Numbers",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-15.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-16",
+    description: "With time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-16.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-17",
+    description: "With time picker inline",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-17.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-18",
+    description: "Variable size",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-18.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-19",
+    description: "With presets",
+    type: "registry:block",
+    dependencies: ["date-fns"],
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-19.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-20",
+    description: "With time presets",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-20.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-21",
+    description: "Custom days and formatters",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-21.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-22",
+    description: "Date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-22.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-23",
+    description: "Date range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-23.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-24",
+    description: "Date and Time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-24.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-25",
+    description: "Date and Time range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-25.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-26",
+    description: "Date range picker with time",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-26.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-27",
+    description: "Chart filter",
+    type: "registry:block",
+    registryDependencies: ["calendar", "chart", "card", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-27.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-28",
+    description: "Input with date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-28.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-29",
+    description: "Natural language date picker",
+    type: "registry:block",
+    dependencies: ["chrono-node"],
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-29.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-30",
+    description: "With little-date",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-30.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-31",
+    description: "With event slots",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-31.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "700px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-32",
+    description: "Date picker in a drawer",
+    type: "registry:block",
+    registryDependencies: ["calendar", "button", "drawer"],
+    files: [
+      {
+        path: "blocks/calendar-32.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
 ]
diff --git a/apps/www/registry/registry-categories.ts b/apps/www/registry/registry-categories.ts
index 8687469fd0..5df55bae3a 100644
--- a/apps/www/registry/registry-categories.ts
+++ b/apps/www/registry/registry-categories.ts
@@ -19,6 +19,16 @@ export const registryCategories = [
     slug: "login",
     hidden: false,
   },
+  {
+    name: "Calendar",
+    slug: "calendar",
+    hidden: false,
+  },
+  {
+    name: "Date",
+    slug: "date",
+    hidden: true,
+  },
   {
     name: "Charts",
     slug: "charts",
diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index e522debd94..572434e619 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -114,7 +114,7 @@ export const ui: Registry["items"] = [
   {
     name: "calendar",
     type: "registry:ui",
-    dependencies: ["react-day-picker@8.10.1", "date-fns"],
+    dependencies: ["react-day-picker@latest", "date-fns"],
     registryDependencies: ["button"],
     files: [
       {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f993824595..407411f5de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -237,6 +237,9 @@ importers:
       change-case:
         specifier: ^5.4.4
         version: 5.4.4
+      chrono-node:
+        specifier: ^2.8.2
+        version: 2.8.2
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -273,6 +276,9 @@ importers:
       jotai:
         specifier: ^2.1.0
         version: 2.11.3(@types/react@19.1.2)(react@19.1.0)
+      little-date:
+        specifier: ^1.0.0
+        version: 1.0.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -295,8 +301,8 @@ importers:
         specifier: 19.1.0
         version: 19.1.0
       react-day-picker:
-        specifier: ^8.7.1
-        version: 8.10.1(date-fns@4.1.0)(react@19.1.0)
+        specifier: ^9.7.0
+        version: 9.7.0(react@19.1.0)
       react-dom:
         specifier: 19.1.0
         version: 19.1.0(react@19.1.0)
@@ -517,6 +523,9 @@ importers:
       change-case:
         specifier: ^5.4.4
         version: 5.4.4
+      chrono-node:
+        specifier: ^2.8.2
+        version: 2.8.2
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.1
@@ -550,6 +559,9 @@ importers:
       jotai:
         specifier: ^2.1.0
         version: 2.11.3(@types/react@18.3.18)(react@18.3.1)
+      little-date:
+        specifier: ^1.0.0
+        version: 1.0.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -572,8 +584,8 @@ importers:
         specifier: ^18.2.0
         version: 18.3.1
       react-day-picker:
-        specifier: ^8.7.1
-        version: 8.10.1(date-fns@2.30.0)(react@18.3.1)
+        specifier: ^9.7.0
+        version: 9.7.0(react@18.3.1)
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
@@ -1118,6 +1130,9 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@date-fns/tz@1.2.0':
+    resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
+
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
@@ -4806,6 +4821,10 @@ packages:
     peerDependencies:
       devtools-protocol: '*'
 
+  chrono-node@2.8.2:
+    resolution: {integrity: sha512-7BJ6TRHs4sFtOSsTISWXGKjg7C70wD+NU+44uA6euGnbvZnECvgzUv+5TS9sICta2sBQWej4UYy8XAg4W9E7rQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -5119,6 +5138,9 @@ packages:
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
@@ -5126,6 +5148,9 @@ packages:
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -6839,6 +6864,10 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  little-date@1.0.0:
+    resolution: {integrity: sha512-41T/ktcwPzxC0OJ8E3wmaK0E1DL/QNR3n30kB9Dw6Ni6Eud24It8LZm70jK8lvDd+Mg+961fzKDcF6SQRL25cQ==}
+    engines: {node: '>=10'}
+
   load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -8027,11 +8056,11 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-day-picker@8.10.1:
-    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+  react-day-picker@9.7.0:
+    resolution: {integrity: sha512-urlK4C9XJZVpQ81tmVgd2O7lZ0VQldZeHzNejbwLWZSkzHH498KnArT0EHNfKBOWwKc935iMLGZdxXPRISzUxQ==}
+    engines: {node: '>=18'}
     peerDependencies:
-      date-fns: ^2.28.0 || ^3.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: '>=16.8.0'
 
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
@@ -10045,7 +10074,7 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.7.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.7.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.7.3))(typescript@5.7.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.7.3))(ts-node@10.9.2(@types/node@20.17.16)(typescript@5.7.3))(typescript@5.7.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -10201,6 +10230,8 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@date-fns/tz@1.2.0': {}
+
   '@dnd-kit/accessibility@3.1.1(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -14358,6 +14389,10 @@ snapshots:
       mitt: 3.0.1
       zod: 3.23.8
 
+  chrono-node@2.8.2:
+    dependencies:
+      dayjs: 1.11.13
+
   ci-info@3.9.0: {}
 
   class-variance-authority@0.7.1:
@@ -14530,7 +14565,7 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.7.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.7.3))(typescript@5.7.3):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.7.3))(ts-node@10.9.2(@types/node@20.17.16)(typescript@5.7.3))(typescript@5.7.3):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.7.3)
@@ -14688,12 +14723,16 @@ snapshots:
 
   dataloader@1.4.0: {}
 
+  date-fns-jalali@4.1.0-0: {}
+
   date-fns@2.30.0:
     dependencies:
       '@babel/runtime': 7.26.7
 
   date-fns@4.1.0: {}
 
+  dayjs@1.11.13: {}
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -17037,6 +17076,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  little-date@1.0.0:
+    dependencies:
+      date-fns: 2.30.0
+
   load-tsconfig@0.2.5: {}
 
   locate-path@5.0.0:
@@ -18617,14 +18660,18 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-day-picker@8.10.1(date-fns@2.30.0)(react@18.3.1):
+  react-day-picker@9.7.0(react@18.3.1):
     dependencies:
-      date-fns: 2.30.0
+      '@date-fns/tz': 1.2.0
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
       react: 18.3.1
 
-  react-day-picker@8.10.1(date-fns@4.1.0)(react@19.1.0):
+  react-day-picker@9.7.0(react@19.1.0):
     dependencies:
+      '@date-fns/tz': 1.2.0
       date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
       react: 19.1.0
 
   react-dom@18.3.1(react@18.3.1):