@manusiakemos/laravel-tanstack-react 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,4 +1,10 @@
-import { ColumnDef, SortingState, ColumnFiltersState, Table, PaginationState } from '@tanstack/react-table';
+import { ColumnDef, SortingState, ColumnFiltersState, Table as Table$1, Column, PaginationState } from '@tanstack/react-table';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, SelectHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
 
 /**
  * Response shape from a `manusiakemos/laravel-tanstack` backend endpoint.
@@ -69,7 +75,7 @@ interface UseDataTableOptions<TData> {
     manual?: boolean;
 }
 interface UseDataTableResult<TData> {
-    table: Table<TData>;
+    table: Table$1<TData>;
     data: TData[];
     meta: DataTableMeta | null;
     loading: boolean;
@@ -85,13 +91,367 @@ interface UseDataTableResult<TData> {
  * const { table, loading } = useDataTable<User>({
  *   endpoint: '/datatable/users',
  *   columns: [
- *     { accessorKey: 'name', header: 'Nama' },
+ *     { accessorKey: 'name', header: 'Name' },
  *     { accessorKey: 'email', header: 'Email' },
  *   ],
  * })
  */
 declare function useDataTable<TData>(options: UseDataTableOptions<TData>): UseDataTableResult<TData>;
 
+interface DataTableClassNames {
+    root?: string;
+    table?: string;
+    header?: string;
+    headerRow?: string;
+    head?: string;
+    body?: string;
+    row?: string;
+    cell?: string;
+    empty?: string;
+    loading?: string;
+}
+interface DataTableProps<TData> {
+    table: Table$1<TData>;
+    /** Loading flag from `useDataTable`. */
+    loading?: boolean;
+    /** Slot rendered inside the empty <tbody> when there are no rows. */
+    emptyMessage?: ReactNode;
+    /** Slot rendered inside the loading <tbody>. */
+    loadingMessage?: ReactNode;
+    /** Class for the outer wrapper. */
+    className?: string;
+    /** Fine-grained class names for table parts. */
+    classNames?: DataTableClassNames;
+    /** Called when a row is clicked. */
+    onRowClick?: (row: TData) => void;
+}
+/**
+ * Shadcn-styled table component wired to a TanStack `Table` instance.
+ * Renders header (with sort indicators), body, empty state, and loading state.
+ *
+ * @example
+ * const { table, loading } = useDataTable<User>({ ... })
+ * <DataTable table={table} loading={loading} />
+ */
+declare function DataTable<TData>(props: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface DataTableSearchRenderProps {
+    /** Current uncommitted input value (pre-debounce / pre-submit). */
+    value: string;
+    /** Update the input value (debounced commit if `debounce` is on). */
+    setValue: (next: string) => void;
+    /** Immediately commit the current value to the table's global filter. */
+    submit: () => void;
+    /** The value currently applied to the table's global filter. */
+    appliedValue: string;
+}
+type DataTableSearchDebounce = boolean | number;
+interface DataTableSearchProps<TData> {
+    table: Table$1<TData>;
+    /**
+     * Debounce behavior:
+     *   - `true`  → debounced with default delay (300ms)
+     *   - number  → debounced with the given delay in ms
+     *   - `false` → no debounce; instead the component renders a Search button
+     *               and only commits to the table on submit (button click / Enter)
+     *
+     * Defaults to `true`.
+     */
+    debounce?: DataTableSearchDebounce;
+    /** Placeholder text for the default input. */
+    placeholder?: string;
+    /** Label for the search submit button (when `debounce` is `false`). */
+    submitLabel?: ReactNode;
+    /** Class for the root wrapper element (ignored when `render` is provided). */
+    className?: string;
+    /** Class merged into the underlying shadcn Input. */
+    inputClassName?: string;
+    /** Class merged into the submit Button (when `debounce` is `false`). */
+    buttonClassName?: string;
+    /** Extra props spread onto the underlying Input. */
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'className'>;
+    /** Fired whenever the search value is committed to the table. */
+    onSearch?: (value: string) => void;
+    /**
+     * Full render override. Receives the controlled value, setter, and a manual
+     * `submit()` so you can drop in any custom UI.
+     */
+    render?: (props: DataTableSearchRenderProps) => ReactNode;
+}
+/**
+ * Debounced (or manual-submit) global search wired to a TanStack `Table`.
+ *
+ * @example Debounced (default)
+ * <DataTableSearch table={table} placeholder="Search users..." />
+ *
+ * @example Manual submit (search button)
+ * <DataTableSearch table={table} debounce={false} placeholder="Search..." />
+ *
+ * @example Custom UI
+ * <DataTableSearch
+ *   table={table}
+ *   render={({ value, setValue, submit }) => (
+ *     <MyCombobox value={value} onChange={setValue} onSubmit={submit} />
+ *   )}
+ * />
+ */
+declare function DataTableSearch<TData>(props: DataTableSearchProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface DataTablePaginationLabels {
+    previous?: ReactNode;
+    next?: ReactNode;
+    first?: ReactNode;
+    last?: ReactNode;
+    page?: string;
+    of?: string;
+    rowsPerPage?: string;
+    /** Renderer for the row-count summary. */
+    summary?: (info: {
+        pageIndex: number;
+        pageCount: number;
+        pageSize: number;
+        filtered: number;
+        total: number | null;
+    }) => ReactNode;
+}
+interface DataTablePaginationClassNames {
+    root?: string;
+    info?: string;
+    controls?: string;
+    button?: string;
+    select?: string;
+    pageSize?: string;
+}
+interface DataTablePaginationRenderProps<TData> {
+    table: Table$1<TData>;
+    meta: DataTableMeta | null;
+    pageIndex: number;
+    pageCount: number;
+    pageSize: number;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    goToFirst: () => void;
+    goToPrevious: () => void;
+    goToNext: () => void;
+    goToLast: () => void;
+    setPageSize: (size: number) => void;
+}
+interface DataTablePaginationProps<TData> {
+    table: Table$1<TData>;
+    /** Meta from `useDataTable`. Used for the row-count summary. */
+    meta?: DataTableMeta | null;
+    /** Show the page-size selector. Defaults to false. */
+    showPageSize?: boolean;
+    /** Available page size options when `showPageSize` is true. */
+    pageSizeOptions?: number[];
+    /** Show first/last page buttons. Defaults to false. */
+    showFirstLast?: boolean;
+    /** Hide the "Page X of Y · N rows" summary. */
+    hideSummary?: boolean;
+    /** Override individual labels / the summary renderer. */
+    labels?: DataTablePaginationLabels;
+    /** Class for the root container. */
+    className?: string;
+    /** Fine-grained class names for sub-elements. */
+    classNames?: DataTablePaginationClassNames;
+    /** Extra props for the prev/next/first/last buttons. */
+    buttonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className' | 'type'>;
+    /** Extra props for the page-size <select>. */
+    selectProps?: Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange' | 'className'>;
+    /**
+     * Full render override. Receives the pagination API so any custom UI can
+     * still drive the table.
+     */
+    render?: (props: DataTablePaginationRenderProps<TData>) => ReactNode;
+}
+/**
+ * Shadcn-styled pagination controls (prev/next, optional first/last, optional
+ * page-size selector, row-count summary) wired to a TanStack `Table`.
+ */
+declare function DataTablePagination<TData>(props: DataTablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
+
+type DataTableFilterValue = string | string[] | undefined;
+interface DataTableFilterOption {
+    label: string;
+    value: string;
+}
+interface DataTableFilterRenderProps<TData> {
+    /** The current filter value for this column. */
+    value: DataTableFilterValue;
+    /** Commit a new filter value (use `undefined` or `''` to clear). */
+    setValue: (next: DataTableFilterValue) => void;
+    /** The TanStack column instance. */
+    column: Column<TData, unknown>;
+    /** The parent table instance. */
+    table: Table$1<TData>;
+}
+interface BaseFilterProps<TData> {
+    table: Table$1<TData>;
+    /** The column id this filter applies to. */
+    columnId: string;
+    /** Class for the root element (when not using `render`). */
+    className?: string;
+    /**
+     * Full render override. You get the raw column filter value + setter, so
+     * any UI (popover, multi-select combobox, date picker, …) can be plugged
+     * in while still feeding the same TanStack column filter pipeline.
+     */
+    render?: (props: DataTableFilterRenderProps<TData>) => ReactNode;
+}
+interface SelectFilterProps<TData> extends BaseFilterProps<TData> {
+    type?: 'select';
+    options: DataTableFilterOption[];
+    /** Placeholder option label (renders an empty value option). */
+    placeholder?: string;
+    /** Whether to render the empty/placeholder option. Defaults to true. */
+    includeEmptyOption?: boolean;
+    selectProps?: Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange' | 'className'>;
+}
+interface MultiSelectFilterProps<TData> extends BaseFilterProps<TData> {
+    type: 'multiselect';
+    options: DataTableFilterOption[];
+    selectProps?: Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange' | 'multiple' | 'className'>;
+}
+interface InputFilterProps<TData> extends BaseFilterProps<TData> {
+    type: 'input';
+    placeholder?: string;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'className'>;
+}
+interface CustomFilterProps<TData> extends BaseFilterProps<TData> {
+    type?: 'custom';
+    /** Required when `type` is `"custom"` (or when no `options` given). */
+    render: (props: DataTableFilterRenderProps<TData>) => ReactNode;
+}
+type DataTableFilterProps<TData> = SelectFilterProps<TData> | MultiSelectFilterProps<TData> | InputFilterProps<TData> | CustomFilterProps<TData>;
+/**
+ * Shadcn-styled per-column filter wired to a TanStack `Table`.
+ *
+ * Supports four modes:
+ *   - `type="select"` — single-select (default when `options` given)
+ *   - `type="multiselect"` — multi-select
+ *   - `type="input"` — text input
+ *   - `type="custom"` (or `render`) — fully custom UI
+ *
+ * @example Select
+ * <DataTableFilter
+ *   table={table}
+ *   columnId="status"
+ *   options={[
+ *     { label: 'Active', value: 'active' },
+ *     { label: 'Inactive', value: 'inactive' },
+ *   ]}
+ *   placeholder="All statuses"
+ * />
+ *
+ * @example Custom render
+ * <DataTableFilter
+ *   table={table}
+ *   columnId="status"
+ *   render={({ value, setValue }) => (
+ *     <MyCustomFilter value={value} onChange={setValue} />
+ *   )}
+ * />
+ */
+declare function DataTableFilter<TData>(props: DataTableFilterProps<TData>): react_jsx_runtime.JSX.Element | null;
+
+interface DataTableSplitLayoutClassNames {
+    root?: string;
+    toolbar?: string;
+    toolbarLeft?: string;
+    toolbarRight?: string;
+    body?: string;
+    footer?: string;
+}
+interface DataTableSplitLayoutProps<TData> {
+    table: Table$1<TData>;
+    meta?: DataTableMeta | null;
+    loading?: boolean;
+    /**
+     * Right-side toolbar slot — typically one or more `<DataTableFilter />`s.
+     * Rendered to the right of the search input on the same row.
+     */
+    filters?: ReactNode;
+    /**
+     * Optional far-right toolbar slot for page-level actions (e.g. an
+     * "+ Add" button). Appears after `filters`.
+     */
+    actions?: ReactNode;
+    /**
+     * Override the entire search slot. By default, a `<DataTableSearch />`
+     * wired to `table` is rendered with sensible defaults.
+     */
+    search?: ReactNode;
+    /** Forwarded to the auto-rendered `<DataTableSearch />`. */
+    searchProps?: Omit<DataTableSearchProps<TData>, 'table'>;
+    /** Forwarded to the auto-rendered `<DataTable />`. */
+    tableProps?: Omit<DataTableProps<TData>, 'table' | 'loading'>;
+    /** Forwarded to the auto-rendered `<DataTablePagination />`. */
+    paginationProps?: Omit<DataTablePaginationProps<TData>, 'table' | 'meta'>;
+    className?: string;
+    classNames?: DataTableSplitLayoutClassNames;
+}
+/**
+ * Pre-built "split toolbar" layout: search on the left, filters/actions on
+ * the right; pagination info on the left, controls on the right.
+ *
+ * @example
+ * <DataTableSplitLayout
+ *   table={table}
+ *   meta={meta}
+ *   loading={loading}
+ *   searchProps={{ placeholder: 'Search users...' }}
+ *   filters={
+ *     <>
+ *       <DataTableFilter table={table} columnId="status" options={statusOpts} />
+ *       <DataTableFilter table={table} columnId="role" type="multiselect" options={roleOpts} />
+ *     </>
+ *   }
+ *   actions={<Button>+ Add user</Button>}
+ *   paginationProps={{ showPageSize: true, showFirstLast: true }}
+ * />
+ */
+declare function DataTableSplitLayout<TData>(props: DataTableSplitLayoutProps<TData>): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+/**
+ * Shadcn-styled native <select>. We use the native element (not Radix) to
+ * keep the dependency footprint minimal; consumers who want a Radix-based
+ * popover select can swap it in via the `render` prop on the parent
+ * component.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+/**
+ * Shadcn-style Table primitives. These mirror the components produced by
+ * `shadcn add table` so users get identical visual output to a hand-rolled
+ * shadcn table in their app.
+ */
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
+
+/**
+ * Tailwind-aware className combinator (shadcn convention).
+ * Resolves conflicting Tailwind utilities so later inputs win.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
 /**
  * Build a query string from TanStack Table state, matching the protocol
  * expected by `manusiakemos/laravel-tanstack`:
@@ -125,4 +485,4 @@ declare function defaultFetcher<TData>(url: string, init?: RequestInit): Promise
  */
 declare function useDebouncedValue<T>(value: T, delay?: number): T;
 
-export { type BuildQueryStringInput, DataTableError, type DataTableFetcher, type DataTableMeta, type DataTableRequestParams, type DataTableResponse, type UseDataTableOptions, type UseDataTableResult, buildQueryString, defaultFetcher, useDataTable, useDebouncedValue };
+export { type BuildQueryStringInput, Button, type ButtonProps, DataTable, type DataTableClassNames, DataTableError, type DataTableFetcher, DataTableFilter, type DataTableFilterOption, type DataTableFilterProps, type DataTableFilterRenderProps, type DataTableFilterValue, type DataTableMeta, DataTablePagination, type DataTablePaginationClassNames, type DataTablePaginationLabels, type DataTablePaginationProps, type DataTablePaginationRenderProps, type DataTableProps, type DataTableRequestParams, type DataTableResponse, DataTableSearch, type DataTableSearchDebounce, type DataTableSearchProps, type DataTableSearchRenderProps, DataTableSplitLayout, type DataTableSplitLayoutClassNames, type DataTableSplitLayoutProps, Input, type InputProps, Select, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type UseDataTableOptions, type UseDataTableResult, buildQueryString, buttonVariants, cn, defaultFetcher, useDataTable, useDebouncedValue };