From d4ed5e9c8b4cfc2aca8d2af960f71d16f9f88618 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 16 Nov 2024 12:12:40 +0800
Subject: [PATCH 1/5] refactor(docs): select dx

---
 .../select/async-loading-items.raw.jsx        |  98 ++++++
 .../select/async-loading-items.raw.tsx        | 108 ++++++
 .../components/select/async-loading-items.ts  | 178 +---------
 .../content/components/select/colors.raw.jsx  |  40 +++
 apps/docs/content/components/select/colors.ts |  52 +--
 .../components/select/custom-items.raw.jsx    | 228 +++++++++++++
 .../content/components/select/custom-items.ts | 231 +------------
 .../select/custom-render-value.raw.jsx        | 247 ++++++++++++++
 .../select/custom-render-value.raw.tsx        | 259 +++++++++++++++
 .../components/select/custom-render-value.ts  | 309 +-----------------
 .../select/custom-sections-style.raw.jsx      |  48 +++
 .../select/custom-sections-style.ts           |  48 +--
 .../select/custom-selector-icon.raw.jsx       |  55 ++++
 .../components/select/custom-selector-icon.ts |  62 +---
 .../components/select/custom-styles.raw.jsx   | 269 +++++++++++++++
 .../components/select/custom-styles.ts        | 272 +--------------
 .../components/select/description.raw.jsx     |  33 ++
 .../content/components/select/description.ts  |  38 +--
 .../components/select/disabled-items.raw.jsx  |  32 ++
 .../components/select/disabled-items.ts       |  37 +--
 .../components/select/disabled.raw.jsx        |  33 ++
 .../content/components/select/disabled.ts     |  38 +--
 .../content/components/select/dynamic.raw.jsx |  30 ++
 .../docs/content/components/select/dynamic.ts |  33 +-
 .../components/select/error-message.raw.jsx   |  43 +++
 .../components/select/error-message.ts        |  48 +--
 .../select/item-start-content.raw.jsx         |  68 ++++
 .../components/select/item-start-content.ts   |  68 +---
 .../select/label-placements.raw.jsx           |  61 ++++
 .../components/select/label-placements.ts     |  70 +---
 .../components/select/multiple-chips.raw.jsx  | 243 ++++++++++++++
 .../components/select/multiple-chips.raw.tsx  | 255 +++++++++++++++
 .../components/select/multiple-chips.ts       | 301 +----------------
 .../multiple-controlled-onchange.raw.jsx      |  43 +++
 .../multiple-controlled-onchange.raw.tsx      |  46 +++
 .../select/multiple-controlled-onchange.ts    |  81 +----
 .../select/multiple-controlled.raw.jsx        |  39 +++
 .../select/multiple-controlled.raw.tsx        |  42 +++
 .../components/select/multiple-controlled.ts  |  73 +----
 .../components/select/multiple.raw.jsx        |  32 ++
 .../content/components/select/multiple.ts     |  37 +--
 .../components/select/open-state.raw.jsx      |  41 +++
 .../content/components/select/open-state.ts   |  46 +--
 .../content/components/select/radius.raw.jsx  |  40 +++
 apps/docs/content/components/select/radius.ts |  51 +--
 .../components/select/required.raw.jsx        |  33 ++
 .../content/components/select/required.ts     |  38 +--
 .../components/select/sections.raw.jsx        |  28 ++
 .../content/components/select/sections.ts     |  33 +-
 .../select/single-controlled-onchange.raw.jsx |  43 +++
 .../select/single-controlled-onchange.raw.tsx |  44 +++
 .../select/single-controlled-onchange.ts      |  81 +----
 .../select/single-controlled.raw.jsx          |  39 +++
 .../select/single-controlled.raw.tsx          |  40 +++
 .../components/select/single-controlled.ts    |  73 +----
 .../content/components/select/sizes.raw.jsx   |  45 +++
 .../components/select/start-content.raw.jsx   |  67 ++++
 .../content/components/select/usage.raw.jsx   |  34 ++
 .../components/select/variants.raw.jsx        |  45 +++
 .../select/without-scroll-shadow.raw.jsx      |  35 ++
 60 files changed, 2918 insertions(+), 2266 deletions(-)
 create mode 100644 apps/docs/content/components/select/async-loading-items.raw.jsx
 create mode 100644 apps/docs/content/components/select/async-loading-items.raw.tsx
 create mode 100644 apps/docs/content/components/select/colors.raw.jsx
 create mode 100644 apps/docs/content/components/select/custom-items.raw.jsx
 create mode 100644 apps/docs/content/components/select/custom-render-value.raw.jsx
 create mode 100644 apps/docs/content/components/select/custom-render-value.raw.tsx
 create mode 100644 apps/docs/content/components/select/custom-sections-style.raw.jsx
 create mode 100644 apps/docs/content/components/select/custom-selector-icon.raw.jsx
 create mode 100644 apps/docs/content/components/select/custom-styles.raw.jsx
 create mode 100644 apps/docs/content/components/select/description.raw.jsx
 create mode 100644 apps/docs/content/components/select/disabled-items.raw.jsx
 create mode 100644 apps/docs/content/components/select/disabled.raw.jsx
 create mode 100644 apps/docs/content/components/select/dynamic.raw.jsx
 create mode 100644 apps/docs/content/components/select/error-message.raw.jsx
 create mode 100644 apps/docs/content/components/select/item-start-content.raw.jsx
 create mode 100644 apps/docs/content/components/select/label-placements.raw.jsx
 create mode 100644 apps/docs/content/components/select/multiple-chips.raw.jsx
 create mode 100644 apps/docs/content/components/select/multiple-chips.raw.tsx
 create mode 100644 apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx
 create mode 100644 apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx
 create mode 100644 apps/docs/content/components/select/multiple-controlled.raw.jsx
 create mode 100644 apps/docs/content/components/select/multiple-controlled.raw.tsx
 create mode 100644 apps/docs/content/components/select/multiple.raw.jsx
 create mode 100644 apps/docs/content/components/select/open-state.raw.jsx
 create mode 100644 apps/docs/content/components/select/radius.raw.jsx
 create mode 100644 apps/docs/content/components/select/required.raw.jsx
 create mode 100644 apps/docs/content/components/select/sections.raw.jsx
 create mode 100644 apps/docs/content/components/select/single-controlled-onchange.raw.jsx
 create mode 100644 apps/docs/content/components/select/single-controlled-onchange.raw.tsx
 create mode 100644 apps/docs/content/components/select/single-controlled.raw.jsx
 create mode 100644 apps/docs/content/components/select/single-controlled.raw.tsx
 create mode 100644 apps/docs/content/components/select/sizes.raw.jsx
 create mode 100644 apps/docs/content/components/select/start-content.raw.jsx
 create mode 100644 apps/docs/content/components/select/usage.raw.jsx
 create mode 100644 apps/docs/content/components/select/variants.raw.jsx
 create mode 100644 apps/docs/content/components/select/without-scroll-shadow.raw.jsx

