@prediktif/ui 0.1.19 → 0.1.21

package/README.md

@@ -139,7 +139,7 @@ Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ### 2. Adding a New Composed Component
 
-1. Create your component in `src/components/composed/my-component.tsx`:
+1. **Create the component** in `src/components/composed/my-component.tsx`:
    ```tsx
    export interface MyComponentProps {
      label: string;
@@ -149,12 +149,30 @@ Open [http://localhost:3000](http://localhost:3000) in your browser.
      return <div className="p-4 rounded-md border">{label}</div>;
    }
    ```
-2. Export the component in `src/components/composed/index.ts`:
+
+2. **Export the component** in `src/components/composed/index.ts`:
    ```ts
    export * from "./header-title";
    export * from "./my-component";
    ```
-3. (Optional) Create a documentation page in `src/app/(docs)/components/my-component/page.tsx` for visual testing.
+
+3. **Register in navigation** (`src/lib/docs-config.ts`):
+   ```ts
+   {
+     title: "Components",
+     url: "/components",
+     items: [
+       // ...
+       { title: "My Component", url: "/components/my-component" },
+     ]
+   }
+   ```
+
+4. **Create the documentation detail page** in `src/app/(docs)/components/my-component/page.tsx`:
+   - Include `<ComponentHeader>`, `<ComponentSection title="Preview">`, `<ComponentCodeExample>`, `<ComponentPropsTable>`, and `<ComponentPagination />`.
+
+5. **Add a preview card** to `src/app/(docs)/components/page.tsx`:
+   - Add `<Card>` with `<CardHeader>`, `<CardTitle>`, `<CardDescription className="truncate">`, and `<CardContent className="max-h-32 overflow-y-scroll">` wrapping `<ComponentPreview>`.
 
 ---
 

package/dist/index.d.mts

@@ -41,12 +41,6 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
-
 /**
  * Configure TanStack Table features used by DataTable.
  * Enables column/global filtering, visibility toggling, pagination, row selection, and sorting.
@@ -131,16 +125,19 @@ declare function exportToXLSX(rows: ExportRow[], filename?: string): void;
  */
 declare function exportToCSV(rows: ExportRow[], filename?: string): void;
 /**
- * Print or export as PDF by opening a styled print window.
+ * Directly generate and download a PDF file of the table data using jsPDF and jspdf-autotable.
+ */
+declare function exportToPDF(headers: string[], rows: string[][], filename?: string, title?: string): Promise<void>;
+/**
+ * Print table by opening a styled print popup window.
  */
 declare function printTable(headers: string[], rows: string[][], title?: string): void;
 
 interface DataTableContentBodyProps<TData extends RowData> {
     table: Table<DataTableFeatures, TData>;
     columns: ColumnDef<DataTableFeatures, TData>[];
-    isLoading?: boolean;
 }
