@ztwoint/z-ui 0.1.27 → 0.1.29

package/dist/types/components/table/components/pagination/index.d.ts

@@ -0,0 +1,6 @@
+export { Pagination, default } from './pagination';
+export type { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps, } from './pagination.type';
+export { usePagination } from './pagination.hook';
+export { usePaginationQuickJumper } from './components/pagination-quick-jumper.hook';
+export { calculateVisiblePages, calculateItemRange, isValidPageNumber } from './pagination.utils';
+export { PAGINATION_DEFAULTS, PAGINATION_CSS_CLASSES, PAGINATION_LABELS } from './pagination.const';

package/dist/types/components/table/components/pagination/pagination.const.d.ts

@@ -0,0 +1,26 @@
+export declare const PAGINATION_DEFAULTS: {
+    readonly MAX_VISIBLE_PAGES: 6;
+    readonly ITEMS_PER_PAGE: 10;
+};
+export declare const PAGINATION_CSS_CLASSES: {
+    readonly container: "flex items-center justify-between gap-4 p-4";
+    readonly navigation: "flex items-center gap-2";
+    readonly button: "flex items-center justify-center w-8 h-8 text-sm rounded border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors";
+    readonly buttonActive: "bg-blue-600 text-white border-blue-600 hover:bg-blue-700";
+    readonly buttonIcon: "flex items-center justify-center w-8 h-8 text-sm rounded border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors";
+    readonly ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400";
+    readonly info: "text-sm text-text-neutral-secondary";
+    readonly jumper: "flex items-center gap-2 text-sm text-text-neutral-primary";
+    readonly input: "w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
+};
+export declare const PAGINATION_LABELS: {
+    readonly previous: "Previous page";
+    readonly next: "Next page";
+    readonly first: "First page";
+    readonly last: "Last page";
+    readonly goToPage: "Go to page";
+    readonly page: "Page";
+    readonly of: "out of";
+    readonly showing: "Viewing";
+    readonly to: "to";
+};

package/dist/types/components/table/components/pagination/pagination.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PaginationProps } from './pagination.type';
+export declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/types/components/table/components/pagination/pagination.hook.d.ts

@@ -0,0 +1,5 @@
+import { PaginationHookProps, PaginationHookReturn } from './pagination.type';
+export declare const usePagination: (props: PaginationHookProps) => PaginationHookReturn & {
+    goToPage: (page: number) => boolean;
+    canGoToPage: (page: number) => boolean;
+};

package/dist/types/components/table/components/pagination/pagination.type.d.ts

@@ -0,0 +1,33 @@
+export interface PaginationProps {
+    currentPage: number;
+    totalPage: number;
+    onChange: (page: number) => void;
+    itemsPerPage?: number;
+    totalItems?: number;
+    showPageSizeSelector?: boolean;
+    showQuickJumper?: boolean;
+    showTotal?: boolean;
+    disabled?: boolean;
+}
+export interface PaginationHookProps {
+    currentPage: number;
+    totalPage: number;
+    maxVisiblePages?: number;
+}
+export interface PaginationHookReturn {
+    visiblePages: number[];
+    hasEllipsisStart: boolean;
+    hasEllipsisEnd: boolean;
+}
+export interface PaginationInfoProps {
+    showTotal: boolean;
+    totalItems?: number;
+    currentPage: number;
+    itemsPerPage: number;
+}
+export interface PaginationQuickJumperProps {
+    disabled: boolean;
+    currentPage: number;
+    totalPage: number;
+    onChange: (page: number) => void;
+}

package/dist/types/components/table/components/pagination/pagination.utils.d.ts

@@ -0,0 +1,7 @@
+import { PaginationHookProps, PaginationHookReturn } from './pagination.type';
+export declare const calculateVisiblePages: ({ currentPage, totalPage, maxVisiblePages, }: PaginationHookProps) => PaginationHookReturn;
+export declare const calculateItemRange: (currentPage: number, itemsPerPage: number, totalItems: number) => {
+    start: number;
+    end: number;
+};
+export declare const isValidPageNumber: (page: number, totalPage: number) => boolean;

package/dist/types/components/table/components/table-cell.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CellValue, CellType, CellRenderer, TableProps } from '../table.type';
+interface TableCellProps {
+    value: CellValue;
+    cellType: CellType;
+    cellRenderer?: CellRenderer;
+    customCells?: Record<string, CellRenderer>;
+    record: Record<string, unknown>;
+    index: number;
+    align?: 'left' | 'center' | 'right';
+    width?: string | number;
+    cell: TableProps['cell'];
+}
+export declare const TableCell: React.FC<TableCellProps>;
+export {};

package/dist/types/components/table/components/table-empty-state.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface TableEmptyStateProps {
+    colSpan: number;
+    message: string;
+}
+export declare const TableEmptyState: React.FC<TableEmptyStateProps>;
+export {};

