refactor(docs): tabs dx

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

@@ -0,0 +1,17 @@
+import {Tabs, Tab} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => (
+        <Tabs key={color} aria-label="Tabs colors" color={color} radius="full">
+          <Tab key="photos" title="Photos" />
+          <Tab key="music" title="Music" />
+          <Tab key="videos" title="Videos" />
+        </Tabs>
+      ))}
+    </div>
+  );
+}

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

@@ -1,27 +1,4 @@
-const App = `import {Tabs, Tab} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger"
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => (
-        <Tabs key={color} color={color} aria-label="Tabs colors" radius="full">
-          <Tab key="photos" title="Photos"/>
-          <Tab key="music" title="Music"/>
-          <Tab key="videos" title="Videos"/>
-        </Tabs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,38 @@
+import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("photos");
+
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs aria-label="Options" selectedKey={selected} onSelectionChange={setSelected}>
+        <Tab key="photos" title="Photos">
+          <Card>
+            <CardBody>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="music" title="Music">
+          <Card>
+            <CardBody>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="videos" title="Videos">
+          <Card>
+            <CardBody>
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}

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

@@ -1,40 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("photos");
-
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs 
-        aria-label="Options"         
-        selectedKey={selected}
-        onSelectionChange={setSelected}
-      >
-        <Tab key="photos" title="Photos">
-          <Card>
-            <CardBody>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="music" title="Music">
-          <Card>
-            <CardBody>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="videos" title="Videos">
-          <Card>
-            <CardBody>
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </CardBody>
-          </Card>  
-        </Tab>
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,131 @@
+import {Tabs, Tab, Chip} from "@nextui-org/react";
+
+export const GalleryIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const MusicIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VideoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor" />
+      <path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor" />
+      <path
+        d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z"
+        fill="currentColor"
+      />
+      <path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs
+        aria-label="Options"
+        classNames={{
+          tabList: "gap-6 w-full relative rounded-none p-0 border-b border-divider",
+          cursor: "w-full bg-[#22d3ee]",
+          tab: "max-w-fit px-0 h-12",
+          tabContent: "group-data-[selected=true]:text-[#06b6d4]",
+        }}
+        color="primary"
+        variant="underlined"
+      >
+        <Tab
+          key="photos"
+          title={
+            <div className="flex items-center space-x-2">
+              <GalleryIcon />
+              <span>Photos</span>
+              <Chip size="sm" variant="faded">
+                9
+              </Chip>
+            </div>
+          }
+        />
+        <Tab
+          key="music"
+          title={
+            <div className="flex items-center space-x-2">
+              <MusicIcon />
+              <span>Music</span>
+              <Chip size="sm" variant="faded">
+                3
+              </Chip>
+            </div>
+          }
+        />
+        <Tab
+          key="videos"
+          title={
+            <div className="flex items-center space-x-2">
+              <VideoIcon />
+              <span>Videos</span>
+              <Chip size="sm" variant="faded">
+                1
+              </Chip>
+            </div>
+          }
+        />
+      </Tabs>
+    </div>
+  );
+}

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

@@ -1,113 +1,7 @@
-const GalleryIcon = `export const GalleryIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z" fill="currentColor"/>
-    <path d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const MusicIcon = `export const MusicIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const VideoIcon = `export const VideoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor"/>
-    <path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor"/>
-    <path d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z" fill="currentColor"/>
-    <path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const App = `import {Tabs, Tab, Chip} from "@nextui-org/react";
-import {GalleryIcon} from "./GalleryIcon";
-import {MusicIcon} from "./MusicIcon";
-import {VideoIcon} from "./VideoIcon";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs 
-        aria-label="Options" 
-        color="primary" 
-        variant="underlined"
-        classNames={{
-          tabList: "gap-6 w-full relative rounded-none p-0 border-b border-divider",
-          cursor: "w-full bg-[#22d3ee]",
-          tab: "max-w-fit px-0 h-12",
-          tabContent: "group-data-[selected=true]:text-[#06b6d4]"
-        }}
-      >
-        <Tab
-          key="photos"
-          title={
-            <div className="flex items-center space-x-2">
-              <GalleryIcon/>
-              <span>Photos</span>
-              <Chip size="sm" variant="faded">9</Chip>
-            </div>
-          }
-        />
-        <Tab
-          key="music"
-          title={
-            <div className="flex items-center space-x-2">
-              <MusicIcon/>
-              <span>Music</span>
-              <Chip size="sm" variant="faded">3</Chip>
-            </div>
-          }
-        />
-        <Tab
-          key="videos"
-          title={
-            <div className="flex items-center space-x-2">
-              <VideoIcon/>
-              <span>Videos</span>
-              <Chip size="sm" variant="faded">1</Chip>
-            </div>
-          }
-        />
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/GalleryIcon.jsx": GalleryIcon,
-  "/MusicIcon.jsx": MusicIcon,
-  "/VideoIcon.jsx": VideoIcon,
 };
 
 export default {