avt-rct-lib 1.0.0 → 1.0.1

package/README.md

@@ -1,28 +1,29 @@
 # avt-rct-lib
 
-React component library dengan desain macOS/iOS. **Hanya butuh Tailwind CSS** — tanpa Radix UI, tanpa library komponen lain.
+[![npm version](https://img.shields.io/npm/v/avt-rct-lib)](https://www.npmjs.com/package/avt-rct-lib)
+[![npm downloads](https://img.shields.io/npm/dm/avt-rct-lib)](https://www.npmjs.com/package/avt-rct-lib)
+[![license](https://img.shields.io/npm/l/avt-rct-lib)](LICENSE)
 
-## Komponen
+React component library dengan desain **macOS/iOS**. Hanya butuh **Tailwind CSS** — tanpa Radix UI, tanpa library komponen lain.
 
-| Komponen | Deskripsi |
-|---|---|
-| `Button` | 6 variant, 5 ukuran, loading state, icon support |
-| `Badge` | 7 variant warna + dot indicator |
-| `Input` / `Textarea` | Label, hint, error, addons |
-| `Card` | Padding variant, hover, glass morphism |
-| `Tabs` | 3 variant: pills, underline, segment |
-| `MenuRoot` | Dropdown — `createPortal`, auto-position |
-| `Sheet` / `Drawer` | Slide panel right/left/bottom — `createPortal` |
-| `Toast` | Singleton store, bisa dipanggil di luar React |
-| `Table` | Toolbar, pagination, responsive |
-| `Navbar` | Left/center/right slots, search, icon buttons |
-| `Sidebar` | Push mode (desktop) + overlay mode (mobile) |
-| `Scrollbar` | Thin macOS-style scrollbar wrapper |
+📦 [npmjs.com/package/avt-rct-lib](https://www.npmjs.com/package/avt-rct-lib)
+
+## Install
+
+```bash
+npm install avt-rct-lib
+# atau
+bun add avt-rct-lib
+# atau
+pnpm add avt-rct-lib
+```
 
 ## Setup
 
 ### 1. Tailwind Config
 
+Tambahkan path library ke `content` agar Tailwind men-scan class yang digunakan:
+
 ```js
 // tailwind.config.js
 export default {
@@ -33,7 +34,9 @@ export default {
 }
 ```
 
-### 2. Import CSS (animasi & scrollbar)
+### 2. Import CSS
+
+Import satu kali di entry point aplikasi (animasi & scrollbar macOS-style):
 
 ```ts
 // main.tsx
@@ -43,17 +46,136 @@ import 'avt-rct-lib/styles'
 ### 3. Gunakan komponen
 
 ```tsx
-import { Button, Badge, Card, toast, Sidebar } from 'avt-rct-lib'
+import { Button, Badge, Card, Sidebar, toast, Toaster } from 'avt-rct-lib'
 
+// Pasang Toaster di root layout
+<Toaster position="bottom-right" />
+
+// Gunakan komponen
 <Button variant="primary">Simpan</Button>
 <Badge variant="success" dot>Online</Badge>
 toast({ title: 'Berhasil!', variant: 'success' })
 ```
 
-## Development (sumber lokal)
+## Komponen
+
+| Komponen | Deskripsi |
+|---|---|
+| `Button` | 6 variant, 5 ukuran, loading state, icon support |
+| `Badge` | 7 variant warna + dot indicator |
+| `Input` / `Textarea` | Label, hint, error state, addons kiri/kanan |
+| `Card` | Padding variant, hover effect, glass morphism |
+| `Tabs` | 3 variant: pills, underline, segment — scroll horizontal mobile |
+| `MenuRoot` | Dropdown via `createPortal` — tidak terhalangi overflow/z-index |
+| `Sheet` / `Drawer` | Slide panel right/left/bottom via `createPortal` |
+| `Toast` | Singleton store — bisa dipanggil di luar React |
+| `Table` | Toolbar, pagination, responsive columns |
+| `Navbar` | Left/center/right slots, search, icon buttons, glass |
+| `Sidebar` | Push mode (desktop) + overlay mode (mobile) |
+| `Scrollbar` | Thin macOS-style scrollbar wrapper |
+
+## Contoh Penggunaan
+
+### Button
+
+```tsx
+import { Button } from 'avt-rct-lib'
+
+<Button variant="primary">Simpan</Button>
+<Button variant="destructive" loading>Menghapus...</Button>
+<Button variant="outline" leftIcon={<PlusIcon />}>Tambah</Button>
+```
+
+### Sidebar (Desktop + Mobile)
+
+```tsx
+import { Sidebar, SidebarHeader, SidebarBrand, SidebarContent,
+         SidebarGroup, SidebarItem, SidebarFooter, SidebarUser,
+         SidebarToggle } from 'avt-rct-lib'
+
+// Desktop — push mode
+const [collapsed, setCollapsed] = useState(false)
+<Sidebar collapsed={collapsed} width="240px" collapsedWidth="64px">
+  ...
+</Sidebar>
+
+// Mobile — overlay mode
+const [open, setOpen] = useState(false)
+<Sidebar overlay collapsed={!open} onOverlayClose={() => setOpen(false)} width="280px">
+  ...
+</Sidebar>
+```
+
+### Menu Dropdown
+
+```tsx
+import { MenuRoot, MenuButton, MenuContent, MenuItem, MenuSeparator } from 'avt-rct-lib'
+
+// MenuContent menggunakan createPortal — selalu di atas semua elemen
+<MenuRoot>
+  <MenuButton className="...">Opsi</MenuButton>
+  <MenuContent align="end">
+    <MenuItem icon={<EditIcon />}>Edit</MenuItem>
+    <MenuSeparator />
+    <MenuItem icon={<TrashIcon />} variant="destructive">Hapus</MenuItem>
+  </MenuContent>
+</MenuRoot>
+```
+
+### Toast
+
+```tsx
+import { toast, dismissToast, Toaster } from 'avt-rct-lib'
+
+// Di root layout
+<Toaster position="bottom-right" />
+
+// Panggil dari mana saja — bahkan dari luar React (API interceptor, dll)
+toast({ title: 'Berhasil!', variant: 'success' })
+toast({ title: 'Error', description: 'Detail...', variant: 'destructive' })
+
+const id = toast({ title: 'Loading...', duration: Infinity })
+dismissToast(id)
+```
+
+### Table
+
+```tsx
+import { Table, TableHeader, TableBody, TableRow, TableHead,
+         TableCell, TableToolbar, TablePagination } from 'avt-rct-lib'
+
+<Table>
+  <TableToolbar>
+    <Input leftAddon={<SearchIcon />} placeholder="Cari..." />
+    <Button size="sm">Tambah</Button>
+  </TableToolbar>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Nama</TableHead>
+      <TableHead className="hidden sm:table-cell">Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    {data.map(row => (
+      <TableRow key={row.id}>
+        <TableCell>{row.name}</TableCell>
+        <TableCell className="hidden sm:table-cell">
+          <Badge variant="success" dot>Aktif</Badge>
+        </TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+  <TablePagination page={page} pageCount={total}
+    canPrev={page > 1} canNext={page < total}
+    onPrev={() => setPage(p => p - 1)}
+    onNext={() => setPage(p => p + 1)} />
+</Table>
+```
+
+## Development (dari source lokal)
 
 ```js
-// vite.config.ts — alias untuk dev tanpa npm install
+// vite.config.ts — alias ke source langsung
 resolve: {
   alias: {
     'avt-rct-lib': path.resolve(__dirname, '../avt-rct-lib/src/index.ts'),
@@ -65,7 +187,7 @@ content: [
   '../avt-rct-lib/src/**/*.{ts,tsx}',
 ]
 
-// main.tsx — import CSS langsung dari source
+// main.tsx — import CSS dari source
 import '../avt-rct-lib/src/styles/base.css'
 ```
 
@@ -73,7 +195,7 @@ import '../avt-rct-lib/src/styles/base.css'
 
 ```bash
 bun run build       # kompilasi ke dist/
-npm version patch   # bump versi
+npm version patch   # bump versi (1.0.0 → 1.0.1)
 npm publish         # upload ke npm registry
 ```
 

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "avt-rct-lib",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "AVT React Component Library — Tailwind only, zero other deps",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       }
     },
     "./styles": "./src/styles/base.css"