feat(docs): apply playground to Dialog

src/docs/components/Dialog.mdx

@@ -8,25 +8,13 @@ import {
 } from "@/components/LoadedCode";
 import { DialogDemo } from "./DialogBlocks/Preview";
 import Examples from "./DialogBlocks/Examples";
+import Playground from "./DialogBlocks/Playground";
 
 # Dialog
 
 A modal window that prompts the user to take an action or provides critical information.
 
-<TabProvider defaultName="preview">
+<Playground />
-  <TabList>
-    <TabTrigger name="preview">Preview</TabTrigger>
-    <TabTrigger name="code">Code</TabTrigger>
-  </TabList>
-  <TabContent name="preview">
-    <Story layout="centered">
-      <DialogDemo />
-    </Story>
-  </TabContent>
-  <TabContent name="code">
-    <LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
-  </TabContent>
-</TabProvider>
 
 ## Installation
 

src/docs/components/DialogBlocks/Playground.tsx

@@ -0,0 +1,27 @@
+import type { TEMPLATE } from "@/components/LoadedCode";
+import { usePgProps } from "@/components/PgHooks";
+import { PlaygroundLayout } from "@/components/Playground";
+import { DialogDemo, type DialogDemoPlaygroundProps } from "./Preview";
+
+interface TemplateProps extends TEMPLATE, DialogDemoPlaygroundProps {}
+
+export default function DialogPlayground() {
+  const [props, control] = usePgProps<TemplateProps>({
+    DialogOverlayProps: {
+      closeOnClick: {
+        type: "boolean",
+        value: false,
+      },
+    },
+  });
+
+  return (
+    <PlaygroundLayout
+      compName="Dialog"
+      control={control}
+      props={props}
+    >
+      <DialogDemo {...props} />
+    </PlaygroundLayout>
+  );
+}

src/docs/components/DialogBlocks/Preview.tsx

@@ -10,15 +10,25 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@pswui/Dialog";
-
+/* remove */
+export interface DialogDemoPlaygroundProps {
+  DialogOverlayProps: {
+    closeOnClick: boolean;
+  };
+}
+/* end */
+/* replace */
+export function DialogDemo({ DialogOverlayProps }: DialogDemoPlaygroundProps) {
+  /* with
 export function DialogDemo() {
+  */
   return (
     <DialogRoot>
       <DialogTrigger>
         <Button preset="default">Open Dialog</Button>
       </DialogTrigger>
-      <DialogOverlay>
+      <DialogOverlay closeOnClick={DialogOverlayProps.closeOnClick}>
-        <DialogContent size={"fullMd"}>
+        <DialogContent>
           <DialogHeader>
             <DialogTitle>Dialog Title</DialogTitle>
             <DialogSubtitle>Dialog Subtitle</DialogSubtitle>