refactor(docs): popover dx

apps/docs/content/components/popover/arrow.raw.jsx

@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="bottom" showArrow={true}>
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/docs/content/components/popover/arrow.ts

@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" showArrow={true}>
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./arrow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/popover/backdrop.raw.jsx

@@ -0,0 +1,38 @@
+import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+  const backdrops = ["opaque", "blur", "transparent"];
+
+  const content = (
+    <PopoverContent className="w-[240px]">
+      {(titleProps) => (
+        <div className="px-1 py-2 w-full">
+          <p className="text-small font-bold text-foreground" {...titleProps}>
+            Dimensions
+          </p>
+          <div className="mt-2 flex flex-col gap-2 w-full">
+            <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
+            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+          </div>
+        </div>
+      )}
+    </PopoverContent>
+  );
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {backdrops.map((backdrop) => (
+        <Popover key={backdrop} showArrow backdrop={backdrop} offset={10} placement="bottom">
+          <PopoverTrigger>
+            <Button className="capitalize" color="warning" variant="flat">
+              {backdrop}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/popover/backdrop.ts

@@ -1,48 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
-
-export default function App() {
-
-  const backdrops = ["opaque", "blur", "transparent"];
-
-  const content = (
-    <PopoverContent className="w-[240px]">
-      {(titleProps) => (
-        <div className="px-1 py-2 w-full">
-          <p className="text-small font-bold text-foreground" {...titleProps}>
-            Dimensions
-          </p>
-          <div className="mt-2 flex flex-col gap-2 w-full">
-            <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
-            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
-            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
-            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
-          </div>
-        </div>
-      )}
-    </PopoverContent>
-  )
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {backdrops.map((backdrop) => (
-        <Popover
-          key={backdrop}
-          showArrow
-          offset={10}
-          placement="bottom"
-          backdrop={backdrop}
-        >
-          <PopoverTrigger>
-            <Button color="warning" variant="flat" className="capitalize">
-              {backdrop}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./backdrop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/popover/colors.raw.jsx

@@ -0,0 +1,29 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => (
+        <Popover key={color} color={color} placement="top">
+          <PopoverTrigger>
+            <Button className="capitalize" color={color}>
+              {color}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/popover/colors.ts

@@ -1,40 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "foreground",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => (
-        <Popover key={color} placement="top" color={color}>
-          <PopoverTrigger>
-            <Button color={color} className="capitalize">
-              {color}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/popover/controlled.raw.jsx

@@ -0,0 +1,22 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+        <PopoverTrigger>
+          <Button>Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className="px-1 py-2">
+            <div className="text-small font-bold">Popover Content</div>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}

apps/docs/content/components/popover/controlled.ts

@@ -1,25 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-        <PopoverTrigger>
-          <Button>Open Popover</Button>
-        </PopoverTrigger>
-        <PopoverContent>
-          <div className="px-1 py-2">
-            <div className="text-small font-bold">Popover Content</div>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        </PopoverContent>
-      </Popover>
-      <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/popover/custom-motion.raw.jsx

@@ -0,0 +1,45 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      motionProps={{
+        variants: {
+          enter: {
+            y: 0,
+            opacity: 1,
+            duration: 0.1,
+            transition: {
+              opacity: {
+                duration: 0.15,
+              },
+            },
+          },
+          exit: {
+            y: "10%",
+            opacity: 0,
+            duration: 0,
+            transition: {
+              opacity: {
+                duration: 0.1,
+              },
+            },
+          },
+        },
+      }}
+      offset={10}
+      placement="bottom"
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/docs/content/components/popover/custom-motion.ts

@@ -1,48 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover
-      showArrow
-      offset={10}
-      placement="bottom"
-      motionProps={{
-        variants: {
-          enter: {
-            y: 0,
-            opacity: 1,
-            duration: 0.1,
-            transition: {
-              opacity: {
-                duration: 0.15,
-              },
-            },
-          },
-          exit: {
-            y: "10%",
-            opacity: 0,
-            duration: 0,
-            transition: {
-              opacity: {
-                duration: 0.1,
-              },
-            },
-          },
-        },
-      }}
-    >
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/popover/custom-styles.raw.jsx

@@ -0,0 +1,36 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      backdrop="opaque"
+      classNames={{
+        base: [
+          // arrow color
+          "before:bg-default-200",
+        ],
+        content: [
+          "py-3 px-4 border border-default-200",
+          "bg-gradient-to-br from-white to-default-300",
+          "dark:from-default-100 dark:to-default-50",
+        ],
+      }}
+      placement="right"
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {(titleProps) => (
+          <div className="px-1 py-2">
+            <h3 className="text-small font-bold" {...titleProps}>
+              Popover Content
+            </h3>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}