fix: calendar

apps/www/content/docs/components/calendar.mdx

@@ -7,3 +7,52 @@ links:
   api: https://react-day-picker.js.org/
 ---
 
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+<TabsTrigger value="cli">CLI</TabsTrigger>
+<TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add calendar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Install the following dependencies:
+
+```bash
+npm install react-day-picker date-fns
+```
+
+</Step>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="calendar" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>

apps/www/public/registry/index.json

@@ -189,7 +189,23 @@
       "plate-ui/date-element.tsx"
     ],
     "name": "date-element",
-    "registryDependencies": [],
+    "registryDependencies": [
+      "calendar"
+    ],
+    "type": "components:plate-ui"
+  },
+  {
+    "dependencies": [
+      "react-day-picker",
+      "date-fns"
+    ],
+    "files": [
+      "plate-ui/calendar.tsx"
+    ],
+    "name": "calendar",
+    "registryDependencies": [
+      "button"
+    ],
     "type": "components:plate-ui"
   },
   {

apps/www/public/registry/styles/default/calendar.json

@@ -0,0 +1,17 @@
+{
+  "dependencies": [
+    "react-day-picker",
+    "date-fns"
+  ],
+  "files": [
+    {
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\n\nimport { cn } from '@udecode/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { buttonVariants } from './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      className={cn('p-3', className)}\n      classNames={{\n        caption: 'flex justify-center pt-1 relative items-center',\n        caption_label: 'text-sm font-medium',\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          'size-9 p-0 font-normal aria-selected:opacity-100'\n        ),\n        day_disabled: 'text-muted-foreground opacity-50',\n        day_hidden: 'invisible',\n        day_outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n        day_range_end: 'day-range-end',\n        day_range_middle:\n          'aria-selected:bg-accent aria-selected:text-accent-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        head_cell:\n          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',\n        head_row: 'flex',\n        month: 'space-y-4',\n        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',\n        nav: 'space-x-1 flex items-center',\n        nav_button: cn(\n          buttonVariants({ variant: 'outline' }),\n          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'\n        ),\n        nav_button_next: 'absolute right-1',\n        nav_button_previous: 'absolute left-1',\n        row: 'flex w-full mt-2',\n        table: 'w-full border-collapse space-y-1',\n        ...classNames,\n      }}\n      components={{\n        IconLeft: () => <ChevronLeft className=\"size-4\" />,\n        IconRight: () => <ChevronRight className=\"size-4\" />,\n      }}\n      showOutsideDays={showOutsideDays}\n      {...props}\n    />\n  );\n}\n\nCalendar.displayName = 'Calendar';\n\nexport { Calendar };\n",
+      "name": "calendar.tsx"
+    }
+  ],
+  "name": "calendar",
+  "registryDependencies": [
+    "button"
+  ],
+  "type": "components:plate-ui"
+}

apps/www/public/registry/styles/default/date-element.json

@@ -9,6 +9,8 @@
     }
   ],
   "name": "date-element",
-  "registryDependencies": [],
+  "registryDependencies": [
+    "calendar"
+  ],
   "type": "components:plate-ui"
 }

apps/www/src/__registry__/index.tsx

@@ -311,12 +311,21 @@ export const Index: Record<string, any> = {
     'date-element': {
       name: 'date-element',
       type: 'components:plate-ui',
-      registryDependencies: [],
+      registryDependencies: ["calendar"],
       files: ['registry/default/plate-ui/date-element.tsx'],
       category: "undefined",
       subcategory: "undefined",
       component: React.lazy(() => import('@/registry/default/plate-ui/date-element')),
     },
+    'calendar': {
+      name: 'calendar',
+      type: 'components:plate-ui',
+      registryDependencies: ["button"],
+      files: ['registry/default/plate-ui/calendar.tsx'],
+      category: "undefined",
+      subcategory: "undefined",
+      component: React.lazy(() => import('@/registry/default/plate-ui/calendar')),
+    },
     'button': {
       name: 'button',
       type: 'components:plate-ui',

apps/www/src/registry/ui.ts

@@ -137,7 +137,14 @@ export const ui: Registry = [
     dependencies: ['@udecode/plate-date'],
     files: ['plate-ui/date-element.tsx'],
     name: 'date-element',
-    registryDependencies: [],
+    registryDependencies: ['calendar'],
+    type: 'components:plate-ui',
+  },
+  {
+    dependencies: ['react-day-picker', 'date-fns'],
+    files: ['plate-ui/calendar.tsx'],
+    name: 'calendar',
+    registryDependencies: ['button'],
     type: 'components:plate-ui',
   },
   {