From 62a6e748fbd533a0d21e7d864ffe949f452636c5 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2024 23:32:55 +0800
Subject: [PATCH 1/2] refactor(docs): checkbox dx

---
 .../components/checkbox/colors.raw.jsx        | 26 +++++++
 .../content/components/checkbox/colors.ts     | 15 +---
 .../components/checkbox/controlled.raw.jsx    | 14 ++++
 .../content/components/checkbox/controlled.ts | 17 +---
 .../checkbox/custom-check-icon.raw.jsx        | 68 ++++++++++++++++
 .../components/checkbox/custom-check-icon.ts  | 68 +---------------
 .../checkbox/custom-implementation.raw.jsx    | 68 ++++++++++++++++
 .../checkbox/custom-implementation.ts         | 78 +------------------
 .../components/checkbox/custom-styles.raw.jsx | 49 ++++++++++++
 .../components/checkbox/custom-styles.ts      | 50 +-----------
 .../components/checkbox/disabled.raw.jsx      | 12 +++
 .../content/components/checkbox/disabled.ts   | 11 +--
 .../components/checkbox/indeterminate.raw.jsx |  5 ++
 .../components/checkbox/indeterminate.ts      |  8 +-
 .../components/checkbox/line-through.raw.jsx  |  9 +++
 .../components/checkbox/line-through.ts       |  8 +-
 .../components/checkbox/radius.raw.jsx        | 23 ++++++
 .../content/components/checkbox/radius.ts     | 14 +---
 .../content/components/checkbox/sizes.raw.jsx | 17 ++++
 .../docs/content/components/checkbox/sizes.ts | 12 +--
 .../content/components/checkbox/usage.raw.jsx |  5 ++
 .../docs/content/components/checkbox/usage.ts |  8 +-
 22 files changed, 307 insertions(+), 278 deletions(-)
 create mode 100644 apps/docs/content/components/checkbox/colors.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/controlled.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/custom-check-icon.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/custom-implementation.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/custom-styles.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/disabled.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/indeterminate.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/line-through.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/radius.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/sizes.raw.jsx
 create mode 100644 apps/docs/content/components/checkbox/usage.raw.jsx

