avt-rct-lib 1.0.1 → 1.0.2

package/README.md

@@ -6,7 +6,7 @@
 
 React component library dengan desain **macOS/iOS**. Hanya butuh **Tailwind CSS** — tanpa Radix UI, tanpa library komponen lain.
 
-📦 [npmjs.com/package/avt-rct-lib](https://www.npmjs.com/package/avt-rct-lib)
+📦 [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)
 
 ## Install
 

package/dist/index.cjs

@@ -382,6 +382,30 @@ function TablePagination({
     }
   );
 }
+function DataTable({
+  columns,
+  data,
+  onChange,
+  card = true,
+  emptyText = "Tidak ada data untuk ditampilkan",
+  className,
+  toolbar,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Table, { card, className, children: [
+    toolbar && /* @__PURE__ */ jsxRuntime.jsx(TableToolbar, { children: toolbar }),
+    /* @__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))) }) }),
+    /* @__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(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: "py-10 text-center text-[#8E8E93]",
+        children: emptyText
+      }
+    ) }) }),
+    pagination && /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination })
+  ] });
+}
 var TabsContext = React3.createContext({
   active: "",
   setActive: () => {
@@ -1278,6 +1302,7 @@ exports.CardDivider = CardDivider;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
+exports.DataTable = DataTable;
 exports.Drawer = Drawer;
 exports.Input = Input;
 exports.Menu = MenuRoot;

package/dist/index.d.cts

@@ -74,6 +74,31 @@ declare function TablePagination({ page, pageCount, canPrev, canNext, onPrev, on
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface DataTableColumn<T = any> {
+    header: string;
+    accessor: keyof T | (string & {});
+    cell?: (row: T, onChange?: () => void) => React.ReactNode;
+}
+interface DataTablePaginationProps {
+    page: number;
+    pageCount: number;
+    canPrev: boolean;
+    canNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+}
+interface DataTableProps<T = any> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    onChange?: () => void;
+    card?: boolean;
+    emptyText?: string;
+    className?: string;
+    toolbar?: React.ReactNode;
+    pagination?: DataTablePaginationProps;
+}
+declare function DataTable<T = any>({ columns, data, onChange, card, emptyText, className, toolbar, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
 interface TabsProps {
     defaultValue?: string;
     value?: string;
@@ -295,4 +320,4 @@ declare const colors: {
 };
 declare function generateId(): string;
 
-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 };
+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

@@ -74,6 +74,31 @@ declare function TablePagination({ page, pageCount, canPrev, canNext, onPrev, on
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface DataTableColumn<T = any> {
+    header: string;
+    accessor: keyof T | (string & {});
+    cell?: (row: T, onChange?: () => void) => React.ReactNode;
+}
+interface DataTablePaginationProps {
+    page: number;
+    pageCount: number;
+    canPrev: boolean;
+    canNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+}
+interface DataTableProps<T = any> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    onChange?: () => void;
+    card?: boolean;
+    emptyText?: string;
+    className?: string;
+    toolbar?: React.ReactNode;
+    pagination?: DataTablePaginationProps;
+}
+declare function DataTable<T = any>({ columns, data, onChange, card, emptyText, className, toolbar, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
 interface TabsProps {
     defaultValue?: string;
     value?: string;
@@ -295,4 +320,4 @@ declare const colors: {
 };
 declare function generateId(): string;
 
-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 };
+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

@@ -376,6 +376,30 @@ function TablePagination({
     }
   );
 }
+function DataTable({
+  columns,
+  data,
+  onChange,
+  card = true,
+  emptyText = "Tidak ada data untuk ditampilkan",
+  className,
+  toolbar,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxs(Table, { card, className, children: [
+    toolbar && /* @__PURE__ */ jsx(TableToolbar, { children: toolbar }),
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { children: col.header }, String(col.accessor))) }) }),
+    /* @__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(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: "py-10 text-center text-[#8E8E93]",
+        children: emptyText
+      }
+    ) }) }),
+    pagination && /* @__PURE__ */ jsx(TablePagination, { ...pagination })
+  ] });
+}
 var TabsContext = createContext({
   active: "",
   setActive: () => {
@@ -1263,4 +1287,4 @@ function useClickOutside(ref, handler, enabled = true) {
   }, [ref, handler, enabled]);
 }
 
-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 };
+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

@@ -1,6 +1,6 @@
 {
   "name": "avt-rct-lib",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "AVT React Component Library — Tailwind only, zero other deps",
   "type": "module",
   "main": "./dist/index.cjs",