refactor(docs): switch dx

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

@@ -0,0 +1,26 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected color="default">
+        Default
+      </Switch>
+      <Switch defaultSelected color="primary">
+        Primary
+      </Switch>
+      <Switch defaultSelected color="secondary">
+        Secondary
+      </Switch>
+      <Switch defaultSelected color="success">
+        Success
+      </Switch>
+      <Switch defaultSelected color="warning">
+        Warning
+      </Switch>
+      <Switch defaultSelected color="danger">
+        Danger
+      </Switch>
+    </div>
+  );
+}

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

@@ -1,17 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Switch defaultSelected color="default">Default</Switch>
-      <Switch defaultSelected color="primary">Primary</Switch>
-      <Switch defaultSelected color="secondary">Secondary</Switch>
-      <Switch defaultSelected color="success">Success</Switch>
-      <Switch defaultSelected color="warning">Warning</Switch>
-      <Switch defaultSelected color="danger">Danger</Switch>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,14 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(true);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
+        Airplane mode
+      </Switch>
+      <p className="text-small text-default-500">Selected: {isSelected ? "true" : "false"}</p>
+    </div>
+  );
+}

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

@@ -1,17 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(true);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
-        Airplane mode
-      </Switch>  
-      <p className="text-small text-default-500">Selected: {isSelected ? "true" : "false"}</p>
-    </div>
-  )  
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/switch/custom-impl.raw.jsx

@@ -0,0 +1,67 @@
+import {VisuallyHidden, useSwitch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+const ThemeSwitch = (props) => {
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+    useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+        <VisuallyHidden>
+          <input {...getInputProps()} />
+        </VisuallyHidden>
+        <div
+          {...getWrapperProps()}
+          className={slots.wrapper({
+            class: [
+              "w-8 h-8",
+              "flex items-center justify-center",
+              "rounded-lg bg-default-100 hover:bg-default-200",
+            ],
+          })}
+        >
+          {isSelected ? <SunIcon /> : <MoonIcon />}
+        </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  );
+};
+
+export default function App() {
+  return <ThemeSwitch />;
+}

apps/docs/content/components/switch/custom-impl.raw.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
+
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+const ThemeSwitch = (props: SwitchProps) => {
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+    useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+        <VisuallyHidden>
+          <input {...getInputProps()} />
+        </VisuallyHidden>
+        <div
+          {...getWrapperProps()}
+          className={slots.wrapper({
+            class: [
+              "w-8 h-8",
+              "flex items-center justify-center",
+              "rounded-lg bg-default-100 hover:bg-default-200",
+            ],
+          })}
+        >
+          {isSelected ? <SunIcon /> : <MoonIcon />}
+        </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  );
+};
+
+export default function App() {
+  return <ThemeSwitch />;
+}

apps/docs/content/components/switch/custom-impl.ts

@@ -1,133 +1,12 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch, VisuallyHidden, useSwitch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-const ThemeSwitch = (props) => {
-  const {
-    Component, 
-    slots, 
-    isSelected, 
-    getBaseProps, 
-    getInputProps, 
-    getWrapperProps
-  } = useSwitch(props);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Component {...getBaseProps()}>
-          <VisuallyHidden>
-            <input {...getInputProps()} />
-          </VisuallyHidden>
-          <div
-            {...getWrapperProps()}
-            className={slots.wrapper({
-              class: [
-                "w-8 h-8",
-                "flex items-center justify-center",
-                "rounded-lg bg-default-100 hover:bg-default-200",
-              ],
-            })}
-          >
-            {isSelected ? <SunIcon/> : <MoonIcon/>}
-          </div>
-      </Component>
-      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
-    </div>
-  )
-}
-
-
-export default function App() {
-  return <ThemeSwitch/>
-}`;
-
-const AppTs = `import {Switch, useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-const ThemeSwitch = (props: SwitchProps) => {
-  const {
-    Component, 
-    slots, 
-    isSelected, 
-    getBaseProps, 
-    getInputProps, 
-    getWrapperProps
-  } = useSwitch(props);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Component {...getBaseProps()}>
-          <VisuallyHidden>
-            <input {...getInputProps()} />
-          </VisuallyHidden>
-          <div
-            {...getWrapperProps()}
-            className={slots.wrapper({
-              class: [
-                "w-8 h-8",
-                "flex items-center justify-center",
-                "rounded-lg bg-default-100 hover:bg-default-200",
-              ],
-            })}
-          >
-            {isSelected ? <SunIcon/> : <MoonIcon/>}
-          </div>
-      </Component>
-      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
-    </div>
-  )
-}
-
-
-export default function App() {
-  return <ThemeSwitch/>
-}`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/MoonIcon.tsx": MoonIcon,
-  "/SunIcon.tsx": SunIcon,
 };
 
 export default {

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

@@ -0,0 +1,32 @@
+import {Switch, cn} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch
+      classNames={{
+        base: cn(
+          "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
+          "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        wrapper: "p-0 h-4 overflow-visible",
+        thumb: cn(
+          "w-6 h-6 border-2 shadow-lg",
+          "group-data-[hover=true]:border-primary",
+          //selected
+          "group-data-[selected=true]:ml-6",
+          // pressed
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
+        ),
+      }}
+    >
+      <div className="flex flex-col gap-1">
+        <p className="text-medium">Enable early access</p>
+        <p className="text-tiny text-default-400">
+          Get access to new features before they are released.
+        </p>
+      </div>
+    </Switch>
+  );
+}