@sreedev/my3dui 0.1.4 → 0.1.6

package/README.md

@@ -34,11 +34,11 @@ A TypeScript React component library combining beautiful 2D UI components with c
 ## Installation
 
 ```bash
-npm install my3dui react react-dom
+npm install @sreedev/my3dui react react-dom
 # or
-yarn add my3dui react react-dom
+yarn add @sreedev/my3dui react react-dom
 # or
-pnpm add my3dui react react-dom
+pnpm add @sreedev/my3dui react react-dom
 ```
 
 ### Optional Dependencies
@@ -49,13 +49,29 @@ For 3D component support, install the following packages:
 npm install three @react-three/fiber @react-three/drei
 ```
 
+## Exported Components
+
+All components are exported from the main entry. Use tree-shaking for optimal bundle size.
+
+**Layout:** `Container`, `Grid`, `Stack`, `Section`, `PageLayout`, `Stage`, `Viewport`, `Container3D`, `Grid3D`, `CameraController`, `Scene3D`
+
+**3D UI:** `Button3D`, `Card3D`, `Accordion3D`, `Badge3D`, `Input3D`, `Slider3D`, `Tabs3D`, `Toggle3D`, `Modal3D`, `Menu3D`, `Menu3DItem`, `Menu3DLabel`, `Menu3DSeparator`, `Tooltip3D`, `Progress3D`, `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`, `Select3D`, `Spinner3D`, `Stepper3D`, `NavBar3D`, `Timeline3D`
+
+**Standard UI:** `Tooltip`, `TooltipProvider`, `Slider`, `Toggle`, `Badge`, `Input`, `Select`, `Table`, `Pagination`, `Progress`, `Skeleton`, `Toast`, `Toaster`, `SonnerToaster`, `sonnerToast`, `Popover`, `Sheet`, `Dialog`, `Breadcrumb`, `Label`, `Checkbox`, `Switch`, `Textarea`, `Separator`, `ScrollArea`, `ScrollBar`, `RadioGroup`, `ToggleGroup`, `Alert`, `Avatar`, `Card`, `Collapsible`, `AspectRatio`, `HoverCard`, `AlertDialog`, `Command`, `Form`, `DropdownMenu`, `ContextMenu`, `Drawer`, `Menubar`, `NavigationMenu`, `Calendar`, `Sidebar`, `Carousel`, `InputOTP`, and subcomponents.
+
+**Data viz:** `BarChart3D`, `LineChart3D`, `PieChart3D`, `ScatterPlot3D`, `Graph3D`, `Map3D`
+
+**Media:** `Gallery3D`, `ModelViewer`, `VideoPlane`, `ImagePlane`, `AudioVisualizer`
+
+**Effects:** `Particles`, `Bloom`, `Reflection`, `Fog`, `ShadowSystem`, `GlowEffect`, `WaveEffect`, `NoiseField`
+
 ## Quick Start
 
 ### Basic Button3D Component
 
 ```tsx
 import React from 'react';
-import { Button3D } from 'my3dui';
+import { Button3D } from '@sreedev/my3dui';
 
 export function MyComponent() {
   return (
@@ -73,7 +89,7 @@ export function MyComponent() {
 ### Card3D Component
 
 ```tsx
-import { Card3D } from 'my3dui';
+import { Card3D } from '@sreedev/my3dui';
 
 export function MyCard() {
   return (
@@ -91,12 +107,12 @@ export function MyCard() {
 
 ```tsx
 import { 
-  Button, 
+  Button3D, 
   Input, 
   Select, 
   Badge,
   Card 
-} from 'my3dui';
+} from '@sreedev/my3dui';
 
 export function StandardUI() {
   return (
@@ -107,7 +123,7 @@ export function StandardUI() {
           <option>Option 1</option>
           <option>Option 2</option>
         </Select>
-        <Button>Submit</Button>
+        <Button3D>Submit</Button3D>
       </div>
     </Card>
   );
@@ -118,11 +134,11 @@ export function StandardUI() {
 
 ### Using 3D Effects with Canvas
 
-my3dui 3D components require a `<Canvas>` from @react-three/fiber:
+My3DUI 3D components require a `<Canvas>` from @react-three/fiber:
 
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { Bloom } from 'my3dui';
+import { Bloom } from '@sreedev/my3dui';
 
 export function MyScene() {
   return (
@@ -138,7 +154,7 @@ export function MyScene() {
 
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { Bloom } from 'my3dui';
+import { Bloom } from '@sreedev/my3dui';
 
 export function BloomExample() {
   return (
@@ -161,7 +177,7 @@ export function BloomExample() {
 
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { ImagePlane, VideoPlane } from 'my3dui';
+import { ImagePlane, VideoPlane } from '@sreedev/my3dui';
 
 export function MediaPlanes() {
   return (
@@ -180,7 +196,7 @@ export function MediaPlanes() {
 
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { Gallery3D } from 'my3dui';
+import { Gallery3D } from '@sreedev/my3dui';
 
 export function MyGallery() {
   const images = [
@@ -201,7 +217,7 @@ export function MyGallery() {
 
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { Map3D } from 'my3dui';
+import { Map3D } from '@sreedev/my3dui';
 
 export function InteractiveMap() {
   return (
@@ -220,7 +236,7 @@ export function InteractiveMap() {
 
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { Particles } from 'my3dui';
+import { Particles } from '@sreedev/my3dui';
 
 export function ParticleEffect() {
   return (
@@ -293,7 +309,7 @@ interface ParticlesProps {
 
 ### Using next-themes
 
-my3dui supports dark mode seamlessly via next-themes:
+My3DUI supports dark mode seamlessly via next-themes:
 
 ```tsx
 import { ThemeProvider } from 'next-themes';
@@ -314,7 +330,7 @@ export function App() {
 // tailwind.config.js
 module.exports = {
   content: [
-    './node_modules/my3dui/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@sreedev/my3dui/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
@@ -450,14 +466,14 @@ src/
 
 ### From shadcn/ui
 
-All my3dui components maintain compatibility with shadcn/ui styling:
+All My3DUI components maintain compatibility with shadcn/ui styling:
 
 ```tsx
 // Before
 import { Button } from '@/components/ui/button';
 
 // After - with enhanced features
-import { Button3D } from 'my3dui';
+import { Button3D } from '@sreedev/my3dui';
 ```
 
 ### Variant Changes
@@ -484,9 +500,9 @@ For 3D features, WebGL support is required.
 
 1. **Code Splitting**: Import components individually
    ```tsx
-   import { Button3D } from 'my3dui';  // Better
+   import { Button3D } from '@sreedev/my3dui';  // Better
    // vs
-   import * as My3DUI from 'my3dui';    // Avoids this
+   import * as My3DUI from '@sreedev/my3dui';    // Avoids this
    ```
 
 2. **Lazy Load 3D Components**: Use React.lazy for 3D canvas