package/dist/types/components/table/components/table-filter/filters/boolean.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const BooleanFilter: FilterComponentType;
+export default BooleanFilter;

package/dist/types/components/table/components/table-filter/filters/index.d.ts

@@ -0,0 +1,3 @@
+export * from './text';
+export * from './boolean';
+export * from './number';

package/dist/types/components/table/components/table-filter/filters/number.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const NumberFilter: FilterComponentType;
+export default NumberFilter;

package/dist/types/components/table/components/table-filter/filters/text.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const TextFilter: FilterComponentType;
+export default TextFilter;

package/dist/types/components/table/components/table-filter/index.d.ts

@@ -0,0 +1 @@
+export { TableFilter } from './table-filter';

package/dist/types/components/table/components/table-filter/table-filter.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FilterComponentType } from './table-filter.type';
+import { TableSchema, TableFilter as TableFilterType } from '../../table.type';
+export interface TableFilterProps {
+    filterComponents?: Record<string, FilterComponentType>;
+    schema: TableSchema;
+    filter?: TableFilterType;
+}
+export declare const TableFilter: React.FC<TableFilterProps>;

package/dist/types/components/table/components/table-filter/table-filter.hook.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableFilterProps } from './table-filter.type';
+import { FilterRule } from '../../table.type';
+declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
+    isOpen: boolean;
+    addFilterRule: () => void;
+    updateFilterRule: (index: number, updates: Partial<FilterRule>) => void;
+    removeFilterRule: (index: number) => void;
+    applyFilters: () => void;
+    hasActiveFilters: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    tempFilters: FilterRule[];
+    filterableFields: import("../../table.type").TableSchemaColumn[];
+};
+export default useTableFilter;

package/dist/types/components/table/components/table-filter/table-filter.type.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { TableFilter, TableSchema } from '../../table.type';
+export interface TableFilterProps {
+    schema: TableSchema;
+    filter: TableFilter;
+    filterComponents?: Record<string, FilterComponentType>;
+}
+export type FilterComponentProps = {
+    onChange: (input: {
+        condition?: string;
+        value?: string;
+    }) => void;
+    value: {
+        condition?: string;
+        value: string;
+    };
+};
+export type FilterComponentType = FC<FilterComponentProps>;

package/dist/types/components/table/components/table-footer-content.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TableFooterContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableFooterContent: React.FC<TableFooterContentProps>;
+export default TableFooterContent;

package/dist/types/components/table/components/table-footer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TableFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableFooter: React.FC<TableFooterProps>;
+export default TableFooter;

package/dist/types/components/table/components/table-header/index.d.ts

@@ -0,0 +1,2 @@
+export { TableHeader } from './table-header';
+export { TableSortIcon } from './table-sort-icon';

package/dist/types/components/table/components/table-header/table-header.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TableSchemaColumn, TableSort } from '../../table.type';
+import { TableProps } from '../../table.type';
+interface TableHeaderProps {
+    schema: TableSchemaColumn[];
+    sort?: TableSort;
+    cell: TableProps['cell'];
+}
+export declare const TableHeader: React.FC<TableHeaderProps>;
+export {};

package/dist/types/components/table/components/table-header/table-header.utils.d.ts

@@ -0,0 +1,5 @@
+import { TableSort, SortDirection } from '../../table.type';
+export declare const getCurrentSortDirection: (field: string, sort?: TableSort) => SortDirection;
+export declare const getNextSortDirection: (currentDirection: SortDirection) => SortDirection;
+export declare const isSortActive: (field: string, sort?: TableSort) => boolean;
+export declare const handleSortClick: (field: string, sort?: TableSort) => void;

package/dist/types/components/table/components/table-header/table-sort-icon.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SortDirection } from '../../table.type';
+interface TableSortIconProps {
+    direction: SortDirection;
+    isActive: boolean;
+}
+export declare const TableSortIcon: React.FC<TableSortIconProps>;
+export {};

package/dist/types/components/table/components/table-header-content.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TableHeaderContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableHeaderContent: React.FC<TableHeaderContentProps>;
+export default TableHeaderContent;

package/dist/types/components/table/components/table-header-wrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TableHeaderWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableHeaderWrapper: React.FC<TableHeaderWrapperProps>;
+export default TableHeaderWrapper;

package/dist/types/components/table/components/table-loading-state.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface TableLoadingStateProps {
+    colSpan: number;
+    message?: string;
+}
+export declare const TableLoadingState: React.FC<TableLoadingStateProps>;
+export {};

package/dist/types/components/table/components/table-row.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CellRenderer, TableProps, TableSchemaColumn } from '../table.type';
+interface TableRowProps {
+    record: Record<string, unknown>;
+    index: number;
+    schema: TableSchemaColumn[];
+    customCells?: Record<string, CellRenderer>;
+    cell: TableProps['cell'];
+}
+export declare const TableRow: React.FC<TableRowProps>;
+export {};

