From fda883e8cdacc6de4f0c7f67cbed33183ab0d8c2 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 15 Nov 2024 19:12:35 +0800
Subject: [PATCH] refactor(docs): radio-group dx

---
 .../components/radio-group/controlled.raw.jsx |  18 +++
 .../components/radio-group/controlled.ts      |  23 +---
 .../radio-group/custom-impl.raw.jsx           |  55 ++++++++
 .../radio-group/custom-impl.raw.tsx           |  56 ++++++++
 .../components/radio-group/custom-impl.ts     | 121 +-----------------
 .../radio-group/custom-styles.raw.jsx         |  36 ++++++
 .../components/radio-group/custom-styles.ts   |  40 +-----
 .../radio-group/default-value.raw.jsx         |  13 ++
 .../components/radio-group/default-value.ts   |  18 +--
 .../components/radio-group/disabled.raw.jsx   |  13 ++
 .../components/radio-group/disabled.ts        |  17 +--
 .../components/radio-group/horizontal.raw.jsx |  13 ++
 .../components/radio-group/horizontal.ts      |  17 +--
 .../components/radio-group/invalid.raw.jsx    |  27 ++++
 .../content/components/radio-group/invalid.ts |  28 +---
 .../components/radio-group/usage.raw.jsx      |  13 ++
 .../content/components/radio-group/usage.ts   |  16 +--
 .../radio-group/with-description.raw.jsx      |  20 +++
 .../radio-group/with-description.ts           |  24 +---
 19 files changed, 274 insertions(+), 294 deletions(-)
 create mode 100644 apps/docs/content/components/radio-group/controlled.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/custom-impl.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/custom-impl.raw.tsx
 create mode 100644 apps/docs/content/components/radio-group/custom-styles.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/default-value.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/disabled.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/horizontal.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/invalid.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/usage.raw.jsx
 create mode 100644 apps/docs/content/components/radio-group/with-description.raw.jsx