diff --git a/apps/docs/content/components/checkbox/colors.raw.jsx b/apps/docs/content/components/checkbox/colors.raw.jsx
new file mode 100644
index 0000000000..1444356a3b
--- /dev/null
+++ b/apps/docs/content/components/checkbox/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected color="default">
+        Default
+      </Checkbox>
+      <Checkbox defaultSelected color="primary">
+        Primary
+      </Checkbox>
+      <Checkbox defaultSelected color="secondary">
+        Secondary
+      </Checkbox>
+      <Checkbox defaultSelected color="success">
+        Success
+      </Checkbox>
+      <Checkbox defaultSelected color="warning">
+        Warning
+      </Checkbox>
+      <Checkbox defaultSelected color="danger">
+        Danger
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/colors.ts b/apps/docs/content/components/checkbox/colors.ts
index a7d318f734..d5bef810aa 100644
--- a/apps/docs/content/components/checkbox/colors.ts
+++ b/apps/docs/content/components/checkbox/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected color="default">Default</Checkbox>
-      <Checkbox defaultSelected color="primary">Primary</Checkbox>
-      <Checkbox defaultSelected color="secondary">Secondary</Checkbox>
-      <Checkbox defaultSelected color="success">Success</Checkbox>
-      <Checkbox defaultSelected color="warning">Warning</Checkbox>
-      <Checkbox defaultSelected color="danger">Danger</Checkbox>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/controlled.raw.jsx b/apps/docs/content/components/checkbox/controlled.raw.jsx
new file mode 100644
index 0000000000..4d81052b0e
--- /dev/null
+++ b/apps/docs/content/components/checkbox/controlled.raw.jsx
@@ -0,0 +1,14 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
+        Subscribe (controlled)
+      </Checkbox>
+      <p className="text-default-500">Selected: {isSelected ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/controlled.ts b/apps/docs/content/components/checkbox/controlled.ts
index 61c09eb3ae..2c3f0cacb4 100644
--- a/apps/docs/content/components/checkbox/controlled.ts
+++ b/apps/docs/content/components/checkbox/controlled.ts
@@ -1,19 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
-        Subscribe (controlled)
-      </Checkbox>
-      <p className="text-default-500">
-        Selected: {isSelected ? "true" : "false"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx
new file mode 100644
index 0000000000..bea37878e1
--- /dev/null
+++ b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx
@@ -0,0 +1,68 @@
+import {Checkbox} from "@nextui-org/react";
+
+export const HeartIcon = ({size, height, width, ...props}) => {
+  // avoid passing non-DOM attributes to svg
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
+  return (
+    <svg
+      fill="fill"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...otherProps}
+    >
+      <path
+        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const PlusIcon = ({size, height, width, ...props}) => {
+  // avoid passing non-DOM attributes to svg
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...otherProps}
+    >
+      <path
+        d="M6 12H18"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+      <path
+        d="M12 18V6"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected icon={<HeartIcon />}>
+        Option
+      </Checkbox>
+      <Checkbox defaultSelected color="warning" icon={<PlusIcon />}>
+        Option
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/custom-check-icon.ts b/apps/docs/content/components/checkbox/custom-check-icon.ts
index 5bd83fa324..6f2bd3d139 100644
--- a/apps/docs/content/components/checkbox/custom-check-icon.ts
+++ b/apps/docs/content/components/checkbox/custom-check-icon.ts
@@ -1,73 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
-  // avoid passing non-DOM attributes to svg
-  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
-
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill='fill'
-      xmlns="http://www.w3.org/2000/svg"
-      {...otherProps}
-    >
-      <path
-        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
-        fill='currentColor'
-      />
-    </svg>
-  );
-};
-`;
-
-const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
-  // avoid passing non-DOM attributes to svg
-  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
-
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...otherProps}
-    >
-      <path
-        d="M6 12H18"
-        stroke="currentColor"
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M12 18V6"
-        stroke="currentColor"
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Checkbox} from "@nextui-org/react";
-import {HeartIcon} from './HeartIcon.jsx';  
-import {PlusIcon} from './PlusIcon.jsx';
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected icon={<HeartIcon/>}>Option</Checkbox>
-      <Checkbox defaultSelected icon={<PlusIcon/>} color="warning">Option</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./custom-check-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/HeartIcon.jsx": HeartIcon,
-  "/PlusIcon.jsx": PlusIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
new file mode 100644
index 0000000000..4023c28365
--- /dev/null
+++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
@@ -0,0 +1,68 @@
+import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
+
+export const CheckIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+const checkbox = tv({
+  slots: {
+    base: "border-default hover:bg-default-200",
+    content: "text-default-500",
+  },
+  variants: {
+    isSelected: {
+      true: {
+        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
+        content: "text-primary-foreground pl-1",
+      },
+    },
+    isFocusVisible: {
+      true: {
+        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+      },
+    },
+  },
+});
+
+export default function App() {
+  const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
+    useCheckbox({
+      defaultSelected: true,
+    });
+
+  const styles = checkbox({isSelected, isFocusVisible});
+
+  return (
+    <label {...getBaseProps()}>
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <Chip
+        classNames={{
+          base: styles.base(),
+          content: styles.content(),
+        }}
+        color="primary"
+        startContent={isSelected ? <CheckIcon className="ml-1" /> : null}
+        variant="faded"
+        {...getLabelProps()}
+      >
+        {children ? children : isSelected ? "Enabled" : "Disabled"}
+      </Chip>
+    </label>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/custom-implementation.ts b/apps/docs/content/components/checkbox/custom-implementation.ts
index 6c73006698..cf79f4d84e 100644
--- a/apps/docs/content/components/checkbox/custom-implementation.ts
+++ b/apps/docs/content/components/checkbox/custom-implementation.ts
@@ -1,83 +1,7 @@
-const CheckIcon = `export const CheckIcon = (props) =>
-  (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );`;
-
-const App = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
-import {CheckIcon} from './CheckIcon.jsx'
-
-const checkbox = tv({
-  slots: {
-    base: "border-default hover:bg-default-200",
-    content: "text-default-500"
-  },
-  variants: {
-    isSelected: {
-      true: {
-        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
-        content: "text-primary-foreground pl-1"
-      }
-    },
-    isFocusVisible: {
-      true: { 
-        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
-      }
-    }
-  }
-})
-
-export default function App() {
-  const {
-    children,
-    isSelected,
-    isFocusVisible,
-    getBaseProps,
-    getLabelProps,
-    getInputProps,
-  } = useCheckbox({
-    defaultSelected: true,
-  })
-
-  const styles = checkbox({ isSelected, isFocusVisible })
-
-  return (
-    <label {...getBaseProps()}>
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <Chip
-        classNames={{
-          base: styles.base(),
-          content: styles.content(),
-        }}
-        color="primary"
-        startContent={isSelected ? <CheckIcon className="ml-1" /> : null}
-        variant="faded"
-        {...getLabelProps()}
-      >
-        {children ? children : isSelected ? "Enabled" : "Disabled"}
-      </Chip>
-    </label>
-  );
-}`;
+import App from "./custom-implementation.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "./CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/checkbox/custom-styles.raw.jsx b/apps/docs/content/components/checkbox/custom-styles.raw.jsx
new file mode 100644
index 0000000000..d3e98200e4
--- /dev/null
+++ b/apps/docs/content/components/checkbox/custom-styles.raw.jsx
@@ -0,0 +1,49 @@
+import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  const user = {
+    name: "Junior Garcia",
+    avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
+    username: "jrgarciadev",
+    url: "https://x.com/jrgarciadev",
+    role: "Software Developer",
+    status: "Active",
+  };
+
+  return (
+    <Checkbox
+      aria-label={user.name}
+      classNames={{
+        base: cn(
+          "inline-flex w-full max-w-md bg-content1",
+          "hover:bg-content2 items-center justify-start",
+          "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        label: "w-full",
+      }}
+      isSelected={isSelected}
+      onValueChange={setIsSelected}
+    >
+      <div className="w-full flex justify-between gap-2">
+        <User
+          avatarProps={{size: "md", src: user.avatar}}
+          description={
+            <Link isExternal href={user.url} size="sm">
+              @{user.username}
+            </Link>
+          }
+          name={user.name}
+        />
+        <div className="flex flex-col items-end gap-1">
+          <span className="text-tiny text-default-500">{user.role}</span>
+          <Chip color="success" size="sm" variant="flat">
+            {user.status}
+          </Chip>
+        </div>
+      </div>
+    </Checkbox>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/custom-styles.ts b/apps/docs/content/components/checkbox/custom-styles.ts
index 7484b1c453..da3ea9093a 100644
--- a/apps/docs/content/components/checkbox/custom-styles.ts
+++ b/apps/docs/content/components/checkbox/custom-styles.ts
@@ -1,52 +1,4 @@
-const App = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-  const user = {
-    name: "Junior Garcia",
-    avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
-    username: "jrgarciadev",
-    url: "https://x.com/jrgarciadev",
-    role: "Software Developer",
-    status: "Active",
-  }
-
-  return (
-    <Checkbox
-      aria-label={user.name}
-      classNames={{
-        base: cn(
-          "inline-flex w-full max-w-md bg-content1",
-          "hover:bg-content2 items-center justify-start",
-          "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary",
-        ),
-        label: "w-full",
-      }}
-      isSelected={isSelected}
-      onValueChange={setIsSelected}
-    >
-      <div className="w-full flex justify-between gap-2">
-        <User
-          avatarProps={{size: "md", src: user.avatar}}
-          description={
-            <Link isExternal href={user.url} size="sm">
-              @{user.username}
-            </Link>
-          }
-          name={user.name}
-        />
-        <div className="flex flex-col items-end gap-1">
-          <span className="text-tiny text-default-500">{user.role}</span>
-          <Chip color="success" size="sm" variant="flat">
-            {user.status}
-          </Chip>
-        </div>
-      </div>
-    </Checkbox>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/disabled.raw.jsx b/apps/docs/content/components/checkbox/disabled.raw.jsx
new file mode 100644
index 0000000000..c92dd3711e
--- /dev/null
+++ b/apps/docs/content/components/checkbox/disabled.raw.jsx
@@ -0,0 +1,12 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox isDisabled>Option</Checkbox>
+      <Checkbox defaultSelected isDisabled>
+        Option
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/disabled.ts b/apps/docs/content/components/checkbox/disabled.ts
index 23f637e682..1a215cc91f 100644
--- a/apps/docs/content/components/checkbox/disabled.ts
+++ b/apps/docs/content/components/checkbox/disabled.ts
@@ -1,13 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox isDisabled>Option</Checkbox>
-      <Checkbox isDisabled defaultSelected>Option</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/indeterminate.raw.jsx b/apps/docs/content/components/checkbox/indeterminate.raw.jsx
new file mode 100644
index 0000000000..0bc1851041
--- /dev/null
+++ b/apps/docs/content/components/checkbox/indeterminate.raw.jsx
@@ -0,0 +1,5 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return <Checkbox isIndeterminate>Option</Checkbox>;
+}
diff --git a/apps/docs/content/components/checkbox/indeterminate.ts b/apps/docs/content/components/checkbox/indeterminate.ts
index bc9ad778aa..7094e42950 100644
--- a/apps/docs/content/components/checkbox/indeterminate.ts
+++ b/apps/docs/content/components/checkbox/indeterminate.ts
@@ -1,10 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Checkbox isIndeterminate>Option</Checkbox>
-  );
-}`;
+import App from "./indeterminate.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/line-through.raw.jsx b/apps/docs/content/components/checkbox/line-through.raw.jsx
new file mode 100644
index 0000000000..4e4408c213
--- /dev/null
+++ b/apps/docs/content/components/checkbox/line-through.raw.jsx
@@ -0,0 +1,9 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Checkbox defaultSelected lineThrough>
+      Option
+    </Checkbox>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/line-through.ts b/apps/docs/content/components/checkbox/line-through.ts
index ce5f7e3d22..f4c8aaa857 100644
--- a/apps/docs/content/components/checkbox/line-through.ts
+++ b/apps/docs/content/components/checkbox/line-through.ts
@@ -1,10 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Checkbox defaultSelected lineThrough>Option</Checkbox>
-  );
-}`;
+import App from "./line-through.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/radius.raw.jsx b/apps/docs/content/components/checkbox/radius.raw.jsx
new file mode 100644
index 0000000000..cabb65bcde
--- /dev/null
+++ b/apps/docs/content/components/checkbox/radius.raw.jsx
@@ -0,0 +1,23 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected radius="full">
+        Full
+      </Checkbox>
+      <Checkbox defaultSelected radius="lg">
+        Large
+      </Checkbox>
+      <Checkbox defaultSelected radius="md">
+        Medium
+      </Checkbox>
+      <Checkbox defaultSelected radius="sm">
+        Small
+      </Checkbox>
+      <Checkbox defaultSelected radius="none">
+        None
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/radius.ts b/apps/docs/content/components/checkbox/radius.ts
index a8446ab909..7b78db1ce0 100644
--- a/apps/docs/content/components/checkbox/radius.ts
+++ b/apps/docs/content/components/checkbox/radius.ts
@@ -1,16 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected radius="full">Full</Checkbox>
-      <Checkbox defaultSelected radius="lg">Large</Checkbox>
-      <Checkbox defaultSelected radius="md">Medium</Checkbox>
-      <Checkbox defaultSelected radius="sm">Small</Checkbox>
-      <Checkbox defaultSelected radius="none">None</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/sizes.raw.jsx b/apps/docs/content/components/checkbox/sizes.raw.jsx
new file mode 100644
index 0000000000..3e3c51a9e2
--- /dev/null
+++ b/apps/docs/content/components/checkbox/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected size="sm">
+        Small
+      </Checkbox>
+      <Checkbox defaultSelected size="md">
+        Medium
+      </Checkbox>
+      <Checkbox defaultSelected size="lg">
+        Large
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/sizes.ts b/apps/docs/content/components/checkbox/sizes.ts
index 7dc596b4ec..d7f4308117 100644
--- a/apps/docs/content/components/checkbox/sizes.ts
+++ b/apps/docs/content/components/checkbox/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected size="sm">Small</Checkbox>
-      <Checkbox defaultSelected size="md">Medium</Checkbox>
-      <Checkbox defaultSelected size="lg">Large</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./size.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/usage.raw.jsx b/apps/docs/content/components/checkbox/usage.raw.jsx
new file mode 100644
index 0000000000..050e56a5a7
--- /dev/null
+++ b/apps/docs/content/components/checkbox/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return <Checkbox defaultSelected>Option</Checkbox>;
+}
diff --git a/apps/docs/content/components/checkbox/usage.ts b/apps/docs/content/components/checkbox/usage.ts
index e7b4a84d96..1118304c37 100644
--- a/apps/docs/content/components/checkbox/usage.ts
+++ b/apps/docs/content/components/checkbox/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Checkbox defaultSelected>Option</Checkbox>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

From e65e8af5fee472a968355a7eb2d24c695879b846 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2024 23:40:13 +0800
Subject: [PATCH 2/2] fix(docs): incorrect import path

---
 apps/docs/content/components/checkbox/sizes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/components/checkbox/sizes.ts b/apps/docs/content/components/checkbox/sizes.ts
index d7f4308117..85a2f5b30b 100644
--- a/apps/docs/content/components/checkbox/sizes.ts
+++ b/apps/docs/content/components/checkbox/sizes.ts
@@ -1,4 +1,4 @@
-import App from "./size.raw.jsx?raw";
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,