package/dist/types/components/table/index.d.ts

@@ -0,0 +1,9 @@
+export { Table as default, Table, TableProvider } from './table-provider';
+export { TableBody } from './table';
+export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
+export { getNestedValue, extractCellValue } from './table.utils';
+export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
+export { TableContext, useTableContext } from './table.context';
+export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
+export { TableFilter } from './components/table-filter';
+export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';

package/dist/types/components/table/table-provider.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TableProps } from './table.type';
+import { TableBody } from './table';
+import { TableFilter } from './components/table-filter';
+import { Pagination } from './components/pagination';
+import { TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent } from './components';
+import { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';
+export interface TableProviderProps extends TableProps {
+    children: React.ReactNode;
+}
+declare const TableProvider: React.FC<TableProviderProps>;
+interface TableCompoundComponent extends React.FC<TableProviderProps> {
+    Body: typeof TableBody;
+    Filter: typeof TableFilter;
+    Pagination: typeof Pagination;
+    PaginationInfo: typeof PaginationInfo;
+    PaginationQuickJumper: typeof PaginationQuickJumper;
+    Provider: typeof TableProvider;
+    Header: typeof TableHeaderWrapper;
+    HeaderContent: typeof TableHeaderContent;
+    Footer: typeof TableFooter;
+    FooterContent: typeof TableFooterContent;
+}
+export declare const Table: TableCompoundComponent;
+export { TableProvider };
+export default Table;

package/dist/types/components/table/table.const.d.ts

@@ -0,0 +1,24 @@
+export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
+export declare const TABLE_CSS_CLASSES: {
+    readonly table: "w-full";
+    readonly header: "bg-neutral-25 text-text-neutral-secondary";
+    readonly cell: {
+        readonly default: "px-4 py-3 text-sm";
+        readonly cellHeight: {
+            readonly small: "p-3";
+            readonly large: "p-4";
+        };
+        readonly hasBorder: {
+            readonly true: "border border-stroke-solid-light";
+            readonly false: "border-b border-stroke-solid-light";
+        };
+    };
+    readonly headerCell: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
+    readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";
+    readonly headerCellContent: "flex items-center justify-between";
+    readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
+    readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
+    readonly row: "hover:bg-surface-neutral-hover transition-colors duration-200 text-text-neutral-primary";
+    readonly emptyState: "px-4 py-8 text-center text-gray-500";
+    readonly loading: "px-4 py-8 text-center text-gray-500";
+};

package/dist/types/components/table/table.context.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TableProps } from './table.type';
+export interface TableContextValue extends TableProps {
+    updateSort?: (sort: TableProps['sort']) => void;
+}
+export declare const TableContext: React.Context<TableContextValue | null>;
+export declare const useTableContext: () => TableContextValue;

package/dist/types/components/table/table.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TableProps } from './table.type';
+export declare const TableBody: React.FC<Partial<TableProps>>;
+export default TableBody;

package/dist/types/components/table/table.type.d.ts

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { FilterComponentType } from './components/table-filter/table-filter.type';
+export type CellType = 'text' | 'number' | 'boolean';
+export type CellValue = string | number | boolean | null | undefined;
+export type CellRendererProps = {
+    value: CellValue;
+    record: Record<string, unknown>;
+    index: number;
+};
+export type CellRenderer = FC<CellRendererProps>;
+export type FilterCondition = 'contains' | 'notEqual' | 'equal' | '>' | '<' | '=' | '!=';
+export type FilterRule = {
+    field: string;
+    condition?: string;
+    value: string;
+};
+export type TableFilter = {
+    value: FilterRule[];
+    onChange: (filters: FilterRule[]) => void;
+};
+export type TablePaginationConfig = {
+    currentPage: number;
+    totalPage: number;
+    onChange: (page: number) => void;
+    itemsPerPage?: number;
+    totalItems?: number;
+    showQuickJumper?: boolean;
+    showTotal?: boolean;
+};
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortColumn = {
+    field: string;
+    direction: SortDirection;
+};
+export type TableSort = {
+    sortedColumns: SortColumn[];
+    onSort: (field: string, direction: SortDirection) => void;
+};
+export type TableSchemaColumn = {
+    key: string;
+    title: string;
+    cellType: CellType;
+    cellRenderer?: CellRenderer;
+    filterable?: boolean;
+    hideable?: boolean;
+    sortable?: boolean;
+};
+export type TableSchema = TableSchemaColumn[];
+export type TableProps = {
+    cell?: {
+        hasBorder?: boolean;
+        cellHeight?: 'small' | 'large';
+    };
+    dataSource: Record<string, unknown>[];
+    schema: TableSchema;
+    loading?: boolean;
+    emptyMessage?: string;
+    filter?: TableFilter;
+    filterComponents?: Record<string, FilterComponentType>;
+    pagination?: TablePaginationConfig;
+    sort?: TableSort;
+    customCells?: Record<string, CellRenderer>;
+};

