feat(components): add dialog component

apps/docs/src/config/sidebarConfig.ts

@@ -116,6 +116,11 @@ export const sidebarConfig: DocsConfig = {
           label: "Checkbox Group",
           href: "/components/checkbox-group",
         },
+        {
+          label: "Dialog",
+          href: "/components/dialog",
+          new: true,
+        },
         {
           label: "Dropdown Menu",
           href: "/components/dropdown-menu",

apps/docs/src/content/components/dialog.mdx

@@ -0,0 +1,115 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+links:
+  source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Dialog/Dialog.tsx
+  radix: https://www.radix-ui.com/docs/primitives/components/dialog
+---
+
+
+<PreviewComponent name="dialog/preview" />
+
+### Usage
+
+```tsx
+import { Dialog } from "@lemonsqueezy/wedges";
+```
+
+```tsx showLineNumbers
+<Dialog
+  open={open}
+  title="Dialog Title"
+  description="Dialog Description"
+>
+  Dialog content goes here.
+</Dialog>
+```
+
+For more advanced usage, you can use the Dialog.Root component to compose your own Dialog. These components include pre-defined styles and accessiblity features.
+
+```tsx showLineNumbers
+<Dialog.Root>
+  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Dialog Title</Dialog.Title>
+      <Dialog.Description>Dialog Description</Dialog.Description>
+    </Dialog.Header>
+
+    Dialog content goes here.
+
+    <Dialog.Footer>
+      Dialog footer goes here.
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+### API Reference
+
+#### Dialog
+The Wedges component of the Dialog. In most cases this is the only Dialog component you will need to use.
+
+<PropsTable
+  content={[
+    [{ value: "open" }, { value: "boolean" }, { value: "false" }],
+    [{ value: "defaultOpen" }, { value: "boolean" }, { value: "false" }],
+    [{ value: "onOpenChange" }, { value: "(open: boolean) => void" }, {}],
+    [{ value: "title" }, { value: "ReactNode" }, {}],
+    [{ value: "description" }, { value: "ReactNode" }, {}],
+    [{ value: "size" }, { value: '"sm" | "md" | "lg" | "xl"' }, { value: '"md"' }],
+    [{ value: "container" }, { value: "HTMLElement" }, { value: "document.body" }],
+  ]}
+/>
+
+#### Dialog.Content
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#content" target="_blank" rel='nofollow noreferrer'>Radix Dialog Content</a> primitive with custom configuration.
+
+<PropsTable
+  content={[
+    [{ value: "size" }, { value: '"sm" | "md" | "lg" | "xl"' }, { value: '"md"' }],
+  ]}
+/>
+
+#### Dialog.Header
+
+<PropsTable
+  content={[
+    [{ value: "title" }, { value: "ReactNode" }, {}],
+    [{ value: "description" }, { value: "ReactNode" }, {}],
+  ]}
+/>
+
+#### Dialog.Root
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#root" target="_blank" rel='nofollow noreferrer'>Radix Dialog Root</a> primitive.
+
+#### Dialog.Overlay
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#overlay" target="_blank" rel='nofollow noreferrer'>Radix Dialog Overlay</a> primitive.
+
+#### Dialog.Title
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#title" target="_blank" rel='nofollow noreferrer'>Radix Dialog Title</a> primitive.
+
+#### Dialog.Description
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#description" target="_blank" rel='nofollow noreferrer'>Radix Dialog Description</a> primitive.
+
+#### Dialog.Trigger
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#trigger" target="_blank" rel='nofollow noreferrer'>Radix Dialog Trigger</a> primitive.
+
+#### Dialog.Footer
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#footer" target="_blank" rel='nofollow noreferrer'>Radix Dialog Footer</a> primitive.
+
+#### Dialog.Close
+
+Extends the <a href="https://www.radix-ui.com/primitives/docs/components/dialog#close" target="_blank" rel='nofollow noreferrer'>Radix Dialog Close</a> primitive.
+
+### Examples
+
+<PreviewComponent name="dialog/example-1" />
+<PreviewComponent name="dialog/example-2" />

apps/docs/src/examples/dialog/example-1.tsx

@@ -0,0 +1,30 @@
+import { useRef } from "react";
+import { Button, Dialog } from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  // You most likely don't need to use `containerRef` in your implementation. This is just for preview.
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={containerRef}>
+      <Dialog.Root>
+        <Dialog.Trigger asChild>
+          <Button>Open Dialog</Button>
+        </Dialog.Trigger>
+
+        <Dialog.Content className="text-left" container={containerRef.current}>
+          <Dialog.Header>
+            <Dialog.Title>Dialog Custom Close</Dialog.Title>
+            <Dialog.Description>Dialog with custom close button</Dialog.Description>
+          </Dialog.Header>
+          Dialog content goes here.
+          <Dialog.Footer>
+            <Dialog.Close asChild>
+              <Button variant="tertiary">Close</Button>
+            </Dialog.Close>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </div>
+  );
+}

apps/docs/src/examples/dialog/example-2.tsx

@@ -0,0 +1,30 @@
+import { useRef, useState } from "react";
+import { Button, Dialog } from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  // You most likely don't need to use `containerRef` in your implementation. This is just for preview.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div ref={containerRef}>
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        container={containerRef.current}
+        className="text-left"
+        title="Dialog With Footer"
+        description="Dialog description"
+      >
+        Dialog content goes here.
+        <Dialog.Footer>
+          <Button variant="tertiary" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </div>
+  );
+}

apps/docs/src/examples/dialog/preview.tsx

@@ -0,0 +1,25 @@
+import { useRef, useState } from "react";
+import { Button, Dialog } from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  // You most likely don't need to use `containerRef` in your implementation. This is just for preview.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div ref={containerRef}>
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        container={containerRef.current}
+        className="text-left"
+        title="Dialog Title"
+        description="Dialog description"
+      >
+        Dialog content goes here.
+      </Dialog>
+    </div>
+  );
+}

apps/docs/src/examples/index.ts

@@ -1377,6 +1377,103 @@ export function Example() {
     </div>
   );
 }
+`,
+  },
+  "dialog/example-1": {
+    component: lazy(() => import("@/examples/dialog/example-1.tsx")),
+    code: `import { useRef } from "react";
+import { Button, Dialog } from "@lemonsqueezy/wedges";
+
+export function Example() {
+  // You most likely don't need to use \`containerRef\` in your implementation. This is just for preview.
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={containerRef}>
+      <Dialog.Root>
+        <Dialog.Trigger asChild>
+          <Button>Open Dialog</Button>
+        </Dialog.Trigger>
+
+        <Dialog.Content className="text-left" container={containerRef.current}>
+          <Dialog.Header>
+            <Dialog.Title>Dialog Custom Close</Dialog.Title>
+            <Dialog.Description>Dialog with custom close button</Dialog.Description>
+          </Dialog.Header>
+          Dialog content goes here.
+          <Dialog.Footer>
+            <Dialog.Close asChild>
+              <Button variant="tertiary">Close</Button>
+            </Dialog.Close>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </div>
+  );
+}
+`,
+  },
+  "dialog/example-2": {
+    component: lazy(() => import("@/examples/dialog/example-2.tsx")),
+    code: `import { useRef, useState } from "react";
+import { Button, Dialog } from "@lemonsqueezy/wedges";
+
+export function Example() {
+  // You most likely don't need to use \`containerRef\` in your implementation. This is just for preview.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div ref={containerRef}>
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        container={containerRef.current}
+        className="text-left"
+        title="Dialog With Footer"
+        description="Dialog description"
+      >
+        Dialog content goes here.
+        <Dialog.Footer>
+          <Button variant="tertiary" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </div>
+  );
+}
+`,
+  },
+  "dialog/preview": {
+    component: lazy(() => import("@/examples/dialog/preview.tsx")),
+    code: `import { useRef, useState } from "react";
+import { Button, Dialog } from "@lemonsqueezy/wedges";
+
+export function Example() {
+  // You most likely don't need to use \`containerRef\` in your implementation. This is just for preview.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div ref={containerRef}>
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        container={containerRef.current}
+        className="text-left"
+        title="Dialog Title"
+        description="Dialog description"
+      >
+        Dialog content goes here.
+      </Dialog>
+    </div>
+  );
+}
 `,
   },
   "dropdown-menu/example-1": {

packages/wedges/package.json

@@ -70,6 +70,7 @@
     "@iconicicons/react": "latest",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",