Fixed ts and import issues

src/showroom/app.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ButtonExample } from './components/button'
 
 export function App() {

src/showroom/code.tsx

@@ -1,14 +1,12 @@
-import * as React from 'react'
-import { PropsWithChildren } from "react";
 import SyntaxHighlighter from 'react-syntax-highlighter'
 
-export function Code({ children }: PropsWithChildren) {
+export function Code({ code }: { code: string | string[] }) {
   return <div className="whitespace-pre-line font-mono text-xs text-indigo-600 dark:text-indigo-200">
     <SyntaxHighlighter
       showLineNumbers={true}
       language="jsx"
     >
-      {children}
+      {code}
     </SyntaxHighlighter>
 
   </div>

src/showroom/components/button.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { Mail } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Header } from '../header'
@@ -12,50 +10,40 @@ export function ButtonExample() {
     <div>
       <Button>Button</Button>
     </div>
-    <Code>
-      {`<Button>
+    <Code code={`<Button>
   Secondary
-</Button>`}
-    </Code>
+</Button>`} />
 
     <div>
       <Button variant="secondary">Secondary</Button>
     </div>
-    <Code>
-      {`<Button variant="secondary">
+    <Code code={`<Button variant="secondary">
   Secondary
-</Button>`}
-    </Code>
+</Button>`} />
 
     <div>
       <Button variant="destructive">Destructive</Button>
     </div>
-    <Code>
-      {`<Button variant="descructive">
+    <Code code={`<Button variant="descructive">
   Descructive
-</Button>`}
-    </Code>
+</Button>`} />
 
     <div>
       <Button variant="outline">Outline</Button>
     </div>
-    <Code>
-      {`<Button variant="outline">
+    <Code code={`<Button variant="outline">
   Outline
-</Button>`}
-    </Code>
+</Button>`} />
 
     <div>
       <Button>
         <Mail className="mr-2 h-4 w-4" /> Login&nbsp;with&nbsp;email&nbsp;icon
       </Button>
     </div>
-    <Code>
-      {`import { Mail } from 'lucide-react'
+    <Code code={`import { Mail } from 'lucide-react'
 <Button>
   <Mail className="mr-2 h-4 w-4" />
     Login with email icon
-</Button>`}
-    </Code>
+</Button>`} />
   </>
 }

src/showroom/header.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react'
 import { PropsWithChildren } from "react";
 
-export function Header({children}: PropsWithChildren) {
+export function Header({ children }: PropsWithChildren) {
   return <div className="col-span-2 border-b">
     <h2 className="font-bold text-xl not-prose">{children}</h2>
-</div>
+  </div>
 } 

tsconfig.json

@@ -2,34 +2,40 @@
   "compilerOptions": {
     "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "Node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
     "paths": {
-      "@/components/*": ["src/components/*"],
-      "@/lib/*": ["src/lib/*"]
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/lib/*": [
+        "src/lib/*"
+      ]
     },
-
     /* Output */
     "outDir": "dist",
     "declaration": true,
     "declarationMap": true
   },
-  "include": ["./src/**/*"],
-  "exclude": ["./src/showroom"]
-}
+  "include": [
+    "./src/**/*"
+  ]
+}

vite.config.ts

@@ -6,9 +6,7 @@ import dts from 'vite-plugin-dts';
 
 export default defineConfig({
   plugins: [
-    react({
-      'jsxRuntime': 'classic',
-    }),
+    react(),
     dts({
       include: ['./src/**/*'],
     }),
@@ -28,7 +26,7 @@ export default defineConfig({
     rollupOptions: {
       external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)], output: { preserveModules: true, exports: 'named' }
     },
-    
+
     target: 'esnext',
     sourcemap: true
   }