refactor(docs): default import -> named import

apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Checkbox, Grid } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
+  const [selected, setSelected] = useState(["buenos-aires", "sydney"]);
 
   return (
     <Grid.Container gap={2}>

apps/docs/content/components/checkbox-group/events.ts

@@ -1,8 +1,8 @@
-const App = `import React from 'react'
+const App = `import { useState } from "react";
 import { Checkbox, Text, Spacer } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState([]);
+  const [selected, setSelected] = useState([]);
 
   return (
     <>

apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Checkbox, Spacer } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState(true);
+  const [selected, setSelected] = useState(true);
 
   return (
     <>

apps/docs/content/components/dropdown/multiple-selection.ts

@@ -1,10 +1,10 @@
-const App = `import React from "react";
+const App = `import { useState, useMemo } from "react";
 import { Dropdown } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState(new Set(["text"]));
+  const [selected, setSelected] = useState(new Set(["text"]));
 
-  const selectedValue = React.useMemo(
+  const selectedValue = useMemo(
     () => Array.from(selected).join(", ").replaceAll("_", " "),
     [selected]
   );

apps/docs/content/components/dropdown/single-selection.ts

@@ -1,10 +1,10 @@
-const App = `import React from "react";
+const App = `import { useState, useMemo } from "react";
 import { Dropdown } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState(new Set(["text"]));
+  const [selected, setSelected] = useState(new Set(["text"]));
 
-  const selectedValue = React.useMemo(
+  const selectedValue = useMemo(
     () => Array.from(selected).join(", ").replaceAll("_", " "),
     [selected]
   );

apps/docs/content/components/dropdown/variants.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Grid, Dropdown, Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("default");
+  const [selectedColor, setSelectedColor] = useState("default");
   const colors = [
     "default",
     "primary",

apps/docs/content/components/grid/hideElement.ts

@@ -1,16 +1,17 @@
-const useMediaQuery = `import React from 'react';\n
+const useMediaQuery = `import { useState, useCallback, useEffect } from "react";
 
 export const useMediaQuery = (width)=> {
-  const [targetReached, setTargetReached] = React.useState(false);
+  const [targetReached, setTargetReached] = useState(false);
 
-  const updateTarget = React.useCallback((e) => {
+  const updateTarget = useCallback((e) => {
     if (e.matches) {
       setTargetReached(true);
     } else {
       setTargetReached(false);
     }
   }, []);
-  React.useEffect(() => {
+
+  useEffect(() => {
     const media = window.matchMedia(\`(max-width: \${width}px)\`);
     media.addListener(updateTarget);
 

apps/docs/content/components/grid/responsive.ts

@@ -1,16 +1,17 @@
-const useMediaQuery = `import React from 'react';\n
+const useMediaQuery = `import { useState, useCallback, useEffect } from "react";
 
 export const useMediaQuery = (width)=> {
-  const [targetReached, setTargetReached] = React.useState(false);
+  const [targetReached, setTargetReached] = useState(false);
 
-  const updateTarget = React.useCallback((e) => {
+  const updateTarget = useCallback((e) => {
     if (e.matches) {
       setTargetReached(true);
     } else {
       setTargetReached(false);
     }
   }, []);
-  React.useEffect(() => {
+
+  useEffect(() => {
     const media = window.matchMedia(\`(max-width: \${width}px)\`);
     media.addListener(updateTarget);
 

apps/docs/content/components/input/helper.ts

@@ -1,4 +1,4 @@
-const App = `import React from "react";
+const App = `import { useMemo } from "react";
 import { Input, useInput, Grid } from "@nextui-org/react";
 
 
@@ -9,7 +9,7 @@ export default function App() {
     return value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   };
 
-  const helper = React.useMemo(() => {
+  const helper = useMemo(() => {
     if (!value)
       return {
         text: "",

apps/docs/content/components/modal/blurBackground.ts

@@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const AppJs = `import React from "react";
+const AppJs = `import { useState } from "react";
 import { Modal, Input, Row, Checkbox, Button, Text } from "@nextui-org/react";
 import { Mail } from "./Mail";
 import { Password } from "./Password";
 
 export default function App() {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
   const handler = () => setVisible(true);
   const closeHandler = () => {
     setVisible(false);

apps/docs/content/components/modal/default.ts

@@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const AppJs = `import React from "react";
+const AppJs = `import { useState } from "react";
 import { Modal, Button, Text, Input, Row, Checkbox } from "@nextui-org/react";
 import { Mail } from "./Mail";
 import { Password } from "./Password";
 
 export default function App() {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
   const handler = () => setVisible(true);
 
   const closeHandler = () => {

apps/docs/content/components/modal/noAnimated.ts

@@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const AppJs = `import React from "react";
+const AppJs = `import { useState } from "react";
 import { Modal, Button, Text, Input, Row, Checkbox } from "@nextui-org/react";
 import { Mail } from "./Mail";
 import { Password } from "./Password";
 
 export default function App() {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
   const handler = () => setVisible(true);
   const closeHandler = () => {
     setVisible(false);

apps/docs/content/components/modal/preventClose.ts

@@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const AppJs = `import React from "react";
+const AppJs = `import { useState } from "react";
 import { Modal, Button, Text, Input, Row, Checkbox } from "@nextui-org/react";
 import { Mail } from "./Mail";
 import { Password } from "./Password";
 
 export default function App() {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
   const handler = () => setVisible(true);
   const closeHandler = () => {
     setVisible(false);

apps/docs/content/components/modal/withoutPadding.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Modal, Button, Image, Text, Link } from "@nextui-org/react";
 
 export default function App() {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
   const handler = () => setVisible(true);
   const closeHandler = () => {
     setVisible(false);

apps/docs/content/components/pagination/color.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Pagination, Grid, Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("primary");
+  const [selectedColor, setSelectedColor] = useState("primary");
   const colors = [
     "primary",
     "secondary",

apps/docs/content/components/pagination/dots.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Pagination, Grid, Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selectedSize, setSelectedSize] = React.useState("md");
+  const [selectedSize, setSelectedSize] = useState("md");
   const sizes = ["xs", "sm", "md", "lg", "xl"];
   const capitalize = (str) => {
     const lower = str.toLowerCase();

apps/docs/content/components/pagination/shadow.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Pagination, Grid, Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("primary");
+  const [selectedColor, setSelectedColor] = useState("primary");
   const colors = ["primary", "secondary", "success", "warning", "error"];
   const capitalize = (str) => {
     const lower = str.toLowerCase();

apps/docs/content/components/pagination/sizes.ts

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Pagination, Grid, Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selectedSize, setSelectedSize] = React.useState("md");
+  const [selectedSize, setSelectedSize] = useState("md");
   const sizes = ["xs", "sm", "md", "lg", "xl"];
   const capitalize = (str) => {
     const lower = str.toLowerCase();

apps/docs/content/components/popover/controlled-vs-uncontrolled.ts

@@ -1,8 +1,8 @@
-const App = `import React from 'react';
+const App = `import { useState } from "react";
 import { Popover, Button, Text, Grid } from "@nextui-org/react";
 
 export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <Grid.Container gap={2} alignContent="center">

apps/docs/content/components/popover/custom-content.ts

@@ -1,5 +1,4 @@
-const DeleteUser = `import React from "react";
-import { Text, Button, Grid, Row } from "@nextui-org/react";
+const DeleteUser = `import { Text, Button, Grid, Row } from "@nextui-org/react";
 
 export const DeleteUser = () => {
   return (
@@ -31,11 +30,11 @@ export const DeleteUser = () => {
   );
 };`;
 
-const UserTwitterCard = `import React from "react";
+const UserTwitterCard = `import { useState } from "react";
 import { User, Row, Col, Text, Button, Spacer, Grid } from "@nextui-org/react";
 
 export const UserTwitterCard = () => {
-  const [following, setFollowing] = React.useState(false);
+  const [following, setFollowing] = useState(false);
 
   return (
     <Grid.Container

apps/docs/content/components/radio/controlled-vs-uncontrolled.ts

@@ -1,8 +1,8 @@
-const App = `import React from 'react'
+const App = `import { useState } from "react";
 import { Radio, Grid } from "@nextui-org/react";
 
 export default function App() {
-  const [checked, setChecked] = React.useState('B');
+  const [checked, setChecked] = useState('B');
 
   return (
     <Grid.Container gap={2}>

apps/docs/content/components/radio/events.ts

@@ -1,8 +1,8 @@
-const App = `import React from 'react'
+const App = `import { useState } from "react";
 import { Radio, Text, Spacer } from "@nextui-org/react";
 
 export default function App() {
-  const [checked, setChecked] = React.useState('');
+  const [checked, setChecked] = useState('');
 
   return (
     <>

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

@@ -1,8 +1,8 @@
-const App = `import React from "react";
+const App = `import { useState } from "react";
 import { Table, Grid, Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("primary");
+  const [selectedColor, setSelectedColor] = useState("primary");
   const colors = ["primary", "secondary", "success", "warning", "error"];
   const capitalize = (str) => {
     const lower = str.toLowerCase();

apps/docs/content/components/textarea/controlledUncontrolled.ts

@@ -1,4 +1,4 @@
-const App = `import React from "react";
+const App = `import { useRef } from "react";
 import { Textarea, Grid, useInput, Spacer, Button } from "@nextui-org/react";
 
 export default function App() {
@@ -11,7 +11,7 @@ export default function App() {
   } = useInput("Controlled Textarea");
 
   // Uncontrolled
-  const textareaRef = React.useRef(null);
+  const textareaRef = useRef(null);
   const onClick = () => {
     if (textareaRef.current) {
       textareaRef.current.value = Math.random().toString(32);

apps/docs/content/components/tooltip/customContent.ts

@@ -1,5 +1,4 @@
-const DeleteUser = `import React from "react";
-import { Text, Button, Grid, Row } from "@nextui-org/react";
+const DeleteUser = `import { Text, Button, Grid, Row } from "@nextui-org/react";
 
 export const DeleteUser = () => {
   return (
@@ -35,7 +34,7 @@ export const DeleteUser = () => {
   );
 };`;
 
-const UserTwitterCard = `import React from "react"; 
+const UserTwitterCard = `import { useState } from "react"; 
 import { Avatar, Row, Col, Text, Button, Spacer, Grid } from "@nextui-org/react";
 
 export const UserTwitterCard = ({
@@ -45,7 +44,7 @@ export const UserTwitterCard = ({
   onClick,
   ...props
 }) => {
-  const [following, setFollowing] = React.useState(false);
+  const [following, setFollowing] = useState(false);
 
   return (
     <Grid.Container

apps/docs/content/docs/guide/getting-started.mdx

@@ -39,8 +39,6 @@ For NextUI to work correctly, you need to set up the `NextUIProvider` at the roo
 Go to the root of your application and do this:
 
 ```jsx
-import * as React from 'react';
-
 // 1. import `NextUIProvider` component
 import { NextUIProvider } from '@nextui-org/react';
 
@@ -77,7 +75,7 @@ export default MyApp;
 2. Go to `pages/_document.js` or `pages/_document.tsx` (create if it doesn't exist) and add this:
 
 ```jsx
-import React from 'react';
+import { Children } from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { CssBaseline } from '@nextui-org/react';
 
@@ -86,7 +84,7 @@ class MyDocument extends Document {
     const initialProps = await Document.getInitialProps(ctx);
     return {
       ...initialProps,
-      styles: React.Children.toArray([initialProps.styles])
+      styles: Children.toArray([initialProps.styles])
     };
   }