avt-rct-lib 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +144 -22
- package/dist/index.cjs +25 -0
- package/dist/index.d.cts +26 -1
- package/dist/index.d.ts +26 -1
- package/dist/index.js +25 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
# avt-rct-lib
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/avt-rct-lib)
|
|
4
|
+
[](https://www.npmjs.com/package/avt-rct-lib)
|
|
5
|
+
[](LICENSE)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
React component library dengan desain **macOS/iOS**. Hanya butuh **Tailwind CSS** — tanpa Radix UI, tanpa library komponen lain.
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
| `Navbar` | Left/center/right slots, search, icon buttons |
|
|
19
|
-
| `Sidebar` | Push mode (desktop) + overlay mode (mobile) |
|
|
20
|
-
| `Scrollbar` | Thin macOS-style scrollbar wrapper |
|
|
9
|
+
📦 [npmjs.com/package/avt-rct-lib](https://www.npmjs.com/package/avt-rct-lib) · 🌐 [avt-rct-dashboard.vercel.app](https://avt-rct-dashboard.vercel.app)
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install avt-rct-lib
|
|
15
|
+
# atau
|
|
16
|
+
bun add avt-rct-lib
|
|
17
|
+
# atau
|
|
18
|
+
pnpm add avt-rct-lib
|
|
19
|
+
```
|
|
21
20
|
|
|
22
21
|
## Setup
|
|
23
22
|
|
|
24
23
|
### 1. Tailwind Config
|
|
25
24
|
|
|
25
|
+
Tambahkan path library ke `content` agar Tailwind men-scan class yang digunakan:
|
|
26
|
+
|
|
26
27
|
```js
|
|
27
28
|
// tailwind.config.js
|
|
28
29
|
export default {
|
|
@@ -33,7 +34,9 @@ export default {
|
|
|
33
34
|
}
|
|
34
35
|
```
|
|
35
36
|
|
|
36
|
-
### 2. Import CSS
|
|
37
|
+
### 2. Import CSS
|
|
38
|
+
|
|
39
|
+
Import satu kali di entry point aplikasi (animasi & scrollbar macOS-style):
|
|
37
40
|
|
|
38
41
|
```ts
|
|
39
42
|
// main.tsx
|
|
@@ -43,17 +46,136 @@ import 'avt-rct-lib/styles'
|
|
|
43
46
|
### 3. Gunakan komponen
|
|
44
47
|
|
|
45
48
|
```tsx
|
|
46
|
-
import { Button, Badge, Card, toast,
|
|
49
|
+
import { Button, Badge, Card, Sidebar, toast, Toaster } from 'avt-rct-lib'
|
|
47
50
|
|
|
51
|
+
// Pasang Toaster di root layout
|
|
52
|
+
<Toaster position="bottom-right" />
|
|
53
|
+
|
|
54
|
+
// Gunakan komponen
|
|
48
55
|
<Button variant="primary">Simpan</Button>
|
|
49
56
|
<Badge variant="success" dot>Online</Badge>
|
|
50
57
|
toast({ title: 'Berhasil!', variant: 'success' })
|
|
51
58
|
```
|
|
52
59
|
|
|
53
|
-
##
|
|
60
|
+
## Komponen
|
|
61
|
+
|
|
62
|
+
| Komponen | Deskripsi |
|
|
63
|
+
|---|---|
|
|
64
|
+
| `Button` | 6 variant, 5 ukuran, loading state, icon support |
|
|
65
|
+
| `Badge` | 7 variant warna + dot indicator |
|
|
66
|
+
| `Input` / `Textarea` | Label, hint, error state, addons kiri/kanan |
|
|
67
|
+
| `Card` | Padding variant, hover effect, glass morphism |
|
|
68
|
+
| `Tabs` | 3 variant: pills, underline, segment — scroll horizontal mobile |
|
|
69
|
+
| `MenuRoot` | Dropdown via `createPortal` — tidak terhalangi overflow/z-index |
|
|
70
|
+
| `Sheet` / `Drawer` | Slide panel right/left/bottom via `createPortal` |
|
|
71
|
+
| `Toast` | Singleton store — bisa dipanggil di luar React |
|
|
72
|
+
| `Table` | Toolbar, pagination, responsive columns |
|
|
73
|
+
| `Navbar` | Left/center/right slots, search, icon buttons, glass |
|
|
74
|
+
| `Sidebar` | Push mode (desktop) + overlay mode (mobile) |
|
|
75
|
+
| `Scrollbar` | Thin macOS-style scrollbar wrapper |
|
|
76
|
+
|
|
77
|
+
## Contoh Penggunaan
|
|
78
|
+
|
|
79
|
+
### Button
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import { Button } from 'avt-rct-lib'
|
|
83
|
+
|
|
84
|
+
<Button variant="primary">Simpan</Button>
|
|
85
|
+
<Button variant="destructive" loading>Menghapus...</Button>
|
|
86
|
+
<Button variant="outline" leftIcon={<PlusIcon />}>Tambah</Button>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Sidebar (Desktop + Mobile)
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { Sidebar, SidebarHeader, SidebarBrand, SidebarContent,
|
|
93
|
+
SidebarGroup, SidebarItem, SidebarFooter, SidebarUser,
|
|
94
|
+
SidebarToggle } from 'avt-rct-lib'
|
|
95
|
+
|
|
96
|
+
// Desktop — push mode
|
|
97
|
+
const [collapsed, setCollapsed] = useState(false)
|
|
98
|
+
<Sidebar collapsed={collapsed} width="240px" collapsedWidth="64px">
|
|
99
|
+
...
|
|
100
|
+
</Sidebar>
|
|
101
|
+
|
|
102
|
+
// Mobile — overlay mode
|
|
103
|
+
const [open, setOpen] = useState(false)
|
|
104
|
+
<Sidebar overlay collapsed={!open} onOverlayClose={() => setOpen(false)} width="280px">
|
|
105
|
+
...
|
|
106
|
+
</Sidebar>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Menu Dropdown
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
import { MenuRoot, MenuButton, MenuContent, MenuItem, MenuSeparator } from 'avt-rct-lib'
|
|
113
|
+
|
|
114
|
+
// MenuContent menggunakan createPortal — selalu di atas semua elemen
|
|
115
|
+
<MenuRoot>
|
|
116
|
+
<MenuButton className="...">Opsi</MenuButton>
|
|
117
|
+
<MenuContent align="end">
|
|
118
|
+
<MenuItem icon={<EditIcon />}>Edit</MenuItem>
|
|
119
|
+
<MenuSeparator />
|
|
120
|
+
<MenuItem icon={<TrashIcon />} variant="destructive">Hapus</MenuItem>
|
|
121
|
+
</MenuContent>
|
|
122
|
+
</MenuRoot>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Toast
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import { toast, dismissToast, Toaster } from 'avt-rct-lib'
|
|
129
|
+
|
|
130
|
+
// Di root layout
|
|
131
|
+
<Toaster position="bottom-right" />
|
|
132
|
+
|
|
133
|
+
// Panggil dari mana saja — bahkan dari luar React (API interceptor, dll)
|
|
134
|
+
toast({ title: 'Berhasil!', variant: 'success' })
|
|
135
|
+
toast({ title: 'Error', description: 'Detail...', variant: 'destructive' })
|
|
136
|
+
|
|
137
|
+
const id = toast({ title: 'Loading...', duration: Infinity })
|
|
138
|
+
dismissToast(id)
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Table
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
import { Table, TableHeader, TableBody, TableRow, TableHead,
|
|
145
|
+
TableCell, TableToolbar, TablePagination } from 'avt-rct-lib'
|
|
146
|
+
|
|
147
|
+
<Table>
|
|
148
|
+
<TableToolbar>
|
|
149
|
+
<Input leftAddon={<SearchIcon />} placeholder="Cari..." />
|
|
150
|
+
<Button size="sm">Tambah</Button>
|
|
151
|
+
</TableToolbar>
|
|
152
|
+
<TableHeader>
|
|
153
|
+
<TableRow>
|
|
154
|
+
<TableHead>Nama</TableHead>
|
|
155
|
+
<TableHead className="hidden sm:table-cell">Status</TableHead>
|
|
156
|
+
</TableRow>
|
|
157
|
+
</TableHeader>
|
|
158
|
+
<TableBody>
|
|
159
|
+
{data.map(row => (
|
|
160
|
+
<TableRow key={row.id}>
|
|
161
|
+
<TableCell>{row.name}</TableCell>
|
|
162
|
+
<TableCell className="hidden sm:table-cell">
|
|
163
|
+
<Badge variant="success" dot>Aktif</Badge>
|
|
164
|
+
</TableCell>
|
|
165
|
+
</TableRow>
|
|
166
|
+
))}
|
|
167
|
+
</TableBody>
|
|
168
|
+
<TablePagination page={page} pageCount={total}
|
|
169
|
+
canPrev={page > 1} canNext={page < total}
|
|
170
|
+
onPrev={() => setPage(p => p - 1)}
|
|
171
|
+
onNext={() => setPage(p => p + 1)} />
|
|
172
|
+
</Table>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
## Development (dari source lokal)
|
|
54
176
|
|
|
55
177
|
```js
|
|
56
|
-
// vite.config.ts — alias
|
|
178
|
+
// vite.config.ts — alias ke source langsung
|
|
57
179
|
resolve: {
|
|
58
180
|
alias: {
|
|
59
181
|
'avt-rct-lib': path.resolve(__dirname, '../avt-rct-lib/src/index.ts'),
|
|
@@ -65,7 +187,7 @@ content: [
|
|
|
65
187
|
'../avt-rct-lib/src/**/*.{ts,tsx}',
|
|
66
188
|
]
|
|
67
189
|
|
|
68
|
-
// main.tsx — import CSS
|
|
190
|
+
// main.tsx — import CSS dari source
|
|
69
191
|
import '../avt-rct-lib/src/styles/base.css'
|
|
70
192
|
```
|
|
71
193
|
|
|
@@ -73,7 +195,7 @@ import '../avt-rct-lib/src/styles/base.css'
|
|
|
73
195
|
|
|
74
196
|
```bash
|
|
75
197
|
bun run build # kompilasi ke dist/
|
|
76
|
-
npm version patch # bump versi
|
|
198
|
+
npm version patch # bump versi (1.0.0 → 1.0.1)
|
|
77
199
|
npm publish # upload ke npm registry
|
|
78
200
|
```
|
|
79
201
|
|
package/dist/index.cjs
CHANGED
|
@@ -382,6 +382,30 @@ function TablePagination({
|
|
|
382
382
|
}
|
|
383
383
|
);
|
|
384
384
|
}
|
|
385
|
+
function DataTable({
|
|
386
|
+
columns,
|
|
387
|
+
data,
|
|
388
|
+
onChange,
|
|
389
|
+
card = true,
|
|
390
|
+
emptyText = "Tidak ada data untuk ditampilkan",
|
|
391
|
+
className,
|
|
392
|
+
toolbar,
|
|
393
|
+
pagination
|
|
394
|
+
}) {
|
|
395
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Table, { card, className, children: [
|
|
396
|
+
toolbar && /* @__PURE__ */ jsxRuntime.jsx(TableToolbar, { children: toolbar }),
|
|
397
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: col.header }, String(col.accessor))) }) }),
|
|
398
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: data.length ? data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: col.cell ? col.cell(row, onChange) : String(row[col.accessor] ?? "") }, String(col.accessor))) }, rowIndex)) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
399
|
+
TableCell,
|
|
400
|
+
{
|
|
401
|
+
colSpan: columns.length,
|
|
402
|
+
className: "py-10 text-center text-[#8E8E93]",
|
|
403
|
+
children: emptyText
|
|
404
|
+
}
|
|
405
|
+
) }) }),
|
|
406
|
+
pagination && /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination })
|
|
407
|
+
] });
|
|
408
|
+
}
|
|
385
409
|
var TabsContext = React3.createContext({
|
|
386
410
|
active: "",
|
|
387
411
|
setActive: () => {
|
|
@@ -1278,6 +1302,7 @@ exports.CardDivider = CardDivider;
|
|
|
1278
1302
|
exports.CardFooter = CardFooter;
|
|
1279
1303
|
exports.CardHeader = CardHeader;
|
|
1280
1304
|
exports.CardTitle = CardTitle;
|
|
1305
|
+
exports.DataTable = DataTable;
|
|
1281
1306
|
exports.Drawer = Drawer;
|
|
1282
1307
|
exports.Input = Input;
|
|
1283
1308
|
exports.Menu = MenuRoot;
|
package/dist/index.d.cts
CHANGED
|
@@ -74,6 +74,31 @@ declare function TablePagination({ page, pageCount, canPrev, canNext, onPrev, on
|
|
|
74
74
|
className?: string;
|
|
75
75
|
}): react_jsx_runtime.JSX.Element;
|
|
76
76
|
|
|
77
|
+
interface DataTableColumn<T = any> {
|
|
78
|
+
header: string;
|
|
79
|
+
accessor: keyof T | (string & {});
|
|
80
|
+
cell?: (row: T, onChange?: () => void) => React.ReactNode;
|
|
81
|
+
}
|
|
82
|
+
interface DataTablePaginationProps {
|
|
83
|
+
page: number;
|
|
84
|
+
pageCount: number;
|
|
85
|
+
canPrev: boolean;
|
|
86
|
+
canNext: boolean;
|
|
87
|
+
onPrev: () => void;
|
|
88
|
+
onNext: () => void;
|
|
89
|
+
}
|
|
90
|
+
interface DataTableProps<T = any> {
|
|
91
|
+
columns: DataTableColumn<T>[];
|
|
92
|
+
data: T[];
|
|
93
|
+
onChange?: () => void;
|
|
94
|
+
card?: boolean;
|
|
95
|
+
emptyText?: string;
|
|
96
|
+
className?: string;
|
|
97
|
+
toolbar?: React.ReactNode;
|
|
98
|
+
pagination?: DataTablePaginationProps;
|
|
99
|
+
}
|
|
100
|
+
declare function DataTable<T = any>({ columns, data, onChange, card, emptyText, className, toolbar, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
101
|
+
|
|
77
102
|
interface TabsProps {
|
|
78
103
|
defaultValue?: string;
|
|
79
104
|
value?: string;
|
|
@@ -295,4 +320,4 @@ declare const colors: {
|
|
|
295
320
|
};
|
|
296
321
|
declare function generateId(): string;
|
|
297
322
|
|
|
298
|
-
export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
|
|
323
|
+
export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, DataTable, type DataTableColumn, type DataTablePaginationProps, type DataTableProps, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
|
package/dist/index.d.ts
CHANGED
|
@@ -74,6 +74,31 @@ declare function TablePagination({ page, pageCount, canPrev, canNext, onPrev, on
|
|
|
74
74
|
className?: string;
|
|
75
75
|
}): react_jsx_runtime.JSX.Element;
|
|
76
76
|
|
|
77
|
+
interface DataTableColumn<T = any> {
|
|
78
|
+
header: string;
|
|
79
|
+
accessor: keyof T | (string & {});
|
|
80
|
+
cell?: (row: T, onChange?: () => void) => React.ReactNode;
|
|
81
|
+
}
|
|
82
|
+
interface DataTablePaginationProps {
|
|
83
|
+
page: number;
|
|
84
|
+
pageCount: number;
|
|
85
|
+
canPrev: boolean;
|
|
86
|
+
canNext: boolean;
|
|
87
|
+
onPrev: () => void;
|
|
88
|
+
onNext: () => void;
|
|
89
|
+
}
|
|
90
|
+
interface DataTableProps<T = any> {
|
|
91
|
+
columns: DataTableColumn<T>[];
|
|
92
|
+
data: T[];
|
|
93
|
+
onChange?: () => void;
|
|
94
|
+
card?: boolean;
|
|
95
|
+
emptyText?: string;
|
|
96
|
+
className?: string;
|
|
97
|
+
toolbar?: React.ReactNode;
|
|
98
|
+
pagination?: DataTablePaginationProps;
|
|
99
|
+
}
|
|
100
|
+
declare function DataTable<T = any>({ columns, data, onChange, card, emptyText, className, toolbar, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
101
|
+
|
|
77
102
|
interface TabsProps {
|
|
78
103
|
defaultValue?: string;
|
|
79
104
|
value?: string;
|
|
@@ -295,4 +320,4 @@ declare const colors: {
|
|
|
295
320
|
};
|
|
296
321
|
declare function generateId(): string;
|
|
297
322
|
|
|
298
|
-
export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
|
|
323
|
+
export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, DataTable, type DataTableColumn, type DataTablePaginationProps, type DataTableProps, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
|
package/dist/index.js
CHANGED
|
@@ -376,6 +376,30 @@ function TablePagination({
|
|
|
376
376
|
}
|
|
377
377
|
);
|
|
378
378
|
}
|
|
379
|
+
function DataTable({
|
|
380
|
+
columns,
|
|
381
|
+
data,
|
|
382
|
+
onChange,
|
|
383
|
+
card = true,
|
|
384
|
+
emptyText = "Tidak ada data untuk ditampilkan",
|
|
385
|
+
className,
|
|
386
|
+
toolbar,
|
|
387
|
+
pagination
|
|
388
|
+
}) {
|
|
389
|
+
return /* @__PURE__ */ jsxs(Table, { card, className, children: [
|
|
390
|
+
toolbar && /* @__PURE__ */ jsx(TableToolbar, { children: toolbar }),
|
|
391
|
+
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { children: col.header }, String(col.accessor))) }) }),
|
|
392
|
+
/* @__PURE__ */ jsx(TableBody, { children: data.length ? data.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { children: col.cell ? col.cell(row, onChange) : String(row[col.accessor] ?? "") }, String(col.accessor))) }, rowIndex)) : /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
|
|
393
|
+
TableCell,
|
|
394
|
+
{
|
|
395
|
+
colSpan: columns.length,
|
|
396
|
+
className: "py-10 text-center text-[#8E8E93]",
|
|
397
|
+
children: emptyText
|
|
398
|
+
}
|
|
399
|
+
) }) }),
|
|
400
|
+
pagination && /* @__PURE__ */ jsx(TablePagination, { ...pagination })
|
|
401
|
+
] });
|
|
402
|
+
}
|
|
379
403
|
var TabsContext = createContext({
|
|
380
404
|
active: "",
|
|
381
405
|
setActive: () => {
|
|
@@ -1263,4 +1287,4 @@ function useClickOutside(ref, handler, enabled = true) {
|
|
|
1263
1287
|
}, [ref, handler, enabled]);
|
|
1264
1288
|
}
|
|
1265
1289
|
|
|
1266
|
-
export { Badge, Button, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardTitle, Drawer, Input, MenuRoot as Menu, MenuButton, MenuContent, MenuRoot as MenuDropdown, MenuItem, MenuLabel, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, NavbarCenter, NavbarDivider, NavbarIconButton, NavbarLeft, NavbarRight, NavbarSearch, Scrollbar, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarBrand, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarToggle, SidebarUser, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
|
|
1290
|
+
export { Badge, Button, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardTitle, DataTable, Drawer, Input, MenuRoot as Menu, MenuButton, MenuContent, MenuRoot as MenuDropdown, MenuItem, MenuLabel, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, NavbarCenter, NavbarDivider, NavbarIconButton, NavbarLeft, NavbarRight, NavbarSearch, Scrollbar, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarBrand, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarToggle, SidebarUser, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "avt-rct-lib",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "AVT React Component Library — Tailwind only, zero other deps",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./dist/index.
|
|
7
|
-
"module": "./dist/index.
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"import": {
|
|
12
|
-
"types": "./dist/index.d.mts",
|
|
13
|
-
"default": "./dist/index.mjs"
|
|
14
|
-
},
|
|
15
|
-
"require": {
|
|
16
12
|
"types": "./dist/index.d.ts",
|
|
17
13
|
"default": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"require": {
|
|
16
|
+
"types": "./dist/index.d.cts",
|
|
17
|
+
"default": "./dist/index.cjs"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"./styles": "./src/styles/base.css"
|