-declare function DataTableContentBody<TData extends RowData>({ table, columns, isLoading, }: DataTableContentBodyProps<TData>): react.JSX.Element;
+declare function DataTableContentBody<TData extends RowData>({ table, columns, }: DataTableContentBodyProps<TData>): react.JSX.Element;
 
 interface DataTableContentHeaderProps<TData extends RowData> {
     table: Table<DataTableFeatures, TData>;
@@ -224,17 +221,13 @@ interface DataTableHeaderFilterProps<TData extends RowData> {
 declare function smartFilterFn<TData extends RowData>(row: Row<DataTableFeatures, TData>, columnId: string, filterValue: unknown): boolean;
 declare function DataTableHeaderFilter<TData extends RowData>({ table, columnFilters, }: DataTableHeaderFilterProps<TData>): react.JSX.Element | null;
 
-interface DataTableHeaderRefreshProps {
-    onRefresh?: () => void;
-}
-declare function DataTableHeaderRefresh({ onRefresh, }: DataTableHeaderRefreshProps): react.JSX.Element;
+declare function DataTableHeaderRefresh(): react.JSX.Element;
 
 interface DataTableHeaderSearchProps {
-    value: string;
+    value?: string;
     onChange: (value: string) => void;
-    placeholder?: string;
 }
-declare function DataTableHeaderSearch({ value, onChange, placeholder, }: DataTableHeaderSearchProps): react.JSX.Element;
+declare function DataTableHeaderSearch({ value, onChange, }: DataTableHeaderSearchProps): react.JSX.Element;
 
 interface DataTableHeaderSortProps<TData extends RowData> {
     table: Table<DataTableFeatures, TData>;
@@ -258,16 +251,10 @@ interface DataTableProps<TData extends RowData> {
     renderCreateDialog?: (open: boolean, onOpenChange: (open: boolean) => void) => ReactNode;
     /** Label text for the add button (defaults to "Add") */
     addLabel?: string;
-    /** Callback triggered when user clicks the refresh button */
-    onRefresh?: () => void;
     /** Callback triggered when user downloads data */
     onDownload?: () => void;
     /** Base filename used when exporting data (defaults to "data-export") */
     exportFilename?: string;
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Placeholder text for search bar (defaults to "Search...") */
-    searchPlaceholder?: string;
     /** Toggle visibility of search input (default: true) */
     showSearchInput?: boolean;
     /** Toggle visibility of refresh button (default: true) */
@@ -282,31 +269,15 @@ interface DataTableProps<TData extends RowData> {
     showColumnToggleButton?: boolean;
     /** Toggle visibility of add/create button (default: true) */
     showAddButton?: boolean;
-    /** Custom icon for empty state */
-    emptyIcon?: React.ComponentType<{
-        className?: string;
-    }> | ReactNode;
-    /** Custom title for empty state */
-    emptyTitle?: ReactNode;
-    /** Custom description for empty state */
-    emptyDescription?: ReactNode;
-    /** Custom button text for empty state action */
-    emptyButtonText?: string;
-    /** Custom render prop for empty state action button */
-    emptyRender?: ComponentProps<typeof Button>["render"];
-    /** Callback for empty state action button click */
-    onEmptyAction?: () => void;
-    /** Custom render function to completely override the empty state */
-    renderEmptyState?: () => ReactNode;
 }
 /**
  * Universal Data Table component built with TanStack Table and Shadcn UI.
  * Provides out-of-the-box features: global search, smart multi-type column filtering,
  * column sorting, column visibility toggle, data export (PDF, Excel, CSV, Print),
  * data refresh, pagination, row actions, add/create modal dialog binding,
- * loading skeletons, and integrated empty states via StateEmpty.
+ * and standard hardcoded global empty state via StateEmpty.
  */
-declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onRefresh, onDownload, exportFilename, isLoading, searchPlaceholder, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, emptyIcon, emptyTitle, emptyDescription, emptyButtonText, emptyRender, onEmptyAction, renderEmptyState, }: DataTableProps<TData>): react.JSX.Element;
+declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onDownload, exportFilename, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, }: DataTableProps<TData>): react.JSX.Element;
 
 interface HeaderTabItem {
     title: string;
@@ -331,6 +302,12 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
+
 interface StateEmptyProps {
     icon: React.ComponentType<{
         className?: string;
@@ -339,8 +316,9 @@ interface StateEmptyProps {
     description: ReactNode;
     buttonText?: string;
     onClick?: () => void;
-    render?: ComponentProps<typeof Button>["render"];
+    render?: (() => void) | ComponentProps<typeof Button>["render"];
+    state?: "default" | "outline";
 }
 declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
 
-export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, type DataTableHeaderRefreshProps, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };
+export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };

package/dist/index.d.ts

@@ -41,12 +41,6 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
-
 /**
  * Configure TanStack Table features used by DataTable.
  * Enables column/global filtering, visibility toggling, pagination, row selection, and sorting.
@@ -131,16 +125,19 @@ declare function exportToXLSX(rows: ExportRow[], filename?: string): void;
  */
 declare function exportToCSV(rows: ExportRow[], filename?: string): void;
 /**
- * Print or export as PDF by opening a styled print window.
+ * Directly generate and download a PDF file of the table data using jsPDF and jspdf-autotable.
+ */
+declare function exportToPDF(headers: string[], rows: string[][], filename?: string, title?: string): Promise<void>;
+/**
+ * Print table by opening a styled print popup window.
  */
 declare function printTable(headers: string[], rows: string[][], title?: string): void;
 
 interface DataTableContentBodyProps<TData extends RowData> {
     table: Table<DataTableFeatures, TData>;
     columns: ColumnDef<DataTableFeatures, TData>[];
-    isLoading?: boolean;
 }
-declare function DataTableContentBody<TData extends RowData>({ table, columns, isLoading, }: DataTableContentBodyProps<TData>): react.JSX.Element;
+declare function DataTableContentBody<TData extends RowData>({ table, columns, }: DataTableContentBodyProps<TData>): react.JSX.Element;
 
 interface DataTableContentHeaderProps<TData extends RowData> {
     table: Table<DataTableFeatures, TData>;
@@ -224,17 +221,13 @@ interface DataTableHeaderFilterProps<TData extends RowData> {
 declare function smartFilterFn<TData extends RowData>(row: Row<DataTableFeatures, TData>, columnId: string, filterValue: unknown): boolean;
 declare function DataTableHeaderFilter<TData extends RowData>({ table, columnFilters, }: DataTableHeaderFilterProps<TData>): react.JSX.Element | null;
 
-interface DataTableHeaderRefreshProps {
-    onRefresh?: () => void;
-}
-declare function DataTableHeaderRefresh({ onRefresh, }: DataTableHeaderRefreshProps): react.JSX.Element;
+declare function DataTableHeaderRefresh(): react.JSX.Element;
 
 interface DataTableHeaderSearchProps {
-    value: string;
+    value?: string;
     onChange: (value: string) => void;
-    placeholder?: string;
 }
-declare function DataTableHeaderSearch({ value, onChange, placeholder, }: DataTableHeaderSearchProps): react.JSX.Element;
+declare function DataTableHeaderSearch({ value, onChange, }: DataTableHeaderSearchProps): react.JSX.Element;
 
 interface DataTableHeaderSortProps<TData extends RowData> {
     table: Table<DataTableFeatures, TData>;
@@ -258,16 +251,10 @@ interface DataTableProps<TData extends RowData> {
     renderCreateDialog?: (open: boolean, onOpenChange: (open: boolean) => void) => ReactNode;
     /** Label text for the add button (defaults to "Add") */
     addLabel?: string;
-    /** Callback triggered when user clicks the refresh button */
-    onRefresh?: () => void;
     /** Callback triggered when user downloads data */
     onDownload?: () => void;
     /** Base filename used when exporting data (defaults to "data-export") */
     exportFilename?: string;
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Placeholder text for search bar (defaults to "Search...") */
-    searchPlaceholder?: string;
     /** Toggle visibility of search input (default: true) */
     showSearchInput?: boolean;
     /** Toggle visibility of refresh button (default: true) */
@@ -282,31 +269,15 @@ interface DataTableProps<TData extends RowData> {
     showColumnToggleButton?: boolean;
     /** Toggle visibility of add/create button (default: true) */
     showAddButton?: boolean;
-    /** Custom icon for empty state */
-    emptyIcon?: React.ComponentType<{
-        className?: string;
-    }> | ReactNode;
-    /** Custom title for empty state */
-    emptyTitle?: ReactNode;
-    /** Custom description for empty state */
-    emptyDescription?: ReactNode;
-    /** Custom button text for empty state action */
-    emptyButtonText?: string;
-    /** Custom render prop for empty state action button */
-    emptyRender?: ComponentProps<typeof Button>["render"];
-    /** Callback for empty state action button click */
-    onEmptyAction?: () => void;
-    /** Custom render function to completely override the empty state */
-    renderEmptyState?: () => ReactNode;
 }
 /**
  * Universal Data Table component built with TanStack Table and Shadcn UI.
  * Provides out-of-the-box features: global search, smart multi-type column filtering,
  * column sorting, column visibility toggle, data export (PDF, Excel, CSV, Print),
  * data refresh, pagination, row actions, add/create modal dialog binding,
- * loading skeletons, and integrated empty states via StateEmpty.
+ * and standard hardcoded global empty state via StateEmpty.
  */
-declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onRefresh, onDownload, exportFilename, isLoading, searchPlaceholder, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, emptyIcon, emptyTitle, emptyDescription, emptyButtonText, emptyRender, onEmptyAction, renderEmptyState, }: DataTableProps<TData>): react.JSX.Element;
+declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onDownload, exportFilename, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, }: DataTableProps<TData>): react.JSX.Element;
 
 interface HeaderTabItem {
     title: string;
@@ -331,6 +302,12 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
+
 interface StateEmptyProps {
     icon: React.ComponentType<{
         className?: string;
@@ -339,8 +316,9 @@ interface StateEmptyProps {
     description: ReactNode;
     buttonText?: string;
     onClick?: () => void;
-    render?: ComponentProps<typeof Button>["render"];
+    render?: (() => void) | ComponentProps<typeof Button>["render"];
+    state?: "default" | "outline";
 }
 declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
 
-export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, type DataTableHeaderRefreshProps, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };
+export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };