refactor(docs): tooltip dx

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

@@ -0,0 +1,9 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip content="I am a tooltip" showArrow={true}>
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}

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

@@ -1,12 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip showArrow={true} content="I am a tooltip">
-      <Button>Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./arrow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,19 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => {
+        return (
+          <Tooltip key={color} className="capitalize" color={color} content={color}>
+            <Button className="capitalize" color={color} variant="flat">
+              {color}
+            </Button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -1,30 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "foreground",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => {
-        return (
-          <Tooltip key={color} color={color} content={color} className="capitalize">
-            <Button variant="flat" color={color} className="capitalize">
-              {color}
-            </Button>
-          </Tooltip>
-        )
-      })}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,14 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Tooltip content="I am a tooltip" isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+        <Button>Hover me</Button>
+      </Tooltip>
+      <p className="text-small text-default-500">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}

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

@@ -1,23 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Tooltip
-        isOpen={isOpen}
-        onOpenChange={(open) => setIsOpen(open)}
-        content="I am a tooltip"
-      >
-        <Button>Hover me</Button>
-      </Tooltip>
-      <p className="text-small text-default-500">
-        Open: {isOpen ? "true" : "false"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/tooltip/custom-content.raw.jsx

@@ -0,0 +1,16 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      content={
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Custom Content</div>
+          <div className="text-tiny">This is a custom tooltip content</div>
+        </div>
+      }
+    >
+      <Button variant="bordered">Hover me</Button>
+    </Tooltip>
+  );
+}

apps/docs/content/components/tooltip/custom-content.ts

@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip
-      content={
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Custom Content</div>
-          <div className="text-tiny">This is a custom tooltip content</div>
-        </div>
-      }
-    >
-      <Button variant="bordered">
-        Hover me
-      </Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,31 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      closeDelay={0}
+      content="I am a tooltip"
+      delay={0}
+      motionProps={{
+        variants: {
+          exit: {
+            opacity: 0,
+            transition: {
+              duration: 0.1,
+              ease: "easeIn",
+            },
+          },
+          enter: {
+            opacity: 1,
+            transition: {
+              duration: 0.15,
+              ease: "easeOut",
+            },
+          },
+        },
+      }}
+    >
+      <Button variant="flat">Hover me</Button>
+    </Tooltip>
+  );
+}

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

@@ -1,34 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip 
-      content="I am a tooltip"
-      delay={0}
-      closeDelay={0}
-      motionProps={{
-        variants: {
-          exit: {
-            opacity: 0,
-            transition: {
-              duration: 0.1,
-              ease: "easeIn",
-            }
-          },
-          enter: {
-            opacity: 1,
-            transition: {
-              duration: 0.15,
-              ease: "easeOut",
-            }
-          },
-        },
-      }}
-    >
-      <Button variant="flat">Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,20 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      showArrow
+      classNames={{
+        base: [
+          // arrow color
+          "before:bg-neutral-400 dark:before:bg-white",
+        ],
+        content: ["py-2 px-4 shadow-xl", "text-black bg-gradient-to-br from-white to-neutral-400"],
+      }}
+      content="I am a tooltip"
+      placement="right"
+    >
+      <Button variant="flat">Hover me</Button>
+    </Tooltip>
+  );
+}

apps/docs/content/components/tooltip/custom-styles.ts

@@ -1,26 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip 
-      showArrow
-      placement="right"
-      content="I am a tooltip"
-      classNames={{
-        base: [
-          // arrow color
-          "before:bg-neutral-400 dark:before:bg-white",
-        ],
-        content: [
-          "py-2 px-4 shadow-xl",
-          "text-black bg-gradient-to-br from-white to-neutral-400",
-        ],
-      }}
-    >
-      <Button variant="flat">Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/tooltip/delay-multiple.raw.jsx

@@ -0,0 +1,18 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="primary" content="Tooltip 1" delay={1000}>
+        <Button color="primary" variant="flat">
+          Hover me (delay 1000ms)
+        </Button>
+      </Tooltip>
+      <Tooltip color="primary" content="Tooltip 2">
+        <Button color="primary" variant="flat">
+          Then hover me
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}

apps/docs/content/components/tooltip/delay-multiple.ts

@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip color="primary" content="Tooltip 1" delay={1000}>
-        <Button color="primary" variant="flat">
-          Hover me (delay 1000ms)
-        </Button>
-      </Tooltip>
-      <Tooltip color="primary" content="Tooltip 2">
-        <Button color="primary" variant="flat">
-          Then hover me
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./delay-multiple.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/tooltip/delay.raw.jsx

@@ -0,0 +1,18 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="warning" content="Tooltip 1" delay={1000}>
+        <Button color="warning" variant="flat">
+          Delay Open (1000ms)
+        </Button>
+      </Tooltip>
+      <Tooltip closeDelay={2000} color="warning" content="Tooltip 2">
+        <Button color="warning" variant="flat">
+          Delay Close (2000ms)
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}

apps/docs/content/components/tooltip/delay.ts

@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip color="warning" content="Tooltip 1" delay={1000}>
-        <Button color="warning" variant="flat">
-          Delay Open (1000ms)
-        </Button>
-      </Tooltip>
-      <Tooltip color="warning" closeDelay={2000} content="Tooltip 2">
-        <Button color="warning" variant="flat">
-          Delay Close (2000ms)
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./delay.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/tooltip/offset.raw.jsx

@@ -0,0 +1,23 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="success" content="Tooltip 1">
+        <Button color="success" variant="faded">
+          Default offset (7)
+        </Button>
+      </Tooltip>
+      <Tooltip color="success" content="Tooltip 2" offset={15}>
+        <Button color="success" variant="faded">
+          15 offset
+        </Button>
+      </Tooltip>
+      <Tooltip color="success" content="Tooltip 3" offset={-7}>
+        <Button color="success" variant="faded">
+          -7 offset
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}