docs: improve Calendar styling (#826)

Co-authored-by: Davis SHYAKA <[email protected]>

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>

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",

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"

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"

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"

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"