From 23dd26d67a02ff9c4c8b6927819d861633051576 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Mon, 26 Feb 2024 19:12:05 +0200
Subject: [PATCH] docs: improve Calendar styling

---
 .../routes/examples/mail/(components)/mail-display.svelte   | 4 +++-
 apps/www/static/registry/index.json                         | 1 +
 apps/www/static/registry/styles/default-js/drawer.json      | 6 +++++-
 apps/www/static/registry/styles/default/drawer.json         | 6 +++++-
 apps/www/static/registry/styles/new-york-js/drawer.json     | 6 +++++-
 apps/www/static/registry/styles/new-york/drawer.json        | 6 +++++-
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/routes/examples/mail/(components)/mail-display.svelte b/apps/www/src/routes/examples/mail/(components)/mail-display.svelte
index f255e5a56..f418065ce 100644
--- a/apps/www/src/routes/examples/mail/(components)/mail-display.svelte
+++ b/apps/www/src/routes/examples/mail/(components)/mail-display.svelte
@@ -126,7 +126,9 @@
 								</Button>
 							</div>
 						</div>
-						<Calendar bind:value={todayDate} initialFocus class="p-2" />
+						<div class="p-2">
+							<Calendar bind:value={todayDate} initialFocus />
+						</div>
 					</Popover.Content>
 				</Popover.Root>
 				<Tooltip.Content>Snooze</Tooltip.Content>
diff --git a/apps/www/static/registry/index.json b/apps/www/static/registry/index.json
index 5b84133d5..8e8c6b074 100644
--- a/apps/www/static/registry/index.json
+++ b/apps/www/static/registry/index.json
@@ -253,6 +253,7 @@
 			"ui/drawer/drawer-description.svelte",
 			"ui/drawer/drawer-footer.svelte",
 			"ui/drawer/drawer-header.svelte",
+			"ui/drawer/drawer-nested.svelte",
 			"ui/drawer/drawer-overlay.svelte",
 			"ui/drawer/drawer-title.svelte",
 			"ui/drawer/drawer.svelte",
diff --git a/apps/www/static/registry/styles/default-js/drawer.json b/apps/www/static/registry/styles/default-js/drawer.json
index c368c49bd..c78894d29 100644
--- a/apps/www/static/registry/styles/default-js/drawer.json
+++ b/apps/www/static/registry/styles/default-js/drawer.json
@@ -21,6 +21,10 @@
 			"name": "drawer-header.svelte",
 			"content": "<script>\n\timport { cn } from \"$lib/utils\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div\n\tbind:this={el}\n\tclass={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
 		},
+		{
+			"name": "drawer-nested.svelte",
+			"content": "<script>\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\texport let shouldScaleBackground = true;\n\texport let open = false;\n\texport let activeSnapPoint = undefined;\n</script>\n\n<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>\n\t<slot />\n</DrawerPrimitive.NestedRoot>\n"
+		},
 		{
 			"name": "drawer-overlay.svelte",
 			"content": "<script>\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\timport { cn } from \"$lib/utils\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<DrawerPrimitive.Overlay\n\tbind:el\n\tclass={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</DrawerPrimitive.Overlay>\n"
@@ -35,7 +39,7 @@
 		},
 		{
 			"name": "index.js",
-			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\nexport {\n\tRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
+			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\nimport NestedRoot from \"./drawer-nested.svelte\";\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\nexport {\n\tRoot,\n\tNestedRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tNestedRoot as DrawerNestedRoot,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
 		}
 	],
 	"type": "components:ui"
diff --git a/apps/www/static/registry/styles/default/drawer.json b/apps/www/static/registry/styles/default/drawer.json
index 173dc84e0..7a73cad26 100644
--- a/apps/www/static/registry/styles/default/drawer.json
+++ b/apps/www/static/registry/styles/default/drawer.json
@@ -21,6 +21,10 @@
 			"name": "drawer-header.svelte",
 			"content": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLDivElement> & {\n\t\tel?: HTMLDivElement;\n\t};\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<div\n\tbind:this={el}\n\tclass={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
 		},
+		{
+			"name": "drawer-nested.svelte",
+			"content": "<script lang=\"ts\">\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\n\ttype $$Props = DrawerPrimitive.Props;\n\texport let shouldScaleBackground: $$Props[\"shouldScaleBackground\"] = true;\n\texport let open: $$Props[\"open\"] = false;\n\texport let activeSnapPoint: $$Props[\"activeSnapPoint\"] = undefined;\n</script>\n\n<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>\n\t<slot />\n</DrawerPrimitive.NestedRoot>\n"
+		},
 		{
 			"name": "drawer-overlay.svelte",
 			"content": "<script lang=\"ts\">\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\timport { cn } from \"$lib/utils\";\n\n\ttype $$Props = DrawerPrimitive.OverlayProps;\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<DrawerPrimitive.Overlay\n\tbind:el\n\tclass={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</DrawerPrimitive.Overlay>\n"
@@ -35,7 +39,7 @@
 		},
 		{
 			"name": "index.ts",
-			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\n\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\n\nexport {\n\tRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
+			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\nimport NestedRoot from \"./drawer-nested.svelte\";\n\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\n\nexport {\n\tRoot,\n\tNestedRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\n\t//\n\tRoot as Drawer,\n\tNestedRoot as DrawerNestedRoot,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
 		}
 	],
 	"type": "components:ui"
