bertui-code 1.0.0 → 2.0.0

package/README.md

@@ -1,3 +1,5 @@
+# 📁 **README.md - v1.0.1 Release**
+
 # 🎨 bertui-code
 
 **Zero-config syntax highlighting for React. Built exclusively for the BertUI ecosystem.**
@@ -5,10 +7,11 @@
 [![BertUI Compatible](https://img.shields.io/badge/BertUI-Compatible-10b981)](https://bertui.dev)
 [![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](package.json)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Version](https://img.shields.io/badge/version-1.0.1-blue)](package.json)
 
 The simplest way to add beautiful, functional code blocks to your BertUI applications. Dark theme by default, copy button included, zero configuration required.
 
-> ⚠️ **BertUI Compatibility Note:** bertui-code is built specifically for BertUI's build system. It uses ES modules and works with BertUI's transpiler. Some advanced JavaScript features may need workarounds in BertUI's JSX files.
+> ⚠️ **BertUI Compatibility Note:** bertui-code v1.0.1 is tested with BertUI's strict transpiler. See the [BertUI Compatibility](#-bertui-compatibility) section for details.
 
 ## ✨ Features
 
@@ -18,22 +21,25 @@ The simplest way to add beautiful, functional code blocks to your BertUI applica
 - **Line numbers** - Optional, beautifully aligned
 - **Inline code snippets** - Perfect for documentation
 - **20+ language support** - Auto-detection included
-- **BertUI-exclusive** - Optimized for BertUI's build system
+- **Multi-variant tabs** - Toggle between npm/pnpm/bun/yarn and more
 - **Zero dependencies** - Except React (peer dependency)
-- **Accessible** - Proper ARIA labels, keyboard navigation
+- **BertUI-certified** - Tested with BertUI's strict transpiler
 
 ## 📦 Installation
 
-```bash
-bun add bertui-code
-```
+
+bun add bertui-code@1.0.1
+# or
+npm install bertui-code@1.0.1
+# or  
+
 
 ## 🚀 Quick Start
 
-```jsx
-import { Code, InlineCode } from 'bertui-code';
 
-// Basic usage (zero config!)
+import { Code, InlineCode, CodeVariants, CodeVariant } from 'bertui-code';
+
+// Basic code block
 <Code>
   const hello = "world";
   console.log(hello);
@@ -46,299 +52,309 @@ import { Code, InlineCode } from 'bertui-code';
   }
 </Code>
 
-// Inline code in paragraphs
+// Package manager variants (NEW in v1.0.1!)
+<CodeVariants>
+  <CodeVariant label="npm">npm install bertui-code</CodeVariant>
+  <CodeVariant label="pnpm">pnpm add bertui-code</CodeVariant>
+  <CodeVariant label="bun">bun add bertui-code</CodeVariant>
+  <CodeVariant label="yarn">yarn add bertui-code</CodeVariant>
+</CodeVariants>
+
+// Inline code
 <p>
   Use the <InlineCode>useState</InlineCode> hook for state management.
 </p>
 ```
 
-## ⚠️ BertUI Compatibility Notes
+---
 
-BertUI's transpiler is lightweight and fast, but has some limitations. Here are workarounds for common issues:
+## 🎯 **NEW IN v1.0.1: Multi-Variant Code Blocks**
+
+Toggle between different versions of the same code snippet with zero config:
+
+
+<CodeVariants theme="dark" defaultVariant="bun">
+  <CodeVariant label="npm">npm run dev</CodeVariant>
+  <CodeVariant label="pnpm">pnpm dev</CodeVariant>
+  <CodeVariant label="bun">bun dev</CodeVariant>
+  <CodeVariant label="yarn">yarn dev</CodeVariant>
 
-### ✅ **DO: Use simple strings in JSX**
-```jsx
-// ✅ GOOD - Plain strings work perfectly
-<Code>
-  console.log("Hello BertUI!");
-</Code>
 
-// ✅ GOOD - Pre-defined variables
-const myCode = 'function test() {\n  return "works";\n}';
+**Features:**
+- ✅ Auto-generates tabs from labels
+- ✅ Theme-aware styling (dark/light/pink)
+- ✅ Sticky tabs for long docs (`stickyTabs={true}`)
+- ✅ Configurable tab position (`tabPosition="bottom"`)
+- ✅ Keyboard accessible, ARIA compliant
+
+---
+
+## ⚠️ **BertUI Compatibility (CRITICAL)**
+
+bertui-code v1.0.1 is **certified for BertUI's strict transpiler**. Follow these rules and it will **never crash**:
+
+
+// ✅ GOOD - BertUI never looks inside string variables
+const myCode = 
+'function hello(name) {\n' +
+'  return "Hello " + name + "!";\n' +
+'}';
+
 <Code>{myCode}</Code>
-```
 
-### ❌ **AVOID: Complex template literals in JSX**
-```jsx
-// ❌ BAD - BertUI may freak out with nested backticks
+// ✅ GOOD - Even JSX/TypeScript works in strings!
+const tsCode = 
+'interface User {\n' +
+'  id: string;\n' +
+'  name: string;\n' +
+'}\n';
+
+<Code language="typescript">{tsCode}</Code>
+
+
+### ❌ **NEVER: Use template literals in JSX (ALWAYS CRASHES)**
+
+// ❌ BAD - BertUI WILL crash with "Expected } but found :"
 <Code>
-  {`function test() {
-    return \`template literal\`;
+  {`function hello() {
+    return "world";
   }`}
 </Code>
-
-// ✅ GOOD - Escape properly or use variables
-const code = 'function test() {\n  return `template literal`;\n}';
-<Code>{code}</Code>
 ```
 
-### ✅ **Best Practice: Store code in variables**
-```jsx
-// Store complex code in variables
-const exampleCode = `function complex() {
-  const data = { key: "value" };
-  return \`Template: \${data.key}\`;
-}`;
-
-// Then use in JSX
-<Code>{exampleCode}</Code>
-```
+### ✅ **DO: Use React.createElement pattern**
 
-## 🎨 Themes & Colors
+// ✅ GOOD - Works in BertUI
+import React from 'react';
 
-### Built-in Themes
+export default function Page() {
+  return React.createElement(Code, {
+    language: 'javascript',
+    showLineNumbers: true
+  }, 'const x = 1;');
 
-```jsx
-// Dark (default)
-<Code theme="dark">console.log("Dark theme");</Code>
 
-// Light
-<Code theme="light">// Perfect for docs</Code>
 
-// Pink
-<Code theme="pink">// For pink lovers! 🎀</Code>
+// ✅ GOOD - Always use ={true}
+<CodeVariants stickyTabs={true}>
+
+// ❌ BAD - BertUI crashes on shorthand
+
+
+### 📋 **BertUI Compatibility Checklist**
+
+| Pattern | Status | Why |
+|---------|--------|-----|
+| `const code = '...'` | ✅ **SAFE** | Strings are opaque to BertUI |
+| `` <Code>{`code`}</Code> `` | ❌ **CRASH** | BertUI parses template literal content |
+| `language="typescript"` | ⚠️ **MAY CRASH** | Only safe if code is in string variable |
+| `stickyTabs={true}` | ✅ **SAFE** | Explicit value works |
+| `stickyTabs` | ❌ **CRASH** | Shorthand props not supported |
+| `React.createElement` | ✅ **SAFE** | No JSX transform needed |
+
+---
+
+## 🎨 **Themes & Colors**
+
+### Built-in Themes
+```jsx
+<Code theme="dark">   // Default
+<Code theme="light">  // Light mode
+<Code theme="pink">   // Pink mode
 ```
 
 ### Custom Colors
 
-```jsx
-<Code
-  theme="custom"
+<Code 
   colors={{
     background: '#0a0a0a',
     text: '#00ff00',
     header: '#1a1a1a',
     border: '#00ff00',
     meta: '#00ff00',
-    button: '#00ff00',
-    buttonText: '#0a0a0a',
-    success: '#00ff00'
+    button: '#00ff00'
   }}
 >
   // Custom hacker theme
 </Code>
-```
 
-## 📖 API Reference
+---
 
-### `<Code />` Component
+## 📖 **API Reference**
 
+### `<Code />` Component
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children` | `string` | **Required** | The code to display |
-| `language` | `string` | `'javascript'` | Programming language (`'auto'` for detection) |
-| `theme` | `'dark' \| 'light' \| 'pink' \| 'custom'` | `'dark'` | Color theme |
-| `colors` | `Object` | `{}` | Custom colors for `theme="custom"` |
+| `language` | `string` | `'javascript'` | Programming language |
+| `theme` | `'dark' \| 'light' \| 'pink'` | `'dark'` | Color theme |
+| `colors` | `Object` | `{}` | Custom color overrides |
 | `showLineNumbers` | `boolean` | `false` | Show line numbers |
-| `showCopyButton` | `boolean` | `true` | Show copy-to-clipboard button |
+| `showCopyButton` | `boolean` | `true` | Show copy button |
 | `className` | `string` | `''` | Additional CSS classes |
 
-### `<InlineCode />` Component
+### `<CodeVariants />` Component (NEW)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `CodeVariant[]` | **Required** | Array of variants |
+| `theme` | `'dark' \| 'light' \| 'pink'` | `'dark'` | Color theme |
+| `defaultVariant` | `number \| string` | `0` | Default tab by index or label |
+| `stickyTabs` | `boolean` | `false` | Make tabs sticky on scroll |
+| `tabPosition` | `'top' \| 'bottom'` | `'top'` | Tab bar position |
+| `showCopyButton` | `boolean` | `true` | Show copy button |
+| `colors` | `Object` | `{}` | Custom colors for code |
+| `tabColors` | `Object` | `{}` | Custom colors for tabs |
+
+### `<CodeVariant />` Component (NEW)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | **Required** | The code for this variant |
+| `label` | `string` | **Required** | Tab label (npm, pnpm, etc) |
+| `language` | `string` | `'javascript'` | Language for this variant |
+| `showLineNumbers` | `boolean` | `false` | Show line numbers |
 
+### `<InlineCode />` Component
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children` | `string` | **Required** | The inline code |
 | `theme` | `'dark' \| 'light' \| 'pink'` | `'dark'` | Color theme |
 
-### `detectLanguage(code: string): string`
+---
 
-Utility function to detect programming language from code content.
+## 💡 **Best Practices for BertUI**
 
-## 🌐 Language Support
+### 1. **Store all code examples in string variables**
 
-bertui-code supports **20+ programming languages** with auto-detection:
+// code-examples.js
+export const npmExample = 'npm install bertui-code';
+export const jsExample = 
+'function add(a, b) {\n' +
+'  return a + b;\n' +
+'}';
 
-- **Web**: JavaScript, TypeScript, JSX, HTML, CSS, JSON
-- **Backend**: Python, Ruby, PHP, Java, Go, Rust, C, C++, C#
-- **Data**: SQL, YAML, XML
-- **Shell**: Bash, Shell, PowerShell
-- **Other**: Markdown, Swift, Kotlin, Dart
+// page.jsx
+import { jsExample } from './code-examples.js';
+<Code>{jsExample}</Code>
 
-```jsx
-// Auto-detection
-<Code language="auto">
-  def hello():
-      print("Auto-detected as Python!")
-</Code>
 
-// Manual specification
-<Code language="rust">
-  fn main() {
-      println!("Hello Rust!");
-  }
-</Code>
-```
+### 2. **Use string concatenation for readability**
 
-## 🔧 Advanced Usage Examples
+const longCode = 
+'import React from "react";\n' +
+'\n' +
+'export function Button({ children }) {\n' +
+'  return (\n' +
+'    <button className="btn">\n' +
+'      {children}\n' +
+'    </button>\n' +
+'  );\n' +
+'}\n';
 
-### Documentation Page (BertUI-safe)
-```jsx
-import React from 'react';
-import { Code, InlineCode } from 'bertui-code';
 
-// Store code in variables (BertUI-safe pattern)
-const apiExample = 'function fetchData(url) {\n  return fetch(url).then(r => r.json());\n}';
+### 3. **Keep TypeScript in .ts files**
 
-const errorHandling = `interface Result<T> {
-  data: T | null;
-  error: string | null;
-}
+// ✅ GOOD - In a .ts file
+export const tsCode = 'const name: string = "John";';
 
-async function getUser(): Promise<Result<User>> {
-  try {
-    const response = await fetch('/api/user');
-    return { data: await response.json(), error: null };
-  } catch (error) {
-    return { data: null, error: error.message };
-  }
-}`;
-
-export default function Documentation() {
-  return (
-    <article style={{ padding: '2rem' }}>
-      <h1>API Reference</h1>
-      
-      <p>
-        Import the component: <InlineCode>import {'{ Code }'} from 'bertui-code'</InlineCode>
-      </p>
-      
-      <h2>Basic Example</h2>
-      <Code showLineNumbers>
-        {apiExample}
-      </Code>
-      
-      <h2>Error Handling</h2>
-      <Code language="typescript" theme="light">
-        {errorHandling}
-      </Code>
-    </article>
-  );
-}
-```
+// ❌ BAD - In a .jsx file
+const tsCode = 'const name: string = "John";'; // BertUI may crash!
 
-### Interactive Component (BertUI-safe)
-```jsx
-import React, { useState } from 'react';
+
+### 4. **Test your code blocks**
+
+// test-page.jsx - Create a test page to verify BertUI compatibility
 import { Code } from 'bertui-code';
+const testCode = 'console.log("Hello BertUI!");';
 
-export default function InteractiveDemo() {
-  const [theme, setTheme] = useState('dark');
-  
-  // Store dynamic code in variable
-  const dynamicCode = `// Current theme: ${theme}
-const user = {
-  name: "Developer",
-  preferences: {
-    theme: "${theme}",
-    timestamp: new Date().toISOString()
-  }
-};
-
-console.log(\`Hello \${user.name}!\`);`;
-
-  return (
-    <div style={{ padding: '1rem' }}>
-      <div style={{ marginBottom: '1rem' }}>
-        <label>
-          Select Theme: 
-          <select 
-            value={theme} 
-            onChange={(e) => setTheme(e.target.value)}
-            style={{ marginLeft: '0.5rem', padding: '0.25rem' }}
-          >
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-            <option value="pink">Pink</option>
-          </select>
-        </label>
-      </div>
-      
-      <Code theme={theme} showLineNumbers>
-        {dynamicCode}
-      </Code>
-    </div>
-  );
+export default function TestPage() {
+  return React.createElement(Code, {}, testCode);
 }
-```
 
-## 🛠️ Troubleshooting BertUI Issues
 
-### Problem: "Unexpected return" or compilation errors
-**Solution:** BertUI's transpiler sometimes struggles with:
-- Nested template literals in JSX
-- Complex string interpolation
-- Certain JavaScript syntax in JSX attributes
+---
 
-**Workaround:**
-```jsx
-// ❌ Problematic
-<Code>
-  {`function test() {
-    return \`Complex \${expression}\`;
-  }`}
-</Code>
+## 📚 **Examples**
 
-// ✅ Solution - Use variables
-const safeCode = 'function test() {\n  return `Complex ${expression}`;\n}';
-<Code>{safeCode}</Code>
-```
+### Package Manager Installers
 
-### Problem: Import not working
-**Solution:** Make sure:
-1. Package is installed : `bun install  bertui-code`
-2. BertUI restarted after installing 
-3. No cache issues: `rm -rf .bertui` then restart
+<CodeVariants theme="dark" defaultVariant="bun">
+  <CodeVariant label="npm">npm install bertui-code</CodeVariant>
+  <CodeVariant label="pnpm">pnpm add bertui-code</CodeVariant>
+  <CodeVariant label="bun">bun add bertui-code</CodeVariant>
+  <CodeVariant label="yarn">yarn add bertui-code</CodeVariant>
+</CodeVariants>
 
-### Problem: Colors not applying
-**Solution:** Ensure custom colors object has all required properties:
-```jsx
-// Complete custom colors object
-colors={{
-  background: '#...',
-  text: '#...',
-  header: '#...',
-  border: '#...',
-  meta: '#...',
-  button: '#...',
-  buttonHover: '#...',
-  buttonText: '#...',
-  success: '#...'
-}}
-```
 
-## 📁 Project Structure
+### Language Comparison
+
+<CodeVariants theme="light">
+  <CodeVariant label="JavaScript" language="javascript">
+    {javascriptExample}
+  </CodeVariant>
+  <CodeVariant label="TypeScript" language="typescript">
+    {typescriptExample}
+  </CodeVariant>
+  <CodeVariant label="Python" language="python">
+    {pythonExample}
+  </CodeVariant>
+</CodeVariants>
+
+
+### API Examples
+
+<CodeVariants theme="dark" tabPosition="bottom" stickyTabs={true}>
+  <CodeVariant label="cURL" language="bash">{curlExample}</CodeVariant>
+  <CodeVariant label="fetch" language="javascript">{fetchExample}</CodeVariant>
+  <CodeVariant label="axios" language="javascript">{axiosExample}</CodeVariant>
+</CodeVariants>
+
+
+---
+
+## 🐛 **Known Issues & Workarounds**
+
+### Issue: BertUI crashes with `Expected "}" but found ":"`
+**Cause:** TypeScript syntax in .jsx file or template literal in JSX
+**Fix:** Move code to string variable outside component
+
+### Issue: React/jsx-dev-runtime not found
+**Cause:** BertUI doesn't support React 18 automatic JSX runtime
+**Fix:** Use `React.createElement` or add `/** @jsx React.createElement */`
+
+### Issue: Shorthand props crash
+**Cause:** BertUI doesn't support `{stickyTabs}` shorthand
+**Fix:** Always use `stickyTabs={true}`
+
+---
+
+## 📦 **Project Structure**
 
-```
 bertui-code/
 ├── src/
-│   ├── Code.js          # Main component (BertUI-safe JS)
-│   ├── CopyButton.js    # Copy button component
-│   ├── InlineCode.js    # Inline code component
-│   └── index.js         # Main exports
-├── dist/
-│   └── index.js         # Built bundle (ES module)
-├── package.json
-└── README.md
-```
+│   ├── Code.js           # Main code block component
+│   ├── CodeVariants.js   # Multi-variant tabs (NEW)
+│   ├── CodeVariant.js    # Individual variant (NEW)
+│   ├── CopyButton.js     # Copy button component
+│   ├── InlineCode.js     # Inline code component
+│   ├── ThemeProvider.js  # Theme context (optional)
+│   └── index.js          # Main exports
+├── dist/                 # Built files
+├── package.json          # v1.0.1
+└── README.md            # You are here
+
 
-## 🤝 Compatibility
+---
 
-- **BertUI**: ✅ Fully compatible (built specifically for BertUI)
+## 🤝 **Compatibility**
+
+- **BertUI**: ✅ v1.0.1 certified - Tested with strict transpiler
 - **React**: ✅ 18.0.0+ (peer dependency)
-- **Browsers**: ✅ Chrome, Firefox, Safari, Edge (modern)
-- **Other Frameworks**: ❌ Not compatible (BertUI-exclusive optimizations)
+- **Browsers**: ✅ Chrome, Firefox, Safari, Edge
+- **Bun**: ✅ Recommended package manager
+
+---
 
-## 📄 License
+## 📄 **License**
 
 MIT © Pease Ernest
 
@@ -347,13 +363,17 @@ MIT © Pease Ernest
 <div align="center">
   <p>
     <strong>Part of the BertUI ecosystem</strong><br/>
-    Built with ❤️ for developers who value simplicity and beauty
+    Built with ❤️ for developers who value simplicity and speed
+  </p>
+  
+  <p>
+    <a href="https://github.com/yourusername/bertui-code">GitHub</a> •
+    <a href="https://npmjs.com/package/bertui-code">npm</a> •
+    <a href="#-bertui-compatibility">BertUI Compatibility</a>
   </p>
   
   <p>
-    <a href="https://bertui-docswebsite.pages.dev/">BertUI Website</a> •
-    <a href="https://github.com/BunElysiaReact/bertui-code.git">GitHub</a> •
-    <a href="https://npmjs.com/package/bertui-code">npm</a>
+    <sub>v1.0.1 • Zero-config • BertUI-certified</sub>
   </p>
 </div>
 ```

package/dist/index.js

@@ -1,2 +1,2 @@
-import r from"react";import f,{useState as k}from"react";function e({code:t,themeColors:n={}}){let[d,o]=k(!1),u=async()=>{try{await navigator.clipboard.writeText(t),o(!0),setTimeout(()=>o(!1),2000)}catch(p){let a=document.createElement("textarea");a.value=t,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),o(!0),setTimeout(()=>o(!1),2000)}},i={background:d?n.success||"#2e7d32":n.button||"#3d3d3d",border:"none",color:n.buttonText||"#d4d4d4",cursor:"pointer",padding:"4px 12px",borderRadius:"4px",fontSize:"12px",transition:"all 0.2s"};return f.createElement("button",{onClick:u,title:d?"Copied!":"Copy code",style:i,onMouseEnter:(p)=>{if(!d)p.currentTarget.style.background=n.buttonHover||"#4d4d4d"},onMouseLeave:(p)=>{if(!d)p.currentTarget.style.background=n.button||"#3d3d3d"}},d?"✓":"\uD83D\uDCCB")}function y({children:t,language:n="javascript",showLineNumbers:d=!1,showCopyButton:o=!0,className:u="",theme:i="dark",colors:p={}}){let x=t.split(`
-`).length,c=v(i,p);return r.createElement("div",{className:`bertui-code ${u}`,style:{background:c.background,borderRadius:"8px",fontFamily:"'Menlo', 'Monaco', monospace",fontSize:"14px",margin:"1rem 0",overflow:"hidden",color:c.text}},[r.createElement("div",{key:"header",style:{background:c.header,padding:"8px 16px",display:"flex",justifyContent:"space-between",alignItems:"center",borderBottom:`1px solid ${c.border}`}},[r.createElement("span",{key:"language",style:{color:c.meta,fontSize:"12px",fontWeight:"500"}},n),o&&r.createElement(e,{key:"copy",code:t,themeColors:c})].filter(Boolean)),r.createElement("div",{key:"content",style:{display:"flex",padding:"16px 0"}},[d&&r.createElement("div",{key:"lines",style:{color:c.meta,padding:"0 16px",textAlign:"right",userSelect:"none",minWidth:"40px"}},Array.from({length:x}).map((T,b)=>r.createElement("span",{key:b,style:{display:"block",paddingRight:"8px"}},b+1))),r.createElement("pre",{key:"pre",style:{margin:0,padding:"0 16px",flex:1,overflowX:"auto"}},r.createElement("code",{className:`language-${n}`,style:{color:c.text,background:"transparent",fontFamily:"inherit"}},t))].filter(Boolean))])}function v(t,n={}){let d={dark:{background:"#1e1e1e",header:"#2d2d2d",text:"#d4d4d4",meta:"#858585",border:"#3d3d3d",button:"#3d3d3d",buttonHover:"#4d4d4d",buttonText:"#d4d4d4",success:"#2e7d32"},light:{background:"#ffffff",header:"#f3f4f6",text:"#374151",meta:"#6b7280",border:"#d1d5db",button:"#e5e7eb",buttonHover:"#d1d5db",buttonText:"#374151",success:"#10b981"},pink:{background:"#fdf2f8",header:"#fce7f3",text:"#831843",meta:"#be185d",border:"#f472b6",button:"#f472b6",buttonHover:"#ec4899",buttonText:"#ffffff",success:"#10b981"}};return{...d[t]||d.dark,...n}}function M(t){let n={javascript:/(\bconsole\.|\bfunction\b|\bconst\b|\blet\b|\bvar\b|\bimport\b|\bexport\b)/,typescript:/(:\s*\w+\s*[=;]|\binterface\b|\btype\b|\bnamespace\b)/,python:/(\bdef\b|\bclass\b|\bimport\b|\bfrom\b|\bprint\b|:\s*$)/,html:/(<!DOCTYPE|<\/?\w+[^>]*>|&[a-z]+;)/,css:/({[^}]*}|\.\w+\s*{|#\w+\s*{|\bcolor:\s*)/,rust:/(\bfn\b|\blet\b|\bmut\b|\bimpl\b|->\s*\w+)/,cpp:/(#include|std::|cout\s*<<|->\s*\w+)/,java:/(public\s+class|System\.out\.println|\bvoid\b\s+\w+\s*\()/,go:/(\bfunc\b|\bpackage\b|:=|fmt\.Println)/,php:/(<\?php|\$\w+\s*=|echo\s+)/,sql:/(\bSELECT\b|\bFROM\b|\bWHERE\b|\bJOIN\b)/,shell:/(^\s*#!|\$\w+|mkdir\s+|cd\s+)/,json:/^\s*[{[]/,yaml:/(^[\w-]+:\s|^- )/,markdown:/(^#+|^-{3,}|^\s*\[)/,xml:/(<\?xml|<\/?[\w:]+>)/,ruby:/(\bdef\b|\bend\b|\bputs\b|:\w+=>)/,swift:/(\bfunc\b|\bvar\b|\blet\b|:\s*\w+\s*{)/,kotlin:/(\bfun\b|\bval\b|\bvar\b|:\s*\w+\s*[=;])/},d=t.toLowerCase();for(let[o,u]of Object.entries(n))if(u.test(d))return o;return"plaintext"}import S from"react";function E({children:t,theme:n="dark"}){let d={dark:{background:"#2d2d2d",color:"#d4d4d4"},light:{background:"#e5e7eb",color:"#374151"},pink:{background:"#fce7f3",color:"#831843"}},o=d[n]||d.dark;return S.createElement("code",{style:{background:o.background,color:o.color,padding:"2px 6px",borderRadius:"4px",fontFamily:"'Menlo', 'Monaco', monospace",fontSize:"0.9em"}},t)}export{M as detectLanguage,E as InlineCode,y as Code};
+import d from"react";import I,{useState as S}from"react";function y({code:e}){let[r,o]=S(!1),s=async()=>{try{await navigator.clipboard.writeText(e),o(!0),setTimeout(()=>o(!1),2000)}catch(n){let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),o(!0),setTimeout(()=>o(!1),2000)}};return I.createElement("button",{onClick:s,className:`bertui-copy-button ${r?"copied":""}`,title:r?"Copied!":"Copy code"},r?"✓":"\uD83D\uDCCB")}function f({children:e,language:r="javascript",showLineNumbers:o=!1,showCopyButton:s=!0,className:n="",theme:a}){let t=e.split(`
+`).length;return d.createElement("div",{className:`bertui-code ${n}`,"data-theme":a,style:{borderRadius:"8px",fontFamily:"Menlo, Monaco, monospace",fontSize:"14px",margin:"1rem 0",overflow:"hidden"}},[d.createElement("div",{key:"header",className:"bertui-code-header",style:{padding:"8px 16px",display:"flex",justifyContent:"space-between",alignItems:"center"}},[d.createElement("span",{key:"language",className:"bertui-code-language",style:{fontSize:"12px",fontWeight:"500"}},r),s&&d.createElement(y,{key:"copy",code:e})].filter(Boolean)),d.createElement("div",{key:"content",style:{display:"flex",padding:"16px 0"}},[o&&d.createElement("div",{key:"lines",className:"bertui-line-numbers",style:{padding:"0 16px",textAlign:"right",userSelect:"none",minWidth:"40px"}},Array.from({length:t}).map((p,u)=>d.createElement("span",{key:u,style:{display:"block",paddingRight:"8px"}},u+1))),d.createElement("pre",{key:"pre",className:"bertui-code-pre",style:{margin:0,padding:"0 16px",flex:1,overflowX:"auto"}},d.createElement("code",{className:`language-${r}`,style:{background:"transparent",fontFamily:"inherit"}},e))].filter(Boolean))])}function j(e){let r={javascript:/(\bconsole\.|\bfunction\b|\bconst\b|\blet\b|\bvar\b|\bimport\b|\bexport\b)/,typescript:/(:\s*\w+\s*[=;]|\binterface\b|\btype\b|\bnamespace\b)/,python:/(\bdef\b|\bclass\b|\bimport\b|\bfrom\b|\bprint\b|:\s*$)/,html:/(<!DOCTYPE|<\/?\w+[^>]*>|&[a-z]+;)/,css:/({[^}]*}|\.\w+\s*{|#\w+\s*{|\bcolor:\s*)/,rust:/(\bfn\b|\blet\b|\bmut\b|\bimpl\b|->\s*\w+)/,cpp:/(#include|std::|cout\s*<<|->\s*\w+)/,java:/(public\s+class|System\.out\.println|\bvoid\b\s+\w+\s*\()/,go:/(\bfunc\b|\bpackage\b|:=|fmt\.Println)/,php:/(<\?php|\$\w+\s*=|echo\s+)/,sql:/(\bSELECT\b|\bFROM\b|\bWHERE\b|\bJOIN\b)/,shell:/(^\s*#!|\$\w+|mkdir\s+|cd\s+)/,json:/^\s*[{[]/,yaml:/(^[\w-]+:\s|^- )/,markdown:/(^#+|^-{3,}|^\s*\[)/,xml:/(<\?xml|<\/?[\w:]+>)/,ruby:/(\bdef\b|\bend\b|\bputs\b|:\w+=>)/,swift:/(\bfunc\b|\bvar\b|\blet\b|:\s*\w+\s*{)/,kotlin:/(\bfun\b|\bval\b|\bvar\b|:\s*\w+\s*[=;])/},o=e.toLowerCase();for(let[s,n]of Object.entries(r))if(n.test(o))return s;return"plaintext"}import L from"react";function $({children:e,theme:r}){return L.createElement("code",{className:"bertui-inline-code","data-theme":r,style:{padding:"2px 6px",borderRadius:"4px",fontFamily:"Menlo, Monaco, monospace",fontSize:"0.9em"}},e)}import b,{useState as P,Children as M,isValidElement as V}from"react";function A({children:e,theme:r="dark",showCopyButton:o=!0,className:s="",defaultVariant:n=0,stickyTabs:a=!1,tabPosition:l="top"}){let t=M.toArray(e).filter((i)=>V(i)&&i.type?.isCodeVariant);if(t.length===0)return b.createElement(f,{theme:r,showCopyButton:o,className:s,children:e});if(t.length===1){let i=t[0];return b.createElement(f,{theme:r,showCopyButton:o,className:s,language:i.props.language||"javascript",showLineNumbers:i.props.showLineNumbers||!1,children:i.props.children})}let[p,u]=P(()=>{if(typeof n==="number")return Math.min(n,t.length-1);if(typeof n==="string"){let i=t.findIndex((c)=>c.props.label===n);return i!==-1?i:0}return 0}),T=t[p],{children:R,language:F="javascript",showLineNumbers:O=!1}=T.props,g=b.useMemo(()=>`bertui-variants-${Math.random().toString(36).substr(2,9)}`,[]),N=(i)=>{let c=i===p,E={padding:"8px 16px",fontSize:"13px",fontWeight:"500",border:"none",cursor:"pointer",transition:"all 0.2s",fontFamily:"inherit",borderRadius:"4px 4px 0 0"};if(c)return{...E,background:"var(--bertui-tab-active, #1e1e1e)",color:"var(--bertui-tab-active-text, #ffffff)",borderBottom:"2px solid var(--bertui-tab-accent, #3b82f6)"};return{...E,background:"transparent",color:"var(--bertui-tab-inactive, #858585)",borderBottom:"2px solid transparent"}},v=b.createElement("div",{key:"tabs",role:"tablist","aria-label":"Code variants",style:{display:"flex",flexWrap:"wrap",gap:"4px",padding:"12px 16px",background:"var(--bertui-tab-bar, #2d2d2d)",borderBottom:l==="top"?"1px solid var(--bertui-border, #3d3d3d)":"none",borderTop:l==="bottom"?"1px solid var(--bertui-border, #3d3d3d)":"none",position:a?"sticky":"relative",top:a&&l==="top"?0:"auto",bottom:a&&l==="bottom"?0:"auto",zIndex:a?10:"auto"}},t.map((i,c)=>{let E=i.props.label||`Option ${c+1}`,h=c===p;return b.createElement("button",{key:c,role:"tab","aria-selected":h,"aria-controls":`${g}-panel`,id:`${g}-tab-${c}`,onClick:()=>u(c),style:N(c),onMouseEnter:(m)=>{if(!h)m.currentTarget.style.background="var(--bertui-tab-hover, #3d3d3d)",m.currentTarget.style.color="var(--bertui-tab-active-text, #ffffff)"},onMouseLeave:(m)=>{if(!h)m.currentTarget.style.background="transparent",m.currentTarget.style.color="var(--bertui-tab-inactive, #858585)"}},E)})),x=[];if(l==="top")x.push(v);if(x.push(b.createElement("div",{key:"code",id:`${g}-panel`,role:"tabpanel","aria-labelledby":`${g}-tab-${p}`,style:{padding:"4px 0"}},b.createElement(f,{theme:r,showCopyButton:o,className:s,language:F,showLineNumbers:O,children:R}))),l==="bottom")x.push(v);return b.createElement("div",{className:`bertui-code-variants ${s}`,"data-theme":r,style:{margin:"1rem 0",borderRadius:"8px",overflow:"hidden",border:"1px solid var(--bertui-border, #3d3d3d)",background:"var(--bertui-bg, #1e1e1e)"}},x)}import re from"react";function C({children:e,label:r,language:o="javascript",showLineNumbers:s=!1,className:n=""}){return null}C.isCodeVariant=!0;import X,{useEffect as w,createContext as Y,useContext as z}from"react";import{jsxDEV as q}from"react/jsx-dev-runtime";var k=Y({theme:"dark",setTheme:()=>{},toggleTheme:()=>{}});function B({children:e,initialTheme:r="dark",enableSystemPreference:o=!0,storageKey:s="bertui-theme"}){let[n,a]=X.useState(()=>{if(typeof window<"u"){let t=localStorage.getItem(s);if(t)return t}return r});w(()=>{if(typeof window>"u")return;document.documentElement.setAttribute("data-bertui-theme",n),localStorage.setItem(s,n)},[n,s]),w(()=>{if(!o||typeof window>"u")return;let t=window.matchMedia("(prefers-color-scheme: dark)"),p=(u)=>{if(n==="system")document.documentElement.setAttribute("data-bertui-theme",u.matches?"dark":"light")};return t.addEventListener("change",p),()=>t.removeEventListener("change",p)},[n,o]);let l=()=>{a((t)=>{if(t==="dark")return"light";if(t==="light")return"pink";if(t==="pink")return"dark";return"dark"})};return q(k.Provider,{value:{theme:n,setTheme:a,toggleTheme:l},children:e},void 0,!1,void 0,this)}function W(){let e=z(k);if(!e)throw Error("useCodeTheme must be used within CodeThemeProvider");return e}var ie="./bertui-code.css",ce="2.0.0";export{ce as version,W as useCodeTheme,j as detectLanguage,ie as css,$ as InlineCode,y as CopyButton,A as CodeVariants,C as CodeVariant,B as CodeThemeProvider,f as Code};

package/package.json

@@ -1,31 +1,34 @@
 {
-"name": "bertui-code",
-  "version": "1.0.0",
+  "name": "bertui-code",
+  "version": "2.0.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
+      "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./bertui-code.css": {
       "import": "./dist/bertui-code.css",
-      "types": "./dist/bertui-code.css.d.ts"
+      "require": "./dist/bertui-code.css"
     }
   },
   "files": ["dist"],
-
   "scripts": {
-    "build": "bun build src/index.js --outdir dist --target browser --format esm --minify --external react --external fs --external path",
-    "dev": "bun build src/index.js --outdir dist --target browser --format esm --watch --external react --external fs --external path"
+    "build": "bun build src/index.js --outdir dist --target browser --format esm --external react --external react/jsx-runtime --external react/jsx-dev-runtime --splitting --minify",
+    "dev": "bun build src/index.js --outdir dist --target browser --format esm --external react --external react/jsx-runtime --external react/jsx-dev-runtime --watch"
   },
-
   "keywords": ["react", "syntax-highlighting", "bertui", "code"],
   "author": "Your Name",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
-}
-
+}

package/dist/bertui-code.css

@@ -1,275 +0,0 @@
-/* bertui-code - Zero-config syntax highlighting for BertUI */
-
-/* Container */
-.bertui-code {
-  background: #1e1e1e;
-  border-radius: 8px;
-  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 1rem 0;
-  overflow: hidden;
-  color: #d4d4d4;
-}
-
-/* Header */
-.bertui-code-header {
-  background: #2d2d2d;
-  padding: 8px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #3d3d3d;
-}
-
-.bertui-code-language {
-  color: #858585;
-  font-size: 13px;
-  font-weight: 500;
-  text-transform: lowercase;
-}
-
-/* Copy button */
-.bertui-copy-button {
-  background: #3d3d3d;
-  border: none;
-  color: #d4d4d4;
-  cursor: pointer;
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.bertui-copy-button:hover {
-  background: #4d4d4d;
-}
-
-.bertui-copy-button.copied {
-  background: #2e7d32;
-  color: white;
-}
-
-/* Code content */
-.bertui-code-content {
-  display: flex;
-  overflow-x: auto;
-  padding: 16px 0;
-}
-
-/* Line numbers */
-.bertui-line-numbers {
-  color: #858585;
-  padding: 0 16px;
-  text-align: right;
-  user-select: none;
-  border-right: 1px solid #3d3d3d;
-  min-width: 40px;
-}
-
-.bertui-line-numbers span {
-  display: block;
-}
-
-/* Code block */
-.bertui-code-pre {
-  margin: 0;
-  padding: 0 16px;
-  flex: 1;
-  overflow-x: auto;
-  white-space: pre;
-}
-
-/* Syntax highlighting tokens (users can override) */
-.token.keyword {
-  color: #569cd6;
-  font-weight: bold;
-}
-
-.token.string {
-  color: #ce9178;
-}
-
-.token.comment {
-  color: #6a9955;
-  font-style: italic;
-}
-
-.token.function {
-  color: #dcdcaa;
-}
-
-.token.number {
-  color: #b5cea8;
-}
-
-.token.operator {
-  color: #d4d4d4;
-}
-
-.token.punctuation {
-  color: #d4d4d4;
-}
-
-.token.class-name {
-  color: #4ec9b0;
-}
-
-.token.parameter {
-  color: #9cdcfe;
-}
-
-/* Inline code */
-.bertui-inline-code {
-  background: #2d2d2d;
-  color: #d4d4d4;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Menlo', 'Monaco', monospace;
-  font-size: 0.9em;
-  line-height: 1.4;
-}
-
-/* Light theme variant */
-.bertui-code.light-theme,
-.bertui-code[data-theme="light"] {
-  background: #ffffff;
-  color: #374151;
-  border: 1px solid #e5e7eb;
-}
-
-.bertui-code.light-theme .bertui-code-header,
-.bertui-code[data-theme="light"] .bertui-code-header {
-  background: #f3f4f6;
-  border-bottom: 1px solid #d1d5db;
-}
-
-.bertui-code.light-theme .bertui-code-language,
-.bertui-code[data-theme="light"] .bertui-code-language {
-  color: #6b7280;
-}
-
-.bertui-code.light-theme .bertui-copy-button,
-.bertui-code[data-theme="light"] .bertui-copy-button {
-  background: #e5e7eb;
-  color: #374151;
-}
-
-.bertui-code.light-theme .bertui-copy-button:hover,
-.bertui-code[data-theme="light"] .bertui-copy-button:hover {
-  background: #d1d5db;
-}
-
-.bertui-code.light-theme .bertui-line-numbers,
-.bertui-code[data-theme="light"] .bertui-line-numbers {
-  color: #6b7280;
-  border-right: 1px solid #d1d5db;
-}
-
-.bertui-code.light-theme .bertui-inline-code,
-.bertui-code[data-theme="light"] .bertui-inline-code {
-  background: #e5e7eb;
-  color: #374151;
-}
-
-/* Pink theme variant */
-.bertui-code.pink-theme,
-.bertui-code[data-theme="pink"] {
-  background: #fdf2f8;
-  color: #831843;
-  border: 1px solid #fbcfe8;
-}
-
-.bertui-code.pink-theme .bertui-code-header,
-.bertui-code[data-theme="pink"] .bertui-code-header {
-  background: #fce7f3;
-  border-bottom: 1px solid #f9a8d4;
-}
-
-.bertui-code.pink-theme .bertui-code-language,
-.bertui-code[data-theme="pink"] .bertui-code-language {
-  color: #be185d;
-}
-
-.bertui-code.pink-theme .bertui-copy-button,
-.bertui-code[data-theme="pink"] .bertui-copy-button {
-  background: #f472b6;
-  color: white;
-}
-
-.bertui-code.pink-theme .bertui-copy-button:hover,
-.bertui-code[data-theme="pink"] .bertui-copy-button:hover {
-  background: #ec4899;
-}
-
-.bertui-code.pink-theme .bertui-line-numbers,
-.bertui-code[data-theme="pink"] .bertui-line-numbers {
-  color: #db2777;
-  border-right: 1px solid #f9a8d4;
-}
-
-.bertui-code.pink-theme .bertui-inline-code,
-.bertui-code[data-theme="pink"] .bertui-inline-code {
-  background: #fce7f3;
-  color: #831843;
-}
-
-/* Light theme syntax */
-.bertui-code.light-theme .token.keyword,
-.bertui-code[data-theme="light"] .token.keyword {
-  color: #059669;
-}
-
-.bertui-code.light-theme .token.string,
-.bertui-code[data-theme="light"] .token.string {
-  color: #dc2626;
-}
-
-.bertui-code.light-theme .token.comment,
-.bertui-code[data-theme="light"] .token.comment {
-  color: #6b7280;
-}
-
-/* Pink theme syntax */
-.bertui-code.pink-theme .token.keyword,
-.bertui-code[data-theme="pink"] .token.keyword {
-  color: #db2777;
-}
-
-.bertui-code.pink-theme .token.string,
-.bertui-code[data-theme="pink"] .token.string {
-  color: #ea580c;
-}
-
-.bertui-code.pink-theme .token.comment,
-.bertui-code[data-theme="pink"] .token.comment {
-  color: #a855f7;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 640px) {
-  .bertui-code {
-    font-size: 13px;
-    border-radius: 6px;
-  }
-  
-  .bertui-code-content {
-    padding: 12px 0;
-  }
-  
-  .bertui-code-header {
-    padding: 6px 12px;
-  }
-  
-  .bertui-line-numbers {
-    padding: 0 12px;
-    min-width: 36px;
-  }
-  
-  .bertui-code-pre {
-    padding: 0 12px;
-  }
-}

package/dist/index.d.ts

@@ -1,38 +0,0 @@
-/**
- * CSS module declaration for bertui-code styles
- */
-
-declare module 'bertui-code/bertui-code.css' {
-  const styles: {
-    /** bertui-code container class */
-    readonly 'bertui-code': string;
-    /** Code block header */
-    readonly 'bertui-code-header': string;
-    /** Language label */
-    readonly 'bertui-code-language': string;
-    /** Copy button */
-    readonly 'bertui-copy-button': string;
-    /** Copy button copied state */
-    readonly 'copied': string;
-    /** Code content wrapper */
-    readonly 'bertui-code-content': string;
-    /** Line numbers container */
-    readonly 'bertui-line-numbers': string;
-    /** Individual line number */
-    readonly 'bertui-line-number': string;
-    /** Preformatted code block */
-    readonly 'bertui-code-pre': string;
-    /** Inline code element */
-    readonly 'bertui-inline-code': string;
-    /** Syntax highlighting tokens */
-    readonly 'token': string;
-    readonly 'keyword': string;
-    readonly 'string': string;
-    readonly 'comment': string;
-    readonly 'function': string;
-    readonly 'number': string;
-    readonly 'operator': string;
-  };
-  
-  export default styles;
-}