From e65f0a23263b213c4aa64617cdfaef4deadfd650 Mon Sep 17 00:00:00 2001
From: malcodeman <26983729+malcodeman@users.noreply.github.com>
Date: Wed, 4 Feb 2026 23:23:20 +0100
Subject: [PATCH] feat: adds dialog size prop

---
 src/hygge-ui/dialog.tsx               | 51 ++++++++++++++++---
 src/routes/docs.components.dialog.tsx | 73 ++++++++++++++++-----------
 2 files changed, 87 insertions(+), 37 deletions(-)

diff --git a/src/hygge-ui/dialog.tsx b/src/hygge-ui/dialog.tsx
index 3987770..20195d5 100644
--- a/src/hygge-ui/dialog.tsx
+++ b/src/hygge-ui/dialog.tsx
@@ -1,10 +1,47 @@
 import { Dialog as ArkDialog, Portal } from "@ark-ui/react";
+import { createContext, useContext } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { LuX } from "react-icons/lu";
 import { cn } from "./cn";
 import { Button } from "./button";
 
-export function DialogRoot(props: ArkDialog.RootProps) {
-  return <ArkDialog.Root {...props} />;
+const dialogContentVariants = cva(
+  "bg-bg-default relative w-full rounded-lg shadow-[0_0_0_1px_#E9E8E6] dark:shadow-[0_0_0_1px_#2a2a28]",
+  {
+    variants: {
+      size: {
+        xs: "max-w-sm",
+        sm: "max-w-md",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        cover: "max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)]",
+        full: "h-dvh w-screen max-w-screen rounded-none!",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+const DialogContext = createContext<VariantProps<typeof dialogContentVariants>>(
+  {
+    size: "md",
+  },
+);
+
+type DialogRootProps = VariantProps<typeof dialogContentVariants> &
+  ArkDialog.RootProps;
+
+export function DialogRoot(props: DialogRootProps) {
+  const { size, ...rest } = props;
+
+  return (
+    <DialogContext.Provider value={{ size }}>
+      <ArkDialog.Root {...rest} />
+    </DialogContext.Provider>
+  );
 }
 
 export function DialogTrigger(props: ArkDialog.TriggerProps) {
@@ -17,6 +54,7 @@ type DialogContentProps = {
 
 export function DialogContent(props: DialogContentProps) {
   const { showCloseTrigger = false, className, children, ...rest } = props;
+  const { size } = useContext(DialogContext);
 
   return (
     <Portal>
@@ -32,10 +70,7 @@ export function DialogContent(props: DialogContentProps) {
       >
         <ArkDialog.Content
           {...rest}
-          className={cn(
-            "bg-bg-default relative w-full max-w-lg rounded-lg shadow-[0_0_0_1px_#E9E8E6] dark:shadow-[0_0_0_1px_#2a2a28]",
-            className,
-          )}
+          className={cn(dialogContentVariants({ size }), className)}
         >
           {children}
           {showCloseTrigger ? (
@@ -43,7 +78,7 @@ export function DialogContent(props: DialogContentProps) {
               asChild
               className="absolute top-1 right-1 cursor-pointer"
             >
-              <Button variant="ghost">
+              <Button variant="ghost" size="xs">
                 <LuX size={16} />
               </Button>
             </ArkDialog.CloseTrigger>
@@ -71,7 +106,7 @@ export function DialogDescription(props: ArkDialog.DescriptionProps) {
   return (
     <ArkDialog.Description
       {...rest}
-      className={cn("text-fg-muted text-sm/6 font-semibold", className)}
+      className={cn("text-fg-muted text-sm/6", className)}
     />
   );
 }
diff --git a/src/routes/docs.components.dialog.tsx b/src/routes/docs.components.dialog.tsx
index 1dd0255..23a7902 100644
--- a/src/routes/docs.components.dialog.tsx
+++ b/src/routes/docs.components.dialog.tsx
@@ -13,6 +13,8 @@ import {
 import { createFileRoute } from "@tanstack/react-router";
 import { PageHeader } from "app/components/page-header";
 import { PagePreviewCodeTabs } from "app/components/page-preview-code-tabs";
+import { Heading } from "hygge-ui/heading";
+import { Code, Text } from "hygge-ui/text";
 
 export const Route = createFileRoute("/docs/components/dialog")({
   component: DialogPage,
@@ -33,15 +35,14 @@ function DialogPage() {
         description="Used to display a dialog prompt."
         githubLink="https://github.com/malcodeman/hygge-ui/blob/main/src/components/dialog.tsx"
         className="mb-2"
+        verified
       />
       <PagePreviewCodeTabs
         preview={
           <DialogRoot>
-            <div>
-              <DialogTrigger asChild>
-                <Button variant="outline">Open dialog</Button>
-              </DialogTrigger>
-            </div>
+            <DialogTrigger asChild>
+              <Button variant="outline">Open dialog</Button>
+            </DialogTrigger>
             <DialogContent showCloseTrigger>
               <DialogHeader>
                 <DialogTitle>Dialog Title</DialogTitle>
@@ -61,30 +62,44 @@ function DialogPage() {
             </DialogContent>
           </DialogRoot>
         }
-        code={`<DialogRoot>
-  <div>
-    <DialogTrigger asChild>
-      <Button variant="outline">Open dialog</Button>
-    </DialogTrigger>
-  </div>
-  <DialogContent showCloseTrigger>
-    <DialogHeader>
-      <DialogTitle>Dialog Title</DialogTitle>
-    </DialogHeader>
-    <DialogBody>
-      <DialogDescription>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </DialogDescription>
-    </DialogBody>
-    <DialogFooter>
-      <DialogCloseTrigger asChild>
-        <Button variant="outline">Cancel</Button>
-      </DialogCloseTrigger>
-      <Button>Save</Button>
-    </DialogFooter>
-  </DialogContent>
-</DialogRoot>`}
+        code={``}
+      />
+      <Heading level={2} className="mt-10 mb-2">
+        Examples
+      </Heading>
+      <Heading level={3} size="lg" className="mb-2">
+        Error text
+      </Heading>
+      <Text className="mb-2">
+        Pass the <Code>size</Code> prop to change the size of the dialog
+        component.
+      </Text>
+      <PagePreviewCodeTabs
+        preview={
+          <DialogRoot size="xs">
+            <DialogTrigger asChild>
+              <Button variant="outline">Open dialog</Button>
+            </DialogTrigger>
+            <DialogContent showCloseTrigger>
+              <DialogHeader>
+                <DialogTitle>Dialog Title</DialogTitle>
+              </DialogHeader>
+              <DialogBody>
+                <DialogDescription>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </DialogDescription>
+              </DialogBody>
+              <DialogFooter>
+                <DialogCloseTrigger asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogCloseTrigger>
+                <Button>Save</Button>
+              </DialogFooter>
+            </DialogContent>
+          </DialogRoot>
+        }
+        code={``}
       />
     </>
   );