diff --git a/apps/docs/content/components/radio-group/controlled.raw.jsx b/apps/docs/content/components/radio-group/controlled.raw.jsx
new file mode 100644
index 0000000000..f55d1149fe
--- /dev/null
+++ b/apps/docs/content/components/radio-group/controlled.raw.jsx
@@ -0,0 +1,18 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("london");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <RadioGroup label="Select your favorite city" value={selected} onValueChange={setSelected}>
+        <Radio value="buenos-aires">Buenos Aires</Radio>
+        <Radio value="sydney">Sydney</Radio>
+        <Radio value="san-francisco">San Francisco</Radio>
+        <Radio value="london">London</Radio>
+        <Radio value="tokyo">Tokyo</Radio>
+      </RadioGroup>
+      <p className="text-default-500 text-small">Selected: {selected}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/controlled.ts b/apps/docs/content/components/radio-group/controlled.ts
index dcfc6298c1..2c3f0cacb4 100644
--- a/apps/docs/content/components/radio-group/controlled.ts
+++ b/apps/docs/content/components/radio-group/controlled.ts
@@ -1,25 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("london");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <RadioGroup
-        label="Select your favorite city"
-        value={selected}
-        onValueChange={setSelected}
-      >
-        <Radio value="buenos-aires">Buenos Aires</Radio>
-        <Radio value="sydney">Sydney</Radio>
-        <Radio value="san-francisco">San Francisco</Radio>
-        <Radio value="london">London</Radio>
-        <Radio value="tokyo">Tokyo</Radio>
-      </RadioGroup>
-      <p className="text-default-500 text-small">Selected: {selected}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.jsx b/apps/docs/content/components/radio-group/custom-impl.raw.jsx
new file mode 100644
index 0000000000..a4676eff43
--- /dev/null
+++ b/apps/docs/content/components/radio-group/custom-impl.raw.jsx
@@ -0,0 +1,55 @@
+import {RadioGroup, useRadio, VisuallyHidden, cn} from "@nextui-org/react";
+
+export const CustomRadio = (props) => {
+  const {
+    Component,
+    children,
+    description,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
+        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "data-[selected=true]:border-primary",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()}>
+        {children && <span {...getLabelProps()}>{children}</span>}
+        {description && (
+          <span className="text-small text-foreground opacity-70">{description}</span>
+        )}
+      </div>
+    </Component>
+  );
+};
+
+export default function App() {
+  return (
+    <RadioGroup label="Plans">
+      <CustomRadio description="Up to 20 items" value="free">
+        Free
+      </CustomRadio>
+      <CustomRadio description="Unlimited items. $10 per month." value="pro">
+        Pro
+      </CustomRadio>
+      <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise">
+        Enterprise
+      </CustomRadio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.tsx b/apps/docs/content/components/radio-group/custom-impl.raw.tsx
new file mode 100644
index 0000000000..ca96dac02e
--- /dev/null
+++ b/apps/docs/content/components/radio-group/custom-impl.raw.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import {RadioGroup, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react";
+
+export const CustomRadio = (props: RadioProps) => {
+  const {
+    Component,
+    children,
+    description,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
+        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "data-[selected=true]:border-primary",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()}>
+        {children && <span {...getLabelProps()}>{children}</span>}
+        {description && (
+          <span className="text-small text-foreground opacity-70">{description}</span>
+        )}
+      </div>
+    </Component>
+  );
+};
+
+export default function App() {
+  return (
+    <RadioGroup label="Plans">
+      <CustomRadio description="Up to 20 items" value="free">
+        Free
+      </CustomRadio>
+      <CustomRadio description="Unlimited items. $10 per month." value="pro">
+        Pro
+      </CustomRadio>
+      <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise">
+        Enterprise
+      </CustomRadio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/custom-impl.ts b/apps/docs/content/components/radio-group/custom-impl.ts
index f2c072f1d3..ef0d8ef531 100644
--- a/apps/docs/content/components/radio-group/custom-impl.ts
+++ b/apps/docs/content/components/radio-group/custom-impl.ts
@@ -1,122 +1,5 @@
-const App = `import {RadioGroup, Radio, useRadio, VisuallyHidden, cn} from "@nextui-org/react";
-
-export const CustomRadio = (props) => {
-  const {
-    Component,
-    children,
-    isSelected,
-    description,
-    getBaseProps,
-    getWrapperProps,
-    getInputProps,
-    getLabelProps,
-    getLabelWrapperProps,
-    getControlProps,
-  } = useRadio(props);
-
-  return (
-    <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
-        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        "data-[selected=true]:border-primary",
-      )}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <span {...getWrapperProps()}>
-        <span {...getControlProps()} />
-      </span>
-      <div {...getLabelWrapperProps()}>
-        {children && <span {...getLabelProps()}>{children}</span>}
-        {description && (
-          <span className="text-small text-foreground opacity-70">{description}</span>
-        )}
-      </div>
-    </Component>
-  );
-};
-
-export default function App() {
-  return (
-    <RadioGroup label="Plans">
-      <CustomRadio description="Up to 20 items" value="free">
-        Free
-      </CustomRadio>
-      <CustomRadio description="Unlimited items. $10 per month." value="pro">
-        Pro
-      </CustomRadio>
-      <CustomRadio
-        description="24/7 support. Contact us for pricing."
-        value="enterprise"
-      >
-        Enterprise
-      </CustomRadio>
-    </RadioGroup>
-  );
-}`;
-
-const AppTs = `import {RadioGroup, Radio, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react";
-
-export const CustomRadio = (props: RadioProps) => {
-  const {
-    Component,
-    children,
-    isSelected,
-    description,
-    getBaseProps,
-    getWrapperProps,
-    getInputProps,
-    getLabelProps,
-    getLabelWrapperProps,
-    getControlProps,
-  } = useRadio(props);
-
-  return (
-    <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
-        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        "data-[selected=true]:border-primary",
-      )}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <span {...getWrapperProps()}>
-        <span {...getControlProps()} />
-      </span>
-      <div {...getLabelWrapperProps()}>
-        {children && <span {...getLabelProps()}>{children}</span>}
-        {description && (
-          <span className="text-small text-foreground opacity-70">{description}</span>
-        )}
-      </div>
-    </Component>
-  );
-};
-
-export default function App() {
-  return (
-    <RadioGroup label="Plans">
-      <CustomRadio description="Up to 20 items" value="free">
-        Free
-      </CustomRadio>
-      <CustomRadio description="Unlimited items. $10 per month." value="pro">
-        Pro
-      </CustomRadio>
-      <CustomRadio
-        description="24/7 support. Contact us for pricing."
-        value="enterprise"
-      >
-        Enterprise
-      </CustomRadio>
-    </RadioGroup>
-  );
-}`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/custom-styles.raw.jsx b/apps/docs/content/components/radio-group/custom-styles.raw.jsx
new file mode 100644
index 0000000000..c034ff8787
--- /dev/null
+++ b/apps/docs/content/components/radio-group/custom-styles.raw.jsx
@@ -0,0 +1,36 @@
+import {RadioGroup, Radio, cn} from "@nextui-org/react";
+
+export const CustomRadio = (props) => {
+  const {children, ...otherProps} = props;
+
+  return (
+    <Radio
+      {...otherProps}
+      classNames={{
+        base: cn(
+          "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
+          "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+      }}
+    >
+      {children}
+    </Radio>
+  );
+};
+
+export default function App() {
+  return (
+    <RadioGroup description="Selected plan can be changed at any time." label="Plans">
+      <CustomRadio description="Up to 20 items" value="free">
+        Free
+      </CustomRadio>
+      <CustomRadio description="Unlimited items. $10 per month." value="pro">
+        Pro
+      </CustomRadio>
+      <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise">
+        Enterprise
+      </CustomRadio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/custom-styles.ts b/apps/docs/content/components/radio-group/custom-styles.ts
index 32ecea0803..da3ea9093a 100644
--- a/apps/docs/content/components/radio-group/custom-styles.ts
+++ b/apps/docs/content/components/radio-group/custom-styles.ts
@@ -1,42 +1,4 @@
-const App = `import {RadioGroup, Radio, cn} from "@nextui-org/react";
-
-export const CustomRadio = (props) => {
-  const {children, ...otherProps} = props;
-
-  return (
-    <Radio
-      {...otherProps}
-      classNames={{
-        base: cn(
-          "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
-          "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary"
-        ),
-      }}
-    >
-      {children}
-    </Radio>
-  );
-};
-
-export default function App() {
-  return (
-    <RadioGroup label="Plans" description="Selected plan can be changed at any time.">
-      <CustomRadio description="Up to 20 items" value="free">
-        Free
-      </CustomRadio>
-      <CustomRadio description="Unlimited items. $10 per month." value="pro">
-        Pro
-      </CustomRadio>
-      <CustomRadio
-        description="24/7 support. Contact us for pricing."
-        value="enterprise"
-      >
-        Enterprise
-      </CustomRadio>
-    </RadioGroup>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/default-value.raw.jsx b/apps/docs/content/components/radio-group/default-value.raw.jsx
new file mode 100644
index 0000000000..18df962e51
--- /dev/null
+++ b/apps/docs/content/components/radio-group/default-value.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup color="secondary" defaultValue="london" label="Select your favorite city">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/default-value.ts b/apps/docs/content/components/radio-group/default-value.ts
index d10be982f0..6a12c77816 100644
--- a/apps/docs/content/components/radio-group/default-value.ts
+++ b/apps/docs/content/components/radio-group/default-value.ts
@@ -1,20 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      color="secondary"
-      defaultValue="london"
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./default-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/disabled.raw.jsx b/apps/docs/content/components/radio-group/disabled.raw.jsx
new file mode 100644
index 0000000000..950e2d63d9
--- /dev/null
+++ b/apps/docs/content/components/radio-group/disabled.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup isDisabled label="Select your favorite city">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/disabled.ts b/apps/docs/content/components/radio-group/disabled.ts
index b707ad15cf..1a215cc91f 100644
--- a/apps/docs/content/components/radio-group/disabled.ts
+++ b/apps/docs/content/components/radio-group/disabled.ts
@@ -1,19 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      isDisabled
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/horizontal.raw.jsx b/apps/docs/content/components/radio-group/horizontal.raw.jsx
new file mode 100644
index 0000000000..9e822ee189
--- /dev/null
+++ b/apps/docs/content/components/radio-group/horizontal.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup label="Select your favorite city" orientation="horizontal">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/horizontal.ts b/apps/docs/content/components/radio-group/horizontal.ts
index 543ceacbf2..60be4b4077 100644
--- a/apps/docs/content/components/radio-group/horizontal.ts
+++ b/apps/docs/content/components/radio-group/horizontal.ts
@@ -1,19 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      orientation="horizontal"
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./horizontal.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/invalid.raw.jsx b/apps/docs/content/components/radio-group/invalid.raw.jsx
new file mode 100644
index 0000000000..6abf555c09
--- /dev/null
+++ b/apps/docs/content/components/radio-group/invalid.raw.jsx
@@ -0,0 +1,27 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("london");
+
+  const validOptions = ["buenos-aires", "san-francisco", "tokyo"];
+
+  const isInvalid = !validOptions.includes(selected);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <RadioGroup
+        isInvalid={isInvalid}
+        label="Select your favorite city"
+        value={selected}
+        onValueChange={setSelected}
+      >
+        <Radio value="buenos-aires">Buenos Aires</Radio>
+        <Radio value="sydney">Sydney</Radio>
+        <Radio value="san-francisco">San Francisco</Radio>
+        <Radio value="london">London</Radio>
+        <Radio value="tokyo">Tokyo</Radio>
+      </RadioGroup>
+      <p className="text-default-500 text-small">Selected: {selected}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/invalid.ts b/apps/docs/content/components/radio-group/invalid.ts
index 163615f5e9..a02a8fe9c1 100644
--- a/apps/docs/content/components/radio-group/invalid.ts
+++ b/apps/docs/content/components/radio-group/invalid.ts
@@ -1,30 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("london");
-
-  const validOptions = ["buenos-aires", "san-francisco", "tokyo"];
-
-  const isInvalid = !validOptions.includes(selected);
-
-  return (
-    <div className="flex flex-col gap-3">
-      <RadioGroup
-        label="Select your favorite city"
-        value={selected}
-        isInvalid={isInvalid}
-        onValueChange={setSelected}
-      >
-        <Radio value="buenos-aires">Buenos Aires</Radio>
-        <Radio value="sydney">Sydney</Radio>
-        <Radio value="san-francisco">San Francisco</Radio>
-        <Radio value="london">London</Radio>
-        <Radio value="tokyo">Tokyo</Radio>
-      </RadioGroup>
-      <p className="text-default-500 text-small">Selected: {selected}</p>
-    </div>
-  );
-}`;
+import App from "./invalid.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/usage.raw.jsx b/apps/docs/content/components/radio-group/usage.raw.jsx
new file mode 100644
index 0000000000..90f7d3bc87
--- /dev/null
+++ b/apps/docs/content/components/radio-group/usage.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup label="Select your favorite city">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/usage.ts b/apps/docs/content/components/radio-group/usage.ts
index 70292f055a..1118304c37 100644
--- a/apps/docs/content/components/radio-group/usage.ts
+++ b/apps/docs/content/components/radio-group/usage.ts
@@ -1,18 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/with-description.raw.jsx b/apps/docs/content/components/radio-group/with-description.raw.jsx
new file mode 100644
index 0000000000..5764f14cc2
--- /dev/null
+++ b/apps/docs/content/components/radio-group/with-description.raw.jsx
@@ -0,0 +1,20 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup color="warning" label="Select your favorite city">
+      <Radio description="The capital of Argentina" value="buenos-aires">
+        Buenos Aires
+      </Radio>
+      <Radio description="The capital of Australia" value="canberra">
+        Canberra
+      </Radio>
+      <Radio description="The capital of England" value="london">
+        London
+      </Radio>
+      <Radio description="The capital of Japan" value="tokyo">
+        Tokyo
+      </Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/with-description.ts b/apps/docs/content/components/radio-group/with-description.ts
index 8514baafb8..d42b2150ff 100644
--- a/apps/docs/content/components/radio-group/with-description.ts
+++ b/apps/docs/content/components/radio-group/with-description.ts
@@ -1,26 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      color="warning"
-    >
-      <Radio value="buenos-aires" description="The capital of Argentina">
-        Buenos Aires
-      </Radio>
-      <Radio value="canberra" description="The capital of Australia">
-        Canberra
-      </Radio>
-      <Radio value="london" description="The capital of England">
-        London
-      </Radio>
-      <Radio value="tokyo" description="The capital of Japan">
-        Tokyo
-      </Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./with-description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,