diff --git a/apps/docs/content/components/select/async-loading-items.raw.jsx b/apps/docs/content/components/select/async-loading-items.raw.jsx
new file mode 100644
index 0000000000..d882cd4e03
--- /dev/null
+++ b/apps/docs/content/components/select/async-loading-items.raw.jsx
@@ -0,0 +1,98 @@
+/* eslint-disable no-console */
+
+import {Select, SelectItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+export function usePokemonList({fetchDelay = 0} = {}) {
+  const [items, setItems] = React.useState([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      if (error.name === "AbortError") {
+        console.log("Fetch aborted");
+      } else {
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <Select
+      className="max-w-xs"
+      isLoading={isLoading}
+      items={items}
+      label="Pick a Pokemon"
+      placeholder="Select a Pokemon"
+      scrollRef={scrollerRef}
+      selectionMode="single"
+      onOpenChange={setIsOpen}
+    >
+      {(item) => (
+        <SelectItem key={item.name} className="capitalize">
+          {item.name}
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/async-loading-items.raw.tsx b/apps/docs/content/components/select/async-loading-items.raw.tsx
new file mode 100644
index 0000000000..2a0f49d465
--- /dev/null
+++ b/apps/docs/content/components/select/async-loading-items.raw.tsx
@@ -0,0 +1,108 @@
+/* eslint-disable no-console */
+
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+export type Pokemon = {
+  name: string;
+  url: string;
+};
+
+export type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = React.useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      if (error.name === "AbortError") {
+        console.log("Fetch aborted");
+      } else {
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <Select
+      className="max-w-xs"
+      isLoading={isLoading}
+      items={items}
+      label="Pick a Pokemon"
+      placeholder="Select a Pokemon"
+      scrollRef={scrollerRef}
+      selectionMode="single"
+      onOpenChange={setIsOpen}
+    >
+      {(item) => (
+        <SelectItem key={item.name} className="capitalize">
+          {item.name}
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/async-loading-items.ts b/apps/docs/content/components/select/async-loading-items.ts
index c6de820cab..a69188c565 100644
--- a/apps/docs/content/components/select/async-loading-items.ts
+++ b/apps/docs/content/components/select/async-loading-items.ts
@@ -1,184 +1,12 @@
-const usePokemonListTs = `export type Pokemon = {
-  name: string;
-  url: string;
-};
-
-export type UsePokemonListProps = {
-  /** Delay to wait before fetching more items */
-  fetchDelay?: number;
-};
-
-export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
-  const [items, setItems] = React.useState<Pokemon[]>([]);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const limit = 10; // Number of items per page, adjust as necessary
-
-  const loadPokemon = async (currentOffset: number) => {
-    const controller = new AbortController();
-    const {signal} = controller;
-
-    try {
-      setIsLoading(true);
-
-      if (offset > 0) {
-        // Delay to simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
-      }
-
-      let res = await fetch(
-        \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
-        {signal},
-      );
-
-      if (!res.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-      // Append new results to existing ones
-      setItems((prevItems) => [...prevItems, ...json.results]);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
-        console.error("There was an error with the fetch operation:", error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    loadPokemon(offset);
-  }, []);
-
-  const onLoadMore = () => {
-    const newOffset = offset + limit;
-
-    setOffset(newOffset);
-    loadPokemon(newOffset);
-  };
-
-  return {
-    items,
-    hasMore,
-    isLoading,
-    onLoadMore,
-  };
-}
-
-`;
-
-const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) {
-  const [items, setItems] = React.useState([]);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const limit = 10; // Number of items per page, adjust as necessary
-
-  const loadPokemon = async (currentOffset) => {
-    const controller = new AbortController();
-    const {signal} = controller;
-
-    try {
-      setIsLoading(true);
-
-      if (offset > 0) {
-        // Delay to simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
-      }
-
-      let res = await fetch(
-        \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
-        {signal},
-      );
-
-      if (!res.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-      // Append new results to existing ones
-      setItems((prevItems) => [...prevItems, ...json.results]);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
-        console.error("There was an error with the fetch operation:", error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    loadPokemon(offset);
-  }, []);
-
-  const onLoadMore = () => {
-    const newOffset = offset + limit;
-
-    setOffset(newOffset);
-    loadPokemon(newOffset);
-  };
-
-  return {
-    items,
-    hasMore,
-    isLoading,
-    onLoadMore,
-  };
-};`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
-import {usePokemonList} from "./usePokemonList";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
-
-  const [, scrollerRef] = useInfiniteScroll({
-    hasMore,
-    isEnabled: isOpen,
-    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
-    onLoadMore,
-  });
-
-  return (
-    <Select
-      className="max-w-xs"
-      isLoading={isLoading}
-      items={items}
-      label="Pick a Pokemon"
-      placeholder="Select a Pokemon"
-      scrollRef={scrollerRef}
-      selectionMode="single"
-      onOpenChange={setIsOpen}
-    >
-      {(item) => (
-        <SelectItem key={item.name} className="capitalize">
-          {item.name}
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./async-loading-items.raw.jsx?raw";
+import AppTs from "./async-loading-items.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/usePokemonList.js": usePokemonList,
 };
 
 const reactTs = {
-  "/App.tsx": App,
-  "/usePokemonList.ts": usePokemonListTs,
+  "/App.tsx": AppTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/colors.raw.jsx b/apps/docs/content/components/select/colors.raw.jsx
new file mode 100644
index 0000000000..1732747ba5
--- /dev/null
+++ b/apps/docs/content/components/select/colors.raw.jsx
@@ -0,0 +1,40 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Select
+          key={color}
+          className="max-w-xs"
+          color={color}
+          defaultSelectedKeys={["cat"]}
+          label="Favorite Animal"
+          placeholder="Select an animal"
+        >
+          {animals.map((animal) => (
+            <SelectItem key={animal.key}>{animal.label}</SelectItem>
+          ))}
+        </Select>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/colors.ts b/apps/docs/content/components/select/colors.ts
index c830262ca1..d5bef810aa 100644
--- a/apps/docs/content/components/select/colors.ts
+++ b/apps/docs/content/components/select/colors.ts
@@ -1,57 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {colors.map((color) => (
-        <Select
-          key={color}
-          color={color}
-          label="Favorite Animal"
-          placeholder="Select an animal"
-          defaultSelectedKeys={["cat"]}
-          className="max-w-xs"
-        >
-          {animals.map((animal) => (
-            <SelectItem key={animal.key}>
-              {animal.label}
-            </SelectItem>
-          ))}
-        </Select>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-items.raw.jsx b/apps/docs/content/components/select/custom-items.raw.jsx
new file mode 100644
index 0000000000..b1b78c716a
--- /dev/null
+++ b/apps/docs/content/components/select/custom-items.raw.jsx
@@ -0,0 +1,228 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-items.ts b/apps/docs/content/components/select/custom-items.ts
index 66f7d96dd7..26a1e0f9ac 100644
--- a/apps/docs/content/components/select/custom-items.ts
+++ b/apps/docs/content/components/select/custom-items.ts
@@ -1,236 +1,7 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      className="max-w-xs"
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./custom-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-render-value.raw.jsx b/apps/docs/content/components/select/custom-render-value.raw.jsx
new file mode 100644
index 0000000000..c038d4d13a
--- /dev/null
+++ b/apps/docs/content/components/select/custom-render-value.raw.jsx
@@ -0,0 +1,247 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "h-12",
+      }}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items) => {
+        return items.map((item) => (
+          <div key={item.key} className="flex items-center gap-2">
+            <Avatar
+              alt={item.data.name}
+              className="flex-shrink-0"
+              size="sm"
+              src={item.data.avatar}
+            />
+            <div className="flex flex-col">
+              <span>{item.data.name}</span>
+              <span className="text-default-500 text-tiny">({item.data.email})</span>
+            </div>
+          </div>
+        ));
+      }}
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-render-value.raw.tsx b/apps/docs/content/components/select/custom-render-value.raw.tsx
new file mode 100644
index 0000000000..b46f9def2c
--- /dev/null
+++ b/apps/docs/content/components/select/custom-render-value.raw.tsx
@@ -0,0 +1,259 @@
+import React from "react";
+import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+type User = {
+  id: number;
+  name: string;
+  role: string;
+  team: string;
+  status: string;
+  age: string;
+  avatar: string;
+  email: string;
+};
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "h-12",
+      }}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items: SelectedItems<User>) => {
+        return items.map((item) => (
+          <div key={item.key} className="flex items-center gap-2">
+            <Avatar
+              alt={item.data.name}
+              className="flex-shrink-0"
+              size="sm"
+              src={item.data.avatar}
+            />
+            <div className="flex flex-col">
+              <span>{item.data.name}</span>
+              <span className="text-default-500 text-tiny">({item.data.email})</span>
+            </div>
+          </div>
+        ));
+      }}
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-render-value.ts b/apps/docs/content/components/select/custom-render-value.ts
index dc52e11211..3d16320688 100644
--- a/apps/docs/content/components/select/custom-render-value.ts
+++ b/apps/docs/content/components/select/custom-render-value.ts
@@ -1,317 +1,12 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "h-12",
-      }}
-      renderValue={(items) => {
-        return items.map((item) => (
-          <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
-            <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
-            </div>
-          </div>
-        ));
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react";
-import {users} from "./data";
-
-type User = {
-  id: number;
-  name: string;
-  role: string;
-  team: string;
-  status: string;
-  age: string;
-  avatar: string;
-  email: string;
-};
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "h-12",
-      }}
-      renderValue={(items: SelectedItems<User>) => {
-        return items.map((item) => (
-          <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
-            <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
-            </div>
-          </div>
-        ));
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./custom-render-value.raw.jsx?raw";
+import AppTs from "./custom-render-value.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-sections-style.raw.jsx b/apps/docs/content/components/select/custom-sections-style.raw.jsx
new file mode 100644
index 0000000000..17826ba15c
--- /dev/null
+++ b/apps/docs/content/components/select/custom-sections-style.raw.jsx
@@ -0,0 +1,48 @@
+import {Select, SelectItem, SelectSection} from "@nextui-org/react";
+
+export default function App() {
+  const headingClasses =
+    "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small";
+
+  return (
+    <Select
+      className="max-w-xs"
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      scrollShadowProps={{
+        isEnabled: false,
+      }}
+    >
+      <SelectSection
+        classNames={{
+          heading: headingClasses,
+        }}
+        title="Mammals"
+      >
+        <SelectItem key="Lion">Lion</SelectItem>
+        <SelectItem key="Tiger">Tiger</SelectItem>
+        <SelectItem key="Elephant">Elephant</SelectItem>
+        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
+        <SelectItem key="Panda">Panda</SelectItem>
+        <SelectItem key="Giraffe">Giraffe</SelectItem>
+        <SelectItem key="Zebra">Zebra</SelectItem>
+        <SelectItem key="Cheetah">Cheetah</SelectItem>
+      </SelectSection>
+      <SelectSection
+        classNames={{
+          heading: headingClasses,
+        }}
+        title="Birds"
+      >
+        <SelectItem key="Eagle">Eagle</SelectItem>
+        <SelectItem key="Parrot">Parrot</SelectItem>
+        <SelectItem key="Penguin">Penguin</SelectItem>
+        <SelectItem key="Ostrich">Ostrich</SelectItem>
+        <SelectItem key="Peacock">Peacock</SelectItem>
+        <SelectItem key="Swan">Swan</SelectItem>
+        <SelectItem key="Falcon">Falcon</SelectItem>
+        <SelectItem key="Flamingo">Flamingo</SelectItem>
+      </SelectSection>
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-sections-style.ts b/apps/docs/content/components/select/custom-sections-style.ts
index 9551a80049..9ba8a6cd9c 100644
--- a/apps/docs/content/components/select/custom-sections-style.ts
+++ b/apps/docs/content/components/select/custom-sections-style.ts
@@ -1,50 +1,4 @@
-const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react";
-
-export default function App() {
-  const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small";
-
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      className="max-w-xs"
-      scrollShadowProps={{
-        isEnabled: false,
-      }}
-    >
-      <SelectSection 
-        title="Mammals"
-        classNames={{
-          heading: headingClasses,
-        }}
-      >
-        <SelectItem key="Lion">Lion</SelectItem>
-        <SelectItem key="Tiger">Tiger</SelectItem>
-        <SelectItem key="Elephant">Elephant</SelectItem>
-        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
-        <SelectItem key="Panda">Panda</SelectItem>
-        <SelectItem key="Giraffe">Giraffe</SelectItem>
-        <SelectItem key="Zebra">Zebra</SelectItem>
-        <SelectItem key="Cheetah">Cheetah</SelectItem>
-      </SelectSection>
-      <SelectSection 
-        title="Birds"
-        classNames={{
-          heading: headingClasses,
-        }}
-      >
-        <SelectItem key="Eagle">Eagle</SelectItem>
-        <SelectItem key="Parrot">Parrot</SelectItem>
-        <SelectItem key="Penguin">Penguin</SelectItem>
-        <SelectItem key="Ostrich">Ostrich</SelectItem>
-        <SelectItem key="Peacock">Peacock</SelectItem>
-        <SelectItem key="Swan">Swan</SelectItem>
-        <SelectItem key="Falcon">Falcon</SelectItem>
-        <SelectItem key="Flamingo">Flamingo</SelectItem>
-      </SelectSection>
-    </Select>
-  );
-}`;
+import App from "./custom-sections-style.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/select/custom-selector-icon.raw.jsx b/apps/docs/content/components/select/custom-selector-icon.raw.jsx
new file mode 100644
index 0000000000..1ba88429cb
--- /dev/null
+++ b/apps/docs/content/components/select/custom-selector-icon.raw.jsx
@@ -0,0 +1,55 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const SelectorIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+    <path d="M8 9l4 -4l4 4" />
+    <path d="M16 15l-4 4l-4 -4" />
+  </svg>
+);
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      disableSelectorIconRotation
+      className="max-w-xs"
+      label="Favorite Animal"
+      labelPlacement="outside"
+      placeholder="Select an animal"
+      selectorIcon={<SelectorIcon />}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-selector-icon.ts b/apps/docs/content/components/select/custom-selector-icon.ts
index 18770cfb44..ee2c7d9a8b 100644
--- a/apps/docs/content/components/select/custom-selector-icon.ts
+++ b/apps/docs/content/components/select/custom-selector-icon.ts
@@ -1,67 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const SelectorIcon = `export const SelectorIcon = (props) => (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      role="presentation"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <path d="M0 0h24v24H0z" fill="none" stroke="none" />
-      <path d="M8 9l4 -4l4 4" />
-      <path d="M16 15l-4 4l-4 -4" />
-    </svg>
-);`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {SelectorIcon} from "./SelectorIcon";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      labelPlacement="outside"
-      className="max-w-xs"
-      disableSelectorIconRotation
-      selectorIcon={<SelectorIcon />}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./custom-selector-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/SelectorIcon.jsx": SelectorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-styles.raw.jsx b/apps/docs/content/components/select/custom-styles.raw.jsx
new file mode 100644
index 0000000000..6aad7b60dc
--- /dev/null
+++ b/apps/docs/content/components/select/custom-styles.raw.jsx
@@ -0,0 +1,269 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      classNames={{
+        label: "group-data-[filled=true]:-translate-y-5",
+        trigger: "min-h-16",
+        listboxWrapper: "max-h-[400px]",
+      }}
+      items={users}
+      label="Assigned to"
+      listboxProps={{
+        itemClasses: {
+          base: [
+            "rounded-md",
+            "text-default-500",
+            "transition-opacity",
+            "data-[hover=true]:text-foreground",
+            "data-[hover=true]:bg-default-100",
+            "dark:data-[hover=true]:bg-default-50",
+            "data-[selectable=true]:focus:bg-default-50",
+            "data-[pressed=true]:opacity-70",
+            "data-[focus-visible=true]:ring-default-500",
+          ],
+        },
+      }}
+      popoverProps={{
+        classNames: {
+          base: "before:bg-default-200",
+          content: "p-0 border-small border-divider bg-background",
+        },
+      }}
+      renderValue={(items) => {
+        return items.map((item) => (
+          <div key={item.key} className="flex items-center gap-2">
+            <Avatar
+              alt={item.data.name}
+              className="flex-shrink-0"
+              size="sm"
+              src={item.data.avatar}
+            />
+            <div className="flex flex-col">
+              <span>{item.data.name}</span>
+              <span className="text-default-500 text-tiny">({item.data.email})</span>
+            </div>
+          </div>
+        ));
+      }}
+      variant="bordered"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts
index ae2db45e8a..da3ea9093a 100644
--- a/apps/docs/content/components/select/custom-styles.ts
+++ b/apps/docs/content/components/select/custom-styles.ts
@@ -1,277 +1,7 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      className="max-w-xs"
-      variant="bordered"
-      classNames={{
-        label: "group-data-[filled=true]:-translate-y-5",
-        trigger: "min-h-16",
-        listboxWrapper: "max-h-[400px]",
-      }}
-      listboxProps={{
-        itemClasses: {
-          base: [
-            "rounded-md",
-            "text-default-500",
-            "transition-opacity",
-            "data-[hover=true]:text-foreground",
-            "data-[hover=true]:bg-default-100",
-            "dark:data-[hover=true]:bg-default-50",
-            "data-[selectable=true]:focus:bg-default-50",
-            "data-[pressed=true]:opacity-70",
-            "data-[focus-visible=true]:ring-default-500",
-          ],
-        },
-      }}
-      popoverProps={{
-        classNames: {
-          base: "before:bg-default-200",
-          content: "p-0 border-small border-divider bg-background",
-        },
-      }}
-      renderValue={(items) => {
-        return items.map((item) => (
-          <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
-            <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
-            </div>
-          </div>
-        ));
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/description.raw.jsx b/apps/docs/content/components/select/description.raw.jsx
new file mode 100644
index 0000000000..ead30aaa95
--- /dev/null
+++ b/apps/docs/content/components/select/description.raw.jsx
@@ -0,0 +1,33 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      description="The second most popular pet in the world"
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/description.ts b/apps/docs/content/components/select/description.ts
index b39c36847d..aeb6340b6b 100644
--- a/apps/docs/content/components/select/description.ts
+++ b/apps/docs/content/components/select/description.ts
@@ -1,43 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      description="The second most popular pet in the world"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/disabled-items.raw.jsx b/apps/docs/content/components/select/disabled-items.raw.jsx
new file mode 100644
index 0000000000..fcebedbb83
--- /dev/null
+++ b/apps/docs/content/components/select/disabled-items.raw.jsx
@@ -0,0 +1,32 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      disabledKeys={["zebra", "tiger", "lion", "elephant", "crocodile", "whale"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/disabled-items.ts b/apps/docs/content/components/select/disabled-items.ts
index 64bed55e89..4ff907eed2 100644
--- a/apps/docs/content/components/select/disabled-items.ts
+++ b/apps/docs/content/components/select/disabled-items.ts
@@ -1,42 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      disabledKeys={["zebra", "tiger", "lion", "elephant", "crocodile", "whale"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./disabled-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/disabled.raw.jsx b/apps/docs/content/components/select/disabled.raw.jsx
new file mode 100644
index 0000000000..401ae52a4d
--- /dev/null
+++ b/apps/docs/content/components/select/disabled.raw.jsx
@@ -0,0 +1,33 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      isDisabled
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/disabled.ts b/apps/docs/content/components/select/disabled.ts
index dc9b756812..1a215cc91f 100644
--- a/apps/docs/content/components/select/disabled.ts
+++ b/apps/docs/content/components/select/disabled.ts
@@ -1,43 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      isDisabled
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/dynamic.raw.jsx b/apps/docs/content/components/select/dynamic.raw.jsx
new file mode 100644
index 0000000000..5796f069eb
--- /dev/null
+++ b/apps/docs/content/components/select/dynamic.raw.jsx
@@ -0,0 +1,30 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      items={animals}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {(animal) => <SelectItem>{animal.label}</SelectItem>}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/dynamic.ts b/apps/docs/content/components/select/dynamic.ts
index 6a7c5304c9..5d3c97bb9a 100644
--- a/apps/docs/content/components/select/dynamic.ts
+++ b/apps/docs/content/components/select/dynamic.ts
@@ -1,38 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={animals}
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      className="max-w-xs"
-    >
-      {(animal) => <SelectItem>{animal.label}</SelectItem>}
-    </Select>
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/error-message.raw.jsx b/apps/docs/content/components/select/error-message.raw.jsx
new file mode 100644
index 0000000000..a4499144e7
--- /dev/null
+++ b/apps/docs/content/components/select/error-message.raw.jsx
@@ -0,0 +1,43 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState(new Set([]));
+  const [touched, setTouched] = React.useState(false);
+
+  const isValid = value.has("cat");
+
+  return (
+    <Select
+      className="max-w-xs"
+      description="The second most popular pet in the world"
+      errorMessage={isValid || !touched ? "" : "You must select a cat"}
+      isInvalid={isValid || !touched ? false : true}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      selectedKeys={value}
+      variant="bordered"
+      onClose={() => setTouched(true)}
+      onSelectionChange={setValue}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/error-message.ts b/apps/docs/content/components/select/error-message.ts
index 416a1d49bb..fb8101b132 100644
--- a/apps/docs/content/components/select/error-message.ts
+++ b/apps/docs/content/components/select/error-message.ts
@@ -1,53 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState(new Set([]));
-  const [touched, setTouched] = React.useState(false);
-
-  const isValid = value.has("cat");
-
-  return (
-    <Select
-      label="Favorite Animal"
-      variant="bordered"
-      placeholder="Select an animal"
-      description="The second most popular pet in the world"
-      errorMessage={isValid || !touched ? "" : "You must select a cat"}
-      isInvalid={isValid || !touched ? false : true}
-      selectedKeys={value}
-      className="max-w-xs"
-      onSelectionChange={setValue}
-      onClose={() => setTouched(true)}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/item-start-content.raw.jsx b/apps/docs/content/components/select/item-start-content.raw.jsx
new file mode 100644
index 0000000000..9006a2bf1b
--- /dev/null
+++ b/apps/docs/content/components/select/item-start-content.raw.jsx
@@ -0,0 +1,68 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Select className="max-w-xs" label="Select country">
+      <SelectItem
+        key="argentina"
+        startContent={
+          <Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />
+        }
+      >
+        Argentina
+      </SelectItem>
+      <SelectItem
+        key="venezuela"
+        startContent={
+          <Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />
+        }
+      >
+        Venezuela
+      </SelectItem>
+      <SelectItem
+        key="brazil"
+        startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
+      >
+        Brazil
+      </SelectItem>
+      <SelectItem
+        key="switzerland"
+        startContent={
+          <Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
+        }
+      >
+        Switzerland
+      </SelectItem>
+      <SelectItem
+        key="germany"
+        startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
+      >
+        Germany
+      </SelectItem>
+      <SelectItem
+        key="spain"
+        startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
+      >
+        Spain
+      </SelectItem>
+      <SelectItem
+        key="france"
+        startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
+      >
+        France
+      </SelectItem>
+      <SelectItem
+        key="italy"
+        startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
+      >
+        Italy
+      </SelectItem>
+      <SelectItem
+        key="mexico"
+        startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
+      >
+        Mexico
+      </SelectItem>
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/item-start-content.ts b/apps/docs/content/components/select/item-start-content.ts
index ddf3818b25..294a22e6b2 100644
--- a/apps/docs/content/components/select/item-start-content.ts
+++ b/apps/docs/content/components/select/item-start-content.ts
@@ -1,70 +1,4 @@
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Select
-      className="max-w-xs"
-      label="Select country"
-    >
-      <SelectItem
-        key="argentina"
-        startContent={<Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />}
-      >
-        Argentina
-      </SelectItem>
-      <SelectItem
-        key="venezuela"
-        startContent={<Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />}
-      >
-        Venezuela
-      </SelectItem>
-      <SelectItem
-        key="brazil"
-        startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
-      >
-        Brazil
-      </SelectItem>
-      <SelectItem
-        key="switzerland"
-        startContent={
-          <Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
-        }
-      >
-        Switzerland
-      </SelectItem>
-      <SelectItem
-        key="germany"
-        startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
-      >
-        Germany
-      </SelectItem>
-      <SelectItem
-        key="spain"
-        startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
-      >
-        Spain
-      </SelectItem>
-      <SelectItem
-        key="france"
-        startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
-      >
-        France
-      </SelectItem>
-      <SelectItem
-        key="italy"
-        startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
-      >
-        Italy
-      </SelectItem>
-      <SelectItem
-        key="mexico"
-        startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
-      >
-        Mexico
-      </SelectItem>
-    </Select>
-  );
-}`;
+import App from "./item-start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/select/label-placements.raw.jsx b/apps/docs/content/components/select/label-placements.raw.jsx
new file mode 100644
index 0000000000..86982bafb1
--- /dev/null
+++ b/apps/docs/content/components/select/label-placements.raw.jsx
@@ -0,0 +1,61 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">Without placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Select
+              key={placement}
+              className="max-w-xs"
+              label="Favorite Animal"
+              labelPlacement={placement}
+            >
+              {animals.map((animal) => (
+                <SelectItem key={animal.key}>{animal.label}</SelectItem>
+              ))}
+            </Select>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">With placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Select
+              key={placement}
+              className="max-w-xs"
+              label="Favorite Animal"
+              labelPlacement={placement}
+              placeholder="Select an animal"
+            >
+              {animals.map((animal) => (
+                <SelectItem key={animal.key}>{animal.label}</SelectItem>
+              ))}
+            </Select>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/label-placements.ts b/apps/docs/content/components/select/label-placements.ts
index a147bb84a7..cd2a65d352 100644
--- a/apps/docs/content/components/select/label-placements.ts
+++ b/apps/docs/content/components/select/label-placements.ts
@@ -1,75 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">Without placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Select
-              labelPlacement={placement}
-              label="Favorite Animal"
-              className="max-w-xs"
-            >
-              {animals.map((animal) => (
-                <SelectItem key={animal.key}>
-                  {animal.label}
-                </SelectItem>
-              ))}
-            </Select>
-          ))}
-        </div>
-      </div>  
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">With placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Select
-              labelPlacement={placement}
-              label="Favorite Animal"
-              placeholder="Select an animal"
-              className="max-w-xs"
-            >
-              {animals.map((animal) => (
-                <SelectItem key={animal.key}>
-                  {animal.label}
-                </SelectItem>
-              ))}
-            </Select>
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple-chips.raw.jsx b/apps/docs/content/components/select/multiple-chips.raw.jsx
new file mode 100644
index 0000000000..3c0dd44cad
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-chips.raw.jsx
@@ -0,0 +1,243 @@
+import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "min-h-12 py-2",
+      }}
+      isMultiline={true}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items) => {
+        return (
+          <div className="flex flex-wrap gap-2">
+            {items.map((item) => (
+              <Chip key={item.key}>{item.data.name}</Chip>
+            ))}
+          </div>
+        );
+      }}
+      selectionMode="multiple"
+      variant="bordered"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-chips.raw.tsx b/apps/docs/content/components/select/multiple-chips.raw.tsx
new file mode 100644
index 0000000000..18f206aed9
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-chips.raw.tsx
@@ -0,0 +1,255 @@
+import React from "react";
+import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+type User = {
+  id: number;
+  name: string;
+  role: string;
+  team: string;
+  status: string;
+  age: string;
+  avatar: string;
+  email: string;
+};
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "min-h-12 py-2",
+      }}
+      isMultiline={true}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items: SelectedItems<User>) => {
+        return (
+          <div className="flex flex-wrap gap-2">
+            {items.map((item) => (
+              <Chip key={item.key}>{item.data?.name}</Chip>
+            ))}
+          </div>
+        );
+      }}
+      selectionMode="multiple"
+      variant="bordered"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-chips.ts b/apps/docs/content/components/select/multiple-chips.ts
index 1919c994ea..0c169cde37 100644
--- a/apps/docs/content/components/select/multiple-chips.ts
+++ b/apps/docs/content/components/select/multiple-chips.ts
@@ -1,309 +1,12 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      variant="bordered"
-      isMultiline={true}
-      selectionMode="multiple"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "min-h-12 py-2",
-      }}
-      renderValue={(items) => {
-        return (
-          <div className="flex flex-wrap gap-2">
-            {items.map((item) => (
-              <Chip key={item.key}>{item.data.name}</Chip>
-            ))}
-          </div>
-        );
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react";
-import {users} from "./data";
-
-type User = {
-  id: number;
-  name: string;
-  role: string;
-  team: string;
-  status: string;
-  age: string;
-  avatar: string;
-  email: string;
-};
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      variant="bordered"
-      isMultiline={true}
-      selectionMode="multiple"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "min-h-12 py-2",
-      }}
-      renderValue={(items: SelectedItems<User>) => {
-        return (
-          <div className="flex flex-wrap gap-2">
-            {items.map((item) => (
-              <Chip key={item.key}>{item.data.name}</Chip>
-            ))}
-          </div>
-        );
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./multiple-chips.raw.jsx?raw";
+import AppTs from "./multiple-chips.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx
new file mode 100644
index 0000000000..1b79957568
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx
@@ -0,0 +1,43 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState(new Set([]));
+
+  const handleSelectionChange = (e) => {
+    setValues(new Set(e.target.value.split(",")));
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx
new file mode 100644
index 0000000000..d171292536
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx
@@ -0,0 +1,46 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState<Selection>(new Set([]));
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setValues(new Set(e.target.value.split(",")));
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.ts b/apps/docs/content/components/select/multiple-controlled-onchange.ts
index e12d5cf7d3..a8b2a21759 100644
--- a/apps/docs/content/components/select/multiple-controlled-onchange.ts
+++ b/apps/docs/content/components/select/multiple-controlled-onchange.ts
@@ -1,89 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState(new Set([]));
-
-  const handleSelectionChange = (e) => {
-    setValues(new Set(e.target.value.split(",")));
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>      
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState<Selection>(new Set([]));
-
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setValues(new Set(e.target.value.split(",")));
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>      
-  );
-}`;
+import App from "./multiple-controlled-onchange.raw.jsx?raw";
+import AppTs from "./multiple-controlled-onchange.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple-controlled.raw.jsx b/apps/docs/content/components/select/multiple-controlled.raw.jsx
new file mode 100644
index 0000000000..0d18ab0e6e
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled.raw.jsx
@@ -0,0 +1,39 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState(new Set(["cat", "dog"]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onSelectionChange={setValues}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled.raw.tsx b/apps/docs/content/components/select/multiple-controlled.raw.tsx
new file mode 100644
index 0000000000..c9b9d3f8bf
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled.raw.tsx
@@ -0,0 +1,42 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState<Selection>(new Set(["cat", "dog"]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onSelectionChange={setValues}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled.ts b/apps/docs/content/components/select/multiple-controlled.ts
index 2bfc63c6c7..ebc28a01db 100644
--- a/apps/docs/content/components/select/multiple-controlled.ts
+++ b/apps/docs/content/components/select/multiple-controlled.ts
@@ -1,81 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState(new Set(["cat", "dog"]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onSelectionChange={setValues}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState<Selection>(new Set(["cat", "dog"]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onSelectionChange={setValues}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>
-  );
-}`;
+import App from "./multiple-controlled.raw.jsx?raw";
+import AppTs from "./multiple-controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple.raw.jsx b/apps/docs/content/components/select/multiple.raw.jsx
new file mode 100644
index 0000000000..71bf4b1465
--- /dev/null
+++ b/apps/docs/content/components/select/multiple.raw.jsx
@@ -0,0 +1,32 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      selectionMode="multiple"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple.ts b/apps/docs/content/components/select/multiple.ts
index 5edb2da50f..8ad090fa27 100644
--- a/apps/docs/content/components/select/multiple.ts
+++ b/apps/docs/content/components/select/multiple.ts
@@ -1,42 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      selectionMode="multiple"
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./multiple.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/open-state.raw.jsx b/apps/docs/content/components/select/open-state.raw.jsx
new file mode 100644
index 0000000000..bd553f9d07
--- /dev/null
+++ b/apps/docs/content/components/select/open-state.raw.jsx
@@ -0,0 +1,41 @@
+import {Select, SelectItem, Button} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex w-full max-w-xs items-center gap-2">
+      <Select
+        className="max-w-xs"
+        defaultSelectedKeys={["cat"]}
+        isOpen={isOpen}
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        onOpenChange={(open) => open !== isOpen && setIsOpen(open)}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <Button aria-label="Open" aria-pressed={isOpen} onPress={() => setIsOpen(!isOpen)}>
+        {isOpen ? "Close" : "Open"}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/open-state.ts b/apps/docs/content/components/select/open-state.ts
index 97e13a99a7..5d40fb0bf0 100644
--- a/apps/docs/content/components/select/open-state.ts
+++ b/apps/docs/content/components/select/open-state.ts
@@ -1,51 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem, Button} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex w-full max-w-xs items-center gap-2">
-      <Select
-        isOpen={isOpen}
-        label="Favorite Animal"
-        placeholder="Select an animal"
-        defaultSelectedKeys={["cat"]}
-        onOpenChange={(open) => open !== isOpen && setIsOpen(open)}
-        className="max-w-xs"
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <Button aria-label="Open" aria-pressed={isOpen} onPress={() => setIsOpen(!isOpen)}>
-        {isOpen ? "Close" : "Open"}
-      </Button>
-    </div>
-  );
-}`;
+import App from "./open-state.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/radius.raw.jsx b/apps/docs/content/components/select/radius.raw.jsx
new file mode 100644
index 0000000000..9375e69cb6
--- /dev/null
+++ b/apps/docs/content/components/select/radius.raw.jsx
@@ -0,0 +1,40 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {radius.map((r) => (
+        <Select
+          key={r}
+          className="max-w-[45%]"
+          defaultSelectedKeys={["cat"]}
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          radius={r}
+        >
+          {animals.map((animal) => (
+            <SelectItem key={animal.key}>{animal.label}</SelectItem>
+          ))}
+        </Select>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/radius.ts b/apps/docs/content/components/select/radius.ts
index 543c0c91df..7b78db1ce0 100644
--- a/apps/docs/content/components/select/radius.ts
+++ b/apps/docs/content/components/select/radius.ts
@@ -1,56 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const radius = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {radius.map((r) => (
-        <Select
-          key={r}
-          radius={r}
-          label="Favorite Animal"
-          placeholder="Select an animal"
-          defaultSelectedKeys={["cat"]}
-          className="max-w-[45%]"
-        >
-          {animals.map((animal) => (
-            <SelectItem key={animal.key}>
-              {animal.label}
-            </SelectItem>
-          ))}
-        </Select>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/required.raw.jsx b/apps/docs/content/components/select/required.raw.jsx
new file mode 100644
index 0000000000..9a9f4f0cbd
--- /dev/null
+++ b/apps/docs/content/components/select/required.raw.jsx
@@ -0,0 +1,33 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      isRequired
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/required.ts b/apps/docs/content/components/select/required.ts
index f6447eba53..b50b781e6f 100644
--- a/apps/docs/content/components/select/required.ts
+++ b/apps/docs/content/components/select/required.ts
@@ -1,43 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      isRequired
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/sections.raw.jsx b/apps/docs/content/components/select/sections.raw.jsx
new file mode 100644
index 0000000000..30a61aa009
--- /dev/null
+++ b/apps/docs/content/components/select/sections.raw.jsx
@@ -0,0 +1,28 @@
+import {Select, SelectItem, SelectSection} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Select className="max-w-xs" label="Favorite Animal" placeholder="Select an animal">
+      <SelectSection showDivider title="Mammals">
+        <SelectItem key="Lion">Lion</SelectItem>
+        <SelectItem key="Tiger">Tiger</SelectItem>
+        <SelectItem key="Elephant">Elephant</SelectItem>
+        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
+        <SelectItem key="Panda">Panda</SelectItem>
+        <SelectItem key="Giraffe">Giraffe</SelectItem>
+        <SelectItem key="Zebra">Zebra</SelectItem>
+        <SelectItem key="Cheetah">Cheetah</SelectItem>
+      </SelectSection>
+      <SelectSection title="Birds">
+        <SelectItem key="Eagle">Eagle</SelectItem>
+        <SelectItem key="Parrot">Parrot</SelectItem>
+        <SelectItem key="Penguin">Penguin</SelectItem>
+        <SelectItem key="Ostrich">Ostrich</SelectItem>
+        <SelectItem key="Peacock">Peacock</SelectItem>
+        <SelectItem key="Swan">Swan</SelectItem>
+        <SelectItem key="Falcon">Falcon</SelectItem>
+        <SelectItem key="Flamingo">Flamingo</SelectItem>
+      </SelectSection>
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/sections.ts b/apps/docs/content/components/select/sections.ts
index e1c02ebdb4..17cd360ea3 100644
--- a/apps/docs/content/components/select/sections.ts
+++ b/apps/docs/content/components/select/sections.ts
@@ -1,35 +1,4 @@
-const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      className="max-w-xs"
-    >
-      <SelectSection showDivider title="Mammals">
-        <SelectItem key="Lion">Lion</SelectItem>
-        <SelectItem key="Tiger">Tiger</SelectItem>
-        <SelectItem key="Elephant">Elephant</SelectItem>
-        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
-        <SelectItem key="Panda">Panda</SelectItem>
-        <SelectItem key="Giraffe">Giraffe</SelectItem>
-        <SelectItem key="Zebra">Zebra</SelectItem>
-        <SelectItem key="Cheetah">Cheetah</SelectItem>
-      </SelectSection>
-      <SelectSection title="Birds">
-        <SelectItem key="Eagle">Eagle</SelectItem>
-        <SelectItem key="Parrot">Parrot</SelectItem>
-        <SelectItem key="Penguin">Penguin</SelectItem>
-        <SelectItem key="Ostrich">Ostrich</SelectItem>
-        <SelectItem key="Peacock">Peacock</SelectItem>
-        <SelectItem key="Swan">Swan</SelectItem>
-        <SelectItem key="Falcon">Falcon</SelectItem>
-        <SelectItem key="Flamingo">Flamingo</SelectItem>
-      </SelectSection>
-    </Select>
-  );
-}`;
+import App from "./sections.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.jsx b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx
new file mode 100644
index 0000000000..43b41a4e27
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx
@@ -0,0 +1,43 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  const handleSelectionChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={[value]}
+        variant="bordered"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.tsx b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx
new file mode 100644
index 0000000000..c5199449ce
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState<string>("");
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={[value]}
+        variant="bordered"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled-onchange.ts b/apps/docs/content/components/select/single-controlled-onchange.ts
index b74254621a..3b52be133b 100644
--- a/apps/docs/content/components/select/single-controlled-onchange.ts
+++ b/apps/docs/content/components/select/single-controlled-onchange.ts
@@ -1,89 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-
-  const handleSelectionChange = (e) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={[value]}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState<string>("");
-
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={[value]}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {value}</p>
-    </div>
-  );
-}`;
+import App from "./single-controlled-onchange.raw.jsx?raw";
+import AppTs from "./single-controlled-onchange.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/single-controlled.raw.jsx b/apps/docs/content/components/select/single-controlled.raw.jsx
new file mode 100644
index 0000000000..a066013863
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled.raw.jsx
@@ -0,0 +1,39 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState(new Set([]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={value}
+        variant="bordered"
+        onSelectionChange={setValue}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled.raw.tsx b/apps/docs/content/components/select/single-controlled.raw.tsx
new file mode 100644
index 0000000000..58b292ea79
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled.raw.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import {Select, SelectItem, Selection} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState<Selection>(new Set([]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={value}
+        variant="bordered"
+        onSelectionChange={setValue}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-default-500 text-small">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled.ts b/apps/docs/content/components/select/single-controlled.ts
index cae9bd5401..44c55e0568 100644
--- a/apps/docs/content/components/select/single-controlled.ts
+++ b/apps/docs/content/components/select/single-controlled.ts
@@ -1,81 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState<Selection>(new Set([]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={value}
-        className="max-w-xs"
-        onSelectionChange={setValue}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-default-500 text-small">Selected: {value}</p>
-    </div>
-  );
-}`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState(new Set([]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={value}
-        className="max-w-xs"
-        onSelectionChange={setValue}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {value}</p>
-    </div>
-  );
-}`;
+import App from "./single-controlled.raw.jsx?raw";
+import AppTs from "./single-controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/sizes.raw.jsx b/apps/docs/content/components/select/sizes.raw.jsx
new file mode 100644
index 0000000000..afaeafc7a0
--- /dev/null
+++ b/apps/docs/content/components/select/sizes.raw.jsx
@@ -0,0 +1,45 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Select className="max-w-xs" label="Select an animal" size={size}>
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+          <Select
+            className="max-w-xs"
+            label="Favorite Animal"
+            placeholder="Select an animal"
+            size={size}
+          >
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/start-content.raw.jsx b/apps/docs/content/components/select/start-content.raw.jsx
new file mode 100644
index 0000000000..99b6568b6d
--- /dev/null
+++ b/apps/docs/content/components/select/start-content.raw.jsx
@@ -0,0 +1,67 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const PetIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+      fill="currentColor"
+    />
+    <path
+      d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+      fill="currentColor"
+    />
+    <path
+      d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+      fill="currentColor"
+    />
+    <path
+      d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      startContent={<PetIcon />}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/usage.raw.jsx b/apps/docs/content/components/select/usage.raw.jsx
new file mode 100644
index 0000000000..1337231116
--- /dev/null
+++ b/apps/docs/content/components/select/usage.raw.jsx
@@ -0,0 +1,34 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select className="max-w-xs" label="Select an animal">
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <Select className="max-w-xs" label="Favorite Animal" placeholder="Select an animal">
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/variants.raw.jsx b/apps/docs/content/components/select/variants.raw.jsx
new file mode 100644
index 0000000000..78c5577ca7
--- /dev/null
+++ b/apps/docs/content/components/select/variants.raw.jsx
@@ -0,0 +1,45 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Select className="max-w-xs" label="Select an animal" variant={variant}>
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+          <Select
+            className="max-w-xs"
+            label="Favorite Animal"
+            placeholder="Select an animal"
+            variant={variant}
+          >
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/without-scroll-shadow.raw.jsx b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx
new file mode 100644
index 0000000000..3aab534e2b
--- /dev/null
+++ b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx
@@ -0,0 +1,35 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      scrollShadowProps={{
+        isEnabled: false,
+      }}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}

From 1445c55d99eff643b94fea0fdd228cafd1dc0140 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 16 Nov 2024 12:45:10 +0800
Subject: [PATCH 2/5] refactor(docs): select dx

---
 apps/docs/content/components/select/sizes.ts  | 56 +-------------
 .../components/select/start-content.ts        | 73 +------------------
 apps/docs/content/components/select/usage.ts  | 48 +-----------
 .../content/components/select/variants.ts     | 56 +-------------
 4 files changed, 4 insertions(+), 229 deletions(-)

diff --git a/apps/docs/content/components/select/sizes.ts b/apps/docs/content/components/select/sizes.ts
index 02b1cde2d0..85a2f5b30b 100644
--- a/apps/docs/content/components/select/sizes.ts
+++ b/apps/docs/content/components/select/sizes.ts
@@ -1,61 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const sizes = ["sm", "md", "lg"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {sizes.map((size) => (
-        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Select 
-            size={size}
-            label="Select an animal" 
-            className="max-w-xs" 
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-          <Select
-            size={size}
-            label="Favorite Animal"
-            placeholder="Select an animal"
-            className="max-w-xs"
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/start-content.ts b/apps/docs/content/components/select/start-content.ts
index 7b896eaf3f..59191d72a7 100644
--- a/apps/docs/content/components/select/start-content.ts
+++ b/apps/docs/content/components/select/start-content.ts
@@ -1,78 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const PetIcon = `export const PetIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
-      fill="currentColor"
-    />
-    <path
-      d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
-      fill="currentColor"
-    />
-    <path
-      d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {PetIcon} from "./PetIcon";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      className="max-w-xs"
-      defaultSelectedKeys={["cat"]}
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      startContent={<PetIcon />}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>{animal.label}</SelectItem>
-      ))}
-    </Select>
-  );
-}
-`;
+import App from "./start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/PetIcon.jsx": PetIcon,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/usage.ts b/apps/docs/content/components/select/usage.ts
index d676e3edb7..1118304c37 100644
--- a/apps/docs/content/components/select/usage.ts
+++ b/apps/docs/content/components/select/usage.ts
@@ -1,53 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Select 
-        label="Select an animal" 
-        className="max-w-xs" 
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <Select
-        label="Favorite Animal"
-        placeholder="Select an animal"
-        className="max-w-xs"
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/variants.ts b/apps/docs/content/components/select/variants.ts
index 040be0e123..ddea95fb2e 100644
--- a/apps/docs/content/components/select/variants.ts
+++ b/apps/docs/content/components/select/variants.ts
@@ -1,61 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Select 
-            variant={variant}
-            label="Select an animal" 
-            className="max-w-xs" 
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-          <Select
-            variant={variant}
-            label="Favorite Animal"
-            placeholder="Select an animal"
-            className="max-w-xs"
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {

From 4c4fb11e03c081504662a27711247abaf714a9c9 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 16 Nov 2024 12:56:27 +0800
Subject: [PATCH 3/5] refactor(docs): select dx

---
 .../select/custom-selector-icon.raw.jsx       | 42 ++++++------
 .../components/select/start-content.raw.jsx   | 68 ++++++++++---------
 apps/docs/content/docs/components/select.mdx  | 14 ++--
 3 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/apps/docs/content/components/select/custom-selector-icon.raw.jsx b/apps/docs/content/components/select/custom-selector-icon.raw.jsx
index 1ba88429cb..f63192b0b5 100644
--- a/apps/docs/content/components/select/custom-selector-icon.raw.jsx
+++ b/apps/docs/content/components/select/custom-selector-icon.raw.jsx
@@ -1,25 +1,27 @@
 import {Select, SelectItem} from "@nextui-org/react";
 
-export const SelectorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="1.5"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" stroke="none" />
-    <path d="M8 9l4 -4l4 4" />
-    <path d="M16 15l-4 4l-4 -4" />
-  </svg>
-);
+export const SelectorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+      <path d="M8 9l4 -4l4 4" />
+      <path d="M16 15l-4 4l-4 -4" />
+    </svg>
+  );
+};
 
 export const animals = [
   {key: "cat", label: "Cat"},
diff --git a/apps/docs/content/components/select/start-content.raw.jsx b/apps/docs/content/components/select/start-content.raw.jsx
index 99b6568b6d..9164a68d79 100644
--- a/apps/docs/content/components/select/start-content.raw.jsx
+++ b/apps/docs/content/components/select/start-content.raw.jsx
@@ -1,38 +1,40 @@
 import {Select, SelectItem} from "@nextui-org/react";
 
-export const PetIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
-      fill="currentColor"
-    />
-    <path
-      d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
-      fill="currentColor"
-    />
-    <path
-      d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export const PetIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
 
 export const animals = [
   {key: "cat", label: "Cat"},
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 0469b09cab..55b476c101 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -54,7 +54,7 @@ Select follows the [Collection Components API](https://react-spectrum.adobe.com/
 - **Static**: The usage example above shows the static implementation, which can be used when the full list of options is known ahead of time.
 - **Dynamic**: The example below can be used when the options come from an external data source such as an API call, or update over time.
 
-<CodeDemo title="Dynamic items" highlightedLines="7" files={selectContent.dynamic} />
+<CodeDemo title="Dynamic items" files={selectContent.dynamic} />
 
 ### Multiple Selection
 
@@ -64,24 +64,24 @@ You can use the `selectionMode="multiple"` property to allow multiple selection.
 
 ### Disabled
 
-<CodeDemo title="Disabled" highlightedLines="8" files={selectContent.disabled} />
+<CodeDemo title="Disabled" files={selectContent.disabled} />
 
 ### Disabled Items
 
 You can disable specific items by using the `disabledKeys` property.
 
-<CodeDemo title="Disabled Items" highlightedLines="10" files={selectContent.disabledItems} />
+<CodeDemo title="Disabled Items" files={selectContent.disabledItems} />
 
 ### Required
 
 If you pass the `isRequired` property to the select, it will have a `danger` asterisk at
 the end of the label and the select will be required.
 
-<CodeDemo title="Required" highlightedLines="8" files={selectContent.required} />
+<CodeDemo title="Required" files={selectContent.required} />
 
 ### Sizes
 
-<CodeDemo title="Sizes" highlightedLines="13,24" files={selectContent.sizes} />
+<CodeDemo title="Sizes" files={selectContent.sizes} />
 
 ### Colors
 
@@ -99,7 +99,7 @@ the end of the label and the select will be required.
 
 You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`.
 
-<CodeDemo title="Label Placements" highlightedLines="19,37" files={selectContent.labelPlacements} />
+<CodeDemo title="Label Placements" files={selectContent.labelPlacements} />
 
 > **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default.
 
@@ -108,7 +108,7 @@ You can change the position of the label by setting the `labelPlacement` propert
 You can use the `startContent` and `endContent` properties to add content to the start and end of
 the select.
 
-<CodeDemo title="Start Content" highlightedLines="13" files={selectContent.startContent} />
+<CodeDemo title="Start Content" files={selectContent.startContent} />
 
 ### Item Start & End Content
 

From 0293b31990c5c799de1aeebb283514200fbf8734 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 16 Nov 2024 14:43:21 +0800
Subject: [PATCH 4/5] refactor(docs): select dx

---
 .../select/without-scroll-shadow.ts           | 40 +------------------
 1 file changed, 1 insertion(+), 39 deletions(-)

diff --git a/apps/docs/content/components/select/without-scroll-shadow.ts b/apps/docs/content/components/select/without-scroll-shadow.ts
index 7a4d8b585d..1cfe3080fa 100644
--- a/apps/docs/content/components/select/without-scroll-shadow.ts
+++ b/apps/docs/content/components/select/without-scroll-shadow.ts
@@ -1,45 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-      scrollShadowProps={{
-        isEnabled: false
-      }}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./without-scroll-shadow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {

From 695ef4868ad0513e72f7cee145884a5e6f8fb3ae Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 16 Nov 2024 14:46:45 +0800
Subject: [PATCH 5/5] refactor(docs): select dx

---
 .../content/components/select/async-loading-items.raw.jsx     | 4 ++--
 .../content/components/select/async-loading-items.raw.tsx     | 4 ++--
 apps/docs/content/components/select/single-controlled.raw.tsx | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/docs/content/components/select/async-loading-items.raw.jsx b/apps/docs/content/components/select/async-loading-items.raw.jsx
index d882cd4e03..9e6e7713b8 100644
--- a/apps/docs/content/components/select/async-loading-items.raw.jsx
+++ b/apps/docs/content/components/select/async-loading-items.raw.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 import {Select, SelectItem} from "@nextui-org/react";
 import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
 
@@ -38,8 +36,10 @@ export function usePokemonList({fetchDelay = 0} = {}) {
       setItems((prevItems) => [...prevItems, ...json.results]);
     } catch (error) {
       if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
         console.log("Fetch aborted");
       } else {
+        // eslint-disable-next-line no-console
         console.error("There was an error with the fetch operation:", error);
       }
     } finally {
diff --git a/apps/docs/content/components/select/async-loading-items.raw.tsx b/apps/docs/content/components/select/async-loading-items.raw.tsx
index 2a0f49d465..1353c9b5e2 100644
--- a/apps/docs/content/components/select/async-loading-items.raw.tsx
+++ b/apps/docs/content/components/select/async-loading-items.raw.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 import React from "react";
 import {Select, SelectItem} from "@nextui-org/react";
 import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
@@ -49,8 +47,10 @@ export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
       setItems((prevItems) => [...prevItems, ...json.results]);
     } catch (error) {
       if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
         console.log("Fetch aborted");
       } else {
+        // eslint-disable-next-line no-console
         console.error("There was an error with the fetch operation:", error);
       }
     } finally {
diff --git a/apps/docs/content/components/select/single-controlled.raw.tsx b/apps/docs/content/components/select/single-controlled.raw.tsx
index 58b292ea79..13a1a847c0 100644
--- a/apps/docs/content/components/select/single-controlled.raw.tsx
+++ b/apps/docs/content/components/select/single-controlled.raw.tsx
@@ -1,5 +1,7 @@
+import type {Selection} from "@nextui-org/react";
+
 import React from "react";
-import {Select, SelectItem, Selection} from "@nextui-org/react";
+import {Select, SelectItem} from "@nextui-org/react";
 
 export const animals = [
   {key: "cat", label: "Cat"},