package/dist/types/components/table/table.utils.d.ts

@@ -0,0 +1,3 @@
+import { CellValue, TableSchemaColumn } from './table.type';
+export declare const getNestedValue: (object: Record<string, unknown>, path: string) => CellValue;
+export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;

package/dist/types/devComponents/navigation/index.d.ts

@@ -0,0 +1 @@
+export { Navigation } from './navigation';

package/dist/types/devComponents/navigation/navigation.d.ts

@@ -0,0 +1 @@
+export declare const Navigation: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -1,15 +1,48 @@
 import './styles/tailwind.css';
 export * from './components/alert';
 export * from './components/button/button';
-export * from './components/nav-header';
-export * from './components/input/input';
-export * from './components/country-flags/country-flags';
 export * from './components/collapsible-side-nav-bar';
-export * from './components/tab/tab';
-export * from './components/tooltip/tooltip';
-export * from './components/dialog/dialog';
+export * from './components/country-flags/country-flags';
 export * from './components/dialog/dialog';
+export * from './components/dropdown/z2-dropdown';
+export * from './components/dropdown-menu/z2-dropdown-menu';
 export * from './components/file-upload-area';
-export * from './components/stepper';
+export * from './components/input/input';
+export * from './components/nav-header';
 export * from './components/select/z2-select';
-export * from './components/dropdown/z2-dropdown';
+export * from './components/stepper';
+export * from './components/stepper-item/stepper-item';
+export * from './components/tab/tab';
+export * from './components/table';
+export * from './components/tooltip/tooltip';
+export * from './components/assets/icons/apartment-building';
+export * from './components/assets/icons/chevron-down';
+export * from './components/assets/icons/chevron-left';
+export * from './components/assets/icons/chevron-right';
+export * from './components/assets/icons/chevron-up-icon';
+export * from './components/assets/icons/circle-check-filled';
+export * from './components/assets/icons/circle-check';
+export * from './components/assets/icons/circles-icon';
+export * from './components/assets/icons/database-copy';
+export * from './components/assets/icons/dots';
+export * from './components/assets/icons/double-chevron-left';
+export * from './components/assets/icons/double-chevron-right';
+export * from './components/assets/icons/home';
+export * from './components/assets/icons/info-icon';
+export * from './components/assets/icons/left-arrow';
+export * from './components/assets/icons/link';
+export * from './components/assets/icons/list-tree';
+export * from './components/assets/icons/magnifier-icon';
+export * from './components/assets/icons/media-record';
+export * from './components/assets/icons/octagon-warning-Copy';
+export * from './components/assets/icons/pin';
+export * from './components/assets/icons/sidebar-left-show-copy';
+export * from './components/assets/icons/slider';
+export * from './components/assets/icons/sub-nav-indicator';
+export * from './components/assets/icons/upload';
+export * from './components/assets/icons/vector';
+export * from './components/assets/icons/window-left-copy';
+export * from './components/assets/icons/x';
+export * from './components/assets/icons/z2-icon';
+export * from './lib/theme.hook';
+export * from './lib/utils';

package/dist/types/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { useTheme } from './theme.hook';
+export type { Theme } from './theme.hook';
+export * from './utils';

package/dist/types/lib/theme.hook.d.ts

@@ -0,0 +1,8 @@
+export type Theme = 'dark' | 'light';
+export declare const useTheme: () => {
+    currentTheme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+    isDark: boolean;
+    isLight: boolean;
+};

package/dist/types/routes/default.d.ts

@@ -0,0 +1,2 @@
+declare const DefaultPage: () => import("react/jsx-runtime").JSX.Element;
+export default DefaultPage;

package/dist/types/routes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DefaultPage } from './default';
+export { default as TablePage } from './table';

package/dist/types/routes/table.d.ts

@@ -0,0 +1,2 @@
+declare const TablePage: () => import("react/jsx-runtime").JSX.Element;
+export default TablePage;

package/dist/types/sample/text-cell.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { CellRendererProps } from '../components/table/table.type';
+export declare const TextCell2: React.FC<CellRendererProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -51,6 +51,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/react": "19.1.4",
     "@types/react-dom": "19.1.5",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
     "@vitejs/plugin-react": "^4.3.4",
@@ -94,6 +95,7 @@
     "cmdk": "^1.1.1",
     "lucide-react": "^0.525.0",
     "react-country-flag": "^3.1.0",
+    "react-router-dom": "^7.7.1",
     "tailwind-merge": "^3.3.0",
     "vite-plugin-dts": "^4.5.4"
   },