calender docs and registry build

Author: ariflogs

content/docs/components/calendar.mdx

@@ -7,3 +7,33 @@ lastUpdated: 14 Nov, 2025
 <ComponentShowcase name="calendar-style-default" />
 <br />
 <br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/calendar" />
+  <ComponentInstall.Manual>
+  
+#### 1. Install dependencies:
+
+```sh
+npm install react-day-picker lucide-react
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="calendar" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="calendar-style-default" />

public/r/button.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/retroui/Button.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nconst buttonVariants = cva(\n  \"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\",\n        secondary:\n          \"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\",\n        outline:\n          \"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\",\n        link: \"bg-transparent hover:underline\",\n      },\n      size: {\n        sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n        md: \"px-4 py-1.5 text-base\",\n        lg: \"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\",\n        icon: \"p-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      asChild = false,\n      ...props\n    }: IButtonProps,\n    forwardedRef,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const buttonVariants = cva(\n  \"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\",\n        secondary:\n          \"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\",\n        outline:\n          \"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\",\n        link: \"bg-transparent hover:underline\",\n        ghost: \"bg-transparent hover:bg-accent\"\n      },\n      size: {\n        sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n        md: \"px-4 py-1.5 text-base\",\n        lg: \"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\",\n        icon: \"p-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      asChild = false,\n      ...props\n    }: IButtonProps,\n    forwardedRef,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";",
       "type": "registry:component",
       "target": "components/retroui/Button.tsx"
     }

public/r/calendar.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:component",
+  "title": "Calendar",
+  "description": "A customizable calendar component for showing dates. 📝",
+  "dependencies": [
+    "react-day-picker",
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "components/retroui/Calendar.tsx",
+      "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 \"@/components/retroui/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 w-full outline-2 shadow-md 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 font-head\", 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-8 p-2 border-2 rounded select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 p-2 border-2 rounded 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:outline-ring outline outline-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-base\"\n            : \"rounded-none 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 outline-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 font-normal text-sm 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 [&:last-child[data-selected=true]_button]:rounded-r group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l\",\n          defaultClassNames.day\n        ),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground opacity-80\",\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        \"font-sans flex justify-center items-center data-[selected-single=true]:shadow-md data-[selected-single=true]:outline-2 outline-border data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-secondary data-[range-middle=true]:hover:text-secondary-foreground data-[range-middle=true]:text-secondary-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-1 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-[2px] data-[range-end=true]:rounded-none data-[range-end=true]:rounded-none data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-none [&>span]:text-xs\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }",
+      "type": "registry:component",
+      "target": "components/retroui/Calendar.tsx"
+    },
+    {
+      "path": "components/retroui/Button.tsx",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const buttonVariants = cva(\n  \"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\",\n        secondary:\n          \"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\",\n        outline:\n          \"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\",\n        link: \"bg-transparent hover:underline\",\n        ghost: \"bg-transparent hover:bg-accent\"\n      },\n      size: {\n        sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n        md: \"px-4 py-1.5 text-base\",\n        lg: \"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\",\n        icon: \"p-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      asChild = false,\n      ...props\n    }: IButtonProps,\n    forwardedRef,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";",
+      "type": "registry:component",
+      "target": "components/retroui/Button.tsx"
+    }
+  ]
+}

public/r/sonner.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "components/retroui/Sonner.tsx",
-      "content": "\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      toastOptions={{\n        classNames: {\n          toast:\n            \"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative\",\n          description:\n            \"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow border-2 ml-auto h-fit min-w-fit\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow border-2 ml-auto h-fit min-w-fit\",\n          title: \"ml-2 font-sans\",\n          closeButton:\n            \"absolute bg-background -top-1 -left-1 rounded-full p-0.5\",\n        },\n        unstyled: true,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n",
+      "content": "\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      toastOptions={{\n        classNames: {\n          toast:\n            \"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative\",\n          description:\n            \"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit\",\n          title: \"ml-2 font-sans\",\n          closeButton:\n            \"absolute bg-background -top-1 -left-1 rounded-full p-0.5\",\n        },\n        unstyled: true,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n",
       "type": "registry:component",
       "target": "components/retroui/Sonner.tsx"
     }