diff --git a/apps/www/static/registry/styles/new-york-js/drawer.json b/apps/www/static/registry/styles/new-york-js/drawer.json
index c368c49bd..c78894d29 100644
--- a/apps/www/static/registry/styles/new-york-js/drawer.json
+++ b/apps/www/static/registry/styles/new-york-js/drawer.json
@@ -21,6 +21,10 @@
 			"name": "drawer-header.svelte",
 			"content": "<script>\n\timport { cn } from \"$lib/utils\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div\n\tbind:this={el}\n\tclass={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
 		},
+		{
+			"name": "drawer-nested.svelte",
+			"content": "<script>\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\texport let shouldScaleBackground = true;\n\texport let open = false;\n\texport let activeSnapPoint = undefined;\n</script>\n\n<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>\n\t<slot />\n</DrawerPrimitive.NestedRoot>\n"
+		},
 		{
 			"name": "drawer-overlay.svelte",
 			"content": "<script>\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\timport { cn } from \"$lib/utils\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<DrawerPrimitive.Overlay\n\tbind:el\n\tclass={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</DrawerPrimitive.Overlay>\n"
@@ -35,7 +39,7 @@
 		},
 		{
 			"name": "index.js",
-			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\nexport {\n\tRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
+			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\nimport NestedRoot from \"./drawer-nested.svelte\";\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\nexport {\n\tRoot,\n\tNestedRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tNestedRoot as DrawerNestedRoot,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
 		}
 	],
 	"type": "components:ui"
diff --git a/apps/www/static/registry/styles/new-york/drawer.json b/apps/www/static/registry/styles/new-york/drawer.json
index 173dc84e0..8ca8f765a 100644
--- a/apps/www/static/registry/styles/new-york/drawer.json
+++ b/apps/www/static/registry/styles/new-york/drawer.json
@@ -21,6 +21,10 @@
 			"name": "drawer-header.svelte",
 			"content": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLDivElement> & {\n\t\tel?: HTMLDivElement;\n\t};\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<div\n\tbind:this={el}\n\tclass={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
 		},
+		{
+			"name": "drawer-nested.svelte",
+			"content": "<script lang=\"ts\">\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\n\ttype $$Props = DrawerPrimitive.Props;\n\texport let shouldScaleBackground: $$Props[\"shouldScaleBackground\"] = true;\n\texport let open: $$Props[\"open\"] = false;\n\texport let activeSnapPoint: $$Props[\"activeSnapPoint\"] = undefined;\n</script>\n\n<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>\n\t<slot />\n</DrawerPrimitive.NestedRoot>\n"
+		},
 		{
 			"name": "drawer-overlay.svelte",
 			"content": "<script lang=\"ts\">\n\timport { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\timport { cn } from \"$lib/utils\";\n\n\ttype $$Props = DrawerPrimitive.OverlayProps;\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<DrawerPrimitive.Overlay\n\tbind:el\n\tclass={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</DrawerPrimitive.Overlay>\n"
@@ -35,7 +39,7 @@
 		},
 		{
 			"name": "index.ts",
-			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\n\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\n\nexport {\n\tRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
+			"content": "import { Drawer as DrawerPrimitive } from \"vaul-svelte\";\n\nimport Root from \"./drawer.svelte\";\nimport Content from \"./drawer-content.svelte\";\nimport Description from \"./drawer-description.svelte\";\nimport Overlay from \"./drawer-overlay.svelte\";\nimport Footer from \"./drawer-footer.svelte\";\nimport Header from \"./drawer-header.svelte\";\nimport Title from \"./drawer-title.svelte\";\nimport NestedRoot from \"./drawer-nested.svelte\";\n\nconst Trigger = DrawerPrimitive.Trigger;\nconst Portal = DrawerPrimitive.Portal;\nconst Close = DrawerPrimitive.Close;\n\nexport {\n\tRoot,\n\tNestedRoot,\n\tContent,\n\tDescription,\n\tOverlay,\n\tFooter,\n\tHeader,\n\tTitle,\n\tTrigger,\n\tPortal,\n\tClose,\n\t//\n\tRoot as Drawer,\n\tNestedRoot as DrawerNestedRoot,\n\tContent as DrawerContent,\n\tDescription as DrawerDescription,\n\tOverlay as DrawerOverlay,\n\tFooter as DrawerFooter,\n\tHeader as DrawerHeader,\n\tTitle as DrawerTitle,\n\tTrigger as DrawerTrigger,\n\tPortal as DrawerPortal,\n\tClose as DrawerClose,\n};\n"
 		}
 	],
 	"type": "components:ui"