@lglab/compose-ui 0.29.0 → 0.30.0

package/dist/table/use-table.js

@@ -0,0 +1,256 @@
+import { cn } from "../lib/utils.js";
+import { compareValues } from "../components/table/sort.js";
+import { useCallback, useDeferredValue, useMemo, useState } from "react";
+
+//#region src/components/table/use-table.ts
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+function useTable(options) {
+	const { data, columns: columnDefs, pagination, sort, search, filters, selection: selectionConfig } = options;
+	const [currentPage, setCurrentPage] = useState(1);
+	const [pageSize, setPageSize] = useState(pagination?.pageSize ?? DEFAULT_PAGE_SIZE);
+	const [sortState, setSortState] = useState({
+		key: sort?.key ?? null,
+		direction: sort?.direction ?? "asc"
+	});
+	const [searchTerm, setSearchTerm] = useState("");
+	const [filterValues, setFilterValues] = useState(() => {
+		if (!filters) return {};
+		const initial = {};
+		for (const [id, def] of Object.entries(filters)) if (def.defaultValue !== void 0) initial[id] = def.defaultValue;
+		return initial;
+	});
+	const [internalSelectedKeys, setInternalSelectedKeys] = useState(() => new Set(selectionConfig?.defaultSelectedKeys ?? []));
+	const isControlled = selectionConfig?.selectedKeys !== void 0;
+	const selectedKeysSet = useMemo(() => isControlled ? new Set(selectionConfig?.selectedKeys) : internalSelectedKeys, [
+		isControlled,
+		selectionConfig?.selectedKeys,
+		internalSelectedKeys
+	]);
+	const sortKey = sortState.key;
+	const sortDirection = sortState.direction;
+	const debouncedSearchTerm = useDeferredValue(searchTerm);
+	const pageSizeOptions = pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
+	const filteredByFilters = useMemo(() => {
+		if (!filters) return data;
+		return data.filter((row) => {
+			for (const [id, def] of Object.entries(filters)) {
+				const value = filterValues[id];
+				if (value === void 0) continue;
+				if (!def.predicate(row, value)) return false;
+			}
+			return true;
+		});
+	}, [
+		data,
+		filters,
+		filterValues
+	]);
+	const filteredData = useMemo(() => {
+		if (!search || !debouncedSearchTerm) return filteredByFilters;
+		const term = debouncedSearchTerm.toLowerCase();
+		return filteredByFilters.filter((row) => search.keys.some((key) => String(row[key]).toLowerCase().includes(term)));
+	}, [
+		filteredByFilters,
+		debouncedSearchTerm,
+		search
+	]);
+	const sortedData = useMemo(() => {
+		if (!sortKey) return filteredData;
+		return [...filteredData].sort((a, b) => compareValues(a[sortKey], b[sortKey], sortDirection));
+	}, [
+		filteredData,
+		sortKey,
+		sortDirection
+	]);
+	const totalItems = sortedData.length;
+	const totalPages = pagination ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1;
+	const effectivePage = Math.min(currentPage, totalPages);
+	const rows = useMemo(() => {
+		if (!pagination) return sortedData;
+		const start = (effectivePage - 1) * pageSize;
+		return sortedData.slice(start, start + pageSize);
+	}, [
+		sortedData,
+		effectivePage,
+		pageSize,
+		pagination
+	]);
+	const onPageChange = useCallback((page) => {
+		setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+	}, [totalPages]);
+	const onPageSizeChange = useCallback((size) => {
+		setPageSize(size);
+		setCurrentPage(1);
+	}, []);
+	const onSort = useCallback((key) => {
+		setSortState((prev) => {
+			if (prev.key !== key) return {
+				key,
+				direction: "asc"
+			};
+			if (prev.direction === "asc") return {
+				key,
+				direction: "desc"
+			};
+			return {
+				key: null,
+				direction: "asc"
+			};
+		});
+		setCurrentPage(1);
+	}, []);
+	const onSearchChange = useCallback((term) => {
+		setSearchTerm(term);
+		setCurrentPage(1);
+	}, []);
+	const setFilterValue = useCallback((id, value) => {
+		setFilterValues((prev) => ({
+			...prev,
+			[id]: value
+		}));
+		setCurrentPage(1);
+	}, []);
+	const clearFilters = useCallback(() => {
+		setFilterValues({});
+		setCurrentPage(1);
+	}, []);
+	const activeFilterCount = useMemo(() => Object.values(filterValues).filter((v) => v !== void 0 && v !== null && !(Array.isArray(v) && v.length === 0) && v !== "").length, [filterValues]);
+	const currentPageRowKeys = useMemo(() => {
+		if (!selectionConfig) return [];
+		return rows.map((row) => selectionConfig.rowKey(row));
+	}, [rows, selectionConfig]);
+	const pageSelectionState = useMemo(() => {
+		if (!selectionConfig || currentPageRowKeys.length === 0) return "none";
+		const selectedOnPage = currentPageRowKeys.filter((key) => selectedKeysSet.has(key));
+		if (selectedOnPage.length === 0) return "none";
+		if (selectedOnPage.length === currentPageRowKeys.length) return "all";
+		return "some";
+	}, [
+		selectionConfig,
+		currentPageRowKeys,
+		selectedKeysSet
+	]);
+	const updateSelection = useCallback((newKeys) => {
+		if (isControlled) selectionConfig?.onSelectionChange?.(newKeys);
+		else {
+			setInternalSelectedKeys(new Set(newKeys));
+			selectionConfig?.onSelectionChange?.(newKeys);
+		}
+	}, [isControlled, selectionConfig]);
+	const isSelected = useCallback((key) => selectedKeysSet.has(key), [selectedKeysSet]);
+	const toggleRow = useCallback((key) => {
+		const newKeys = new Set(selectedKeysSet);
+		if (newKeys.has(key)) newKeys.delete(key);
+		else newKeys.add(key);
+		updateSelection(Array.from(newKeys));
+	}, [selectedKeysSet, updateSelection]);
+	const isRowSelected = useCallback((row) => {
+		if (!selectionConfig) return false;
+		return selectedKeysSet.has(selectionConfig.rowKey(row));
+	}, [selectedKeysSet, selectionConfig]);
+	const toggleRowSelection = useCallback((row) => {
+		if (!selectionConfig) return;
+		toggleRow(selectionConfig.rowKey(row));
+	}, [toggleRow, selectionConfig]);
+	const toggleAllOnPage = useCallback(() => {
+		const newKeys = new Set(selectedKeysSet);
+		if (pageSelectionState === "all") for (const key of currentPageRowKeys) newKeys.delete(key);
+		else for (const key of currentPageRowKeys) newKeys.add(key);
+		updateSelection(Array.from(newKeys));
+	}, [
+		selectedKeysSet,
+		pageSelectionState,
+		currentPageRowKeys,
+		updateSelection
+	]);
+	const clearSelection = useCallback(() => {
+		updateSelection([]);
+	}, [updateSelection]);
+	const selection = useMemo(() => {
+		if (!selectionConfig) return void 0;
+		return {
+			selectedKeys: Array.from(selectedKeysSet),
+			selectedCount: selectedKeysSet.size,
+			isSelected,
+			toggleRow,
+			isRowSelected,
+			toggleRowSelection,
+			toggleAllOnPage,
+			clearSelection,
+			pageSelectionState,
+			isIndeterminate: pageSelectionState === "some",
+			isAllOnPageSelected: pageSelectionState === "all"
+		};
+	}, [
+		selectionConfig,
+		selectedKeysSet,
+		isSelected,
+		toggleRow,
+		isRowSelected,
+		toggleRowSelection,
+		toggleAllOnPage,
+		clearSelection,
+		pageSelectionState
+	]);
+	return {
+		columns: useMemo(() => {
+			return columnDefs.map((def) => {
+				const key = def.key;
+				const sortable = def.sortable ?? false;
+				const isSorted = sortKey === key;
+				const renderCell = (row) => {
+					const value = row[key];
+					if (def.cell) return def.cell(value, row);
+					if (def.format) return def.format(value, row);
+					return value == null ? "" : String(value);
+				};
+				return {
+					key,
+					head: {
+						children: def.header,
+						className: cn(def.className, def.headerClassName) || void 0,
+						style: def.width ? { width: def.width } : void 0,
+						sortable,
+						sortDirection: isSorted ? sortDirection : void 0,
+						onSort: sortable ? () => onSort(key) : void 0
+					},
+					cell: { className: cn(def.className, def.cellClassName) || void 0 },
+					renderCell
+				};
+			});
+		}, [
+			columnDefs,
+			sortKey,
+			sortDirection,
+			onSort
+		]),
+		rows,
+		totalItems,
+		currentPage: effectivePage,
+		totalPages,
+		pageSize,
+		pageSizeOptions,
+		onPageChange,
+		onPageSizeChange,
+		sortKey,
+		sortDirection,
+		onSort,
+		searchTerm,
+		onSearchChange,
+		filterValues,
+		setFilterValue,
+		clearFilters,
+		activeFilterCount,
+		selection
+	};
+}
+
+//#endregion
+export { useTable };
+//# sourceMappingURL=use-table.js.map

package/dist/table/use-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table.js","names":[],"sources":["../../src/components/table/use-table.ts"],"sourcesContent":["import { type ReactNode, useCallback, useDeferredValue, useMemo, useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { compareValues } from './sort'\nimport type {\n  ColumnDef,\n  FilterValues,\n  ProcessedColumn,\n  SelectionState,\n  SortDirection,\n  UseTableOptions,\n  UseTableReturn,\n} from './types'\n\nconst DEFAULT_PAGE_SIZE = 10\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]\n\nexport function useTable<T>(options: UseTableOptions<T>): UseTableReturn<T> {\n  const {\n    data,\n    columns: columnDefs,\n    pagination,\n    sort,\n    search,\n    filters,\n    selection: selectionConfig,\n  } = options\n\n  const [currentPage, setCurrentPage] = useState(1)\n  const [pageSize, setPageSize] = useState(pagination?.pageSize ?? DEFAULT_PAGE_SIZE)\n  const [sortState, setSortState] = useState<{\n    key: keyof T | null\n    direction: SortDirection\n  }>({\n    key: sort?.key ?? null,\n    direction: sort?.direction ?? 'asc',\n  })\n  const [searchTerm, setSearchTerm] = useState('')\n  const [filterValues, setFilterValues] = useState<FilterValues>(() => {\n    if (!filters) return {}\n    const initial: FilterValues = {}\n    for (const [id, def] of Object.entries(filters)) {\n      if (def.defaultValue !== undefined) {\n        initial[id] = def.defaultValue\n      }\n    }\n    return initial\n  })\n\n  // Selection state (internal, used when uncontrolled)\n  const [internalSelectedKeys, setInternalSelectedKeys] = useState<Set<string | number>>(\n    () => new Set(selectionConfig?.defaultSelectedKeys ?? []),\n  )\n\n  // Determine if controlled or uncontrolled\n  const isControlled = selectionConfig?.selectedKeys !== undefined\n  const selectedKeysSet = useMemo(\n    () => (isControlled ? new Set(selectionConfig?.selectedKeys) : internalSelectedKeys),\n    [isControlled, selectionConfig?.selectedKeys, internalSelectedKeys],\n  )\n\n  const sortKey = sortState.key\n  const sortDirection = sortState.direction\n  const debouncedSearchTerm = useDeferredValue(searchTerm)\n\n  const pageSizeOptions = pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS\n\n  // Step 1: Apply filters\n  const filteredByFilters = useMemo(() => {\n    if (!filters) return data\n    return data.filter((row) => {\n      for (const [id, def] of Object.entries(filters)) {\n        const value = filterValues[id]\n        if (value === undefined) continue\n        if (!def.predicate(row, value)) return false\n      }\n      return true\n    })\n  }, [data, filters, filterValues])\n\n  // Step 2: Apply search\n  const filteredData = useMemo(() => {\n    if (!search || !debouncedSearchTerm) return filteredByFilters\n    const term = debouncedSearchTerm.toLowerCase()\n    return filteredByFilters.filter((row) =>\n      search.keys.some((key) => String(row[key]).toLowerCase().includes(term)),\n    )\n  }, [filteredByFilters, debouncedSearchTerm, search])\n\n  const sortedData = useMemo(() => {\n    if (!sortKey) return filteredData\n    return [...filteredData].sort((a, b) =>\n      compareValues(a[sortKey], b[sortKey], sortDirection),\n    )\n  }, [filteredData, sortKey, sortDirection])\n\n  const totalItems = sortedData.length\n  const totalPages = pagination ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1\n\n  const effectivePage = Math.min(currentPage, totalPages)\n\n  const rows = useMemo(() => {\n    if (!pagination) return sortedData\n    const start = (effectivePage - 1) * pageSize\n    return sortedData.slice(start, start + pageSize)\n  }, [sortedData, effectivePage, pageSize, pagination])\n\n  const onPageChange = useCallback(\n    (page: number) => {\n      setCurrentPage(Math.max(1, Math.min(page, totalPages)))\n    },\n    [totalPages],\n  )\n\n  const onPageSizeChange = useCallback((size: number) => {\n    setPageSize(size)\n    setCurrentPage(1)\n  }, [])\n\n  const onSort = useCallback((key: keyof T) => {\n    setSortState((prev) => {\n      if (prev.key !== key) {\n        return { key, direction: 'asc' }\n      }\n      if (prev.direction === 'asc') {\n        return { key, direction: 'desc' }\n      }\n      return { key: null, direction: 'asc' }\n    })\n    setCurrentPage(1)\n  }, [])\n\n  const onSearchChange = useCallback((term: string) => {\n    setSearchTerm(term)\n    setCurrentPage(1)\n  }, [])\n\n  const setFilterValue = useCallback((id: string, value: unknown) => {\n    setFilterValues((prev) => ({ ...prev, [id]: value }))\n    setCurrentPage(1)\n  }, [])\n\n  const clearFilters = useCallback(() => {\n    setFilterValues({})\n    setCurrentPage(1)\n  }, [])\n\n  const activeFilterCount = useMemo(\n    () =>\n      Object.values(filterValues).filter(\n        (v) =>\n          v !== undefined &&\n          v !== null &&\n          !(Array.isArray(v) && v.length === 0) &&\n          v !== '',\n      ).length,\n    [filterValues],\n  )\n\n  // Selection: compute current page row keys\n  const currentPageRowKeys = useMemo(() => {\n    if (!selectionConfig) return []\n    return rows.map((row) => selectionConfig.rowKey(row))\n  }, [rows, selectionConfig])\n\n  // Selection: compute page selection state\n  const pageSelectionState = useMemo((): 'all' | 'some' | 'none' => {\n    if (!selectionConfig || currentPageRowKeys.length === 0) return 'none'\n    const selectedOnPage = currentPageRowKeys.filter((key) => selectedKeysSet.has(key))\n    if (selectedOnPage.length === 0) return 'none'\n    if (selectedOnPage.length === currentPageRowKeys.length) return 'all'\n    return 'some'\n  }, [selectionConfig, currentPageRowKeys, selectedKeysSet])\n\n  // Selection: helper to update selection\n  const updateSelection = useCallback(\n    (newKeys: (string | number)[]) => {\n      if (isControlled) {\n        selectionConfig?.onSelectionChange?.(newKeys)\n      } else {\n        setInternalSelectedKeys(new Set(newKeys))\n        selectionConfig?.onSelectionChange?.(newKeys)\n      }\n    },\n    [isControlled, selectionConfig],\n  )\n\n  const isSelected = useCallback(\n    (key: string | number) => selectedKeysSet.has(key),\n    [selectedKeysSet],\n  )\n\n  const toggleRow = useCallback(\n    (key: string | number) => {\n      const newKeys = new Set(selectedKeysSet)\n      if (newKeys.has(key)) {\n        newKeys.delete(key)\n      } else {\n        newKeys.add(key)\n      }\n      updateSelection(Array.from(newKeys))\n    },\n    [selectedKeysSet, updateSelection],\n  )\n\n  // Row-based convenience methods that use rowKey internally\n  const isRowSelected = useCallback(\n    (row: T) => {\n      if (!selectionConfig) return false\n      return selectedKeysSet.has(selectionConfig.rowKey(row))\n    },\n    [selectedKeysSet, selectionConfig],\n  )\n\n  const toggleRowSelection = useCallback(\n    (row: T) => {\n      if (!selectionConfig) return\n      toggleRow(selectionConfig.rowKey(row))\n    },\n    [toggleRow, selectionConfig],\n  )\n\n  const toggleAllOnPage = useCallback(() => {\n    const newKeys = new Set(selectedKeysSet)\n    if (pageSelectionState === 'all') {\n      // Deselect all on current page\n      for (const key of currentPageRowKeys) {\n        newKeys.delete(key)\n      }\n    } else {\n      // Select all on current page\n      for (const key of currentPageRowKeys) {\n        newKeys.add(key)\n      }\n    }\n    updateSelection(Array.from(newKeys))\n  }, [selectedKeysSet, pageSelectionState, currentPageRowKeys, updateSelection])\n\n  const clearSelection = useCallback(() => {\n    updateSelection([])\n  }, [updateSelection])\n\n  // Build selection state object\n  const selection: SelectionState<T> | undefined = useMemo(() => {\n    if (!selectionConfig) return undefined\n    return {\n      selectedKeys: Array.from(selectedKeysSet),\n      selectedCount: selectedKeysSet.size,\n      isSelected,\n      toggleRow,\n      isRowSelected,\n      toggleRowSelection,\n      toggleAllOnPage,\n      clearSelection,\n      pageSelectionState,\n      isIndeterminate: pageSelectionState === 'some',\n      isAllOnPageSelected: pageSelectionState === 'all',\n    }\n  }, [\n    selectionConfig,\n    selectedKeysSet,\n    isSelected,\n    toggleRow,\n    isRowSelected,\n    toggleRowSelection,\n    toggleAllOnPage,\n    clearSelection,\n    pageSelectionState,\n  ])\n\n  const columns = useMemo(() => {\n    return columnDefs.map((def: ColumnDef<T, keyof T>): ProcessedColumn<T> => {\n      const key = def.key\n      const sortable = def.sortable ?? false\n      const isSorted = sortKey === key\n\n      const renderCell = (row: T): ReactNode => {\n        const value = row[key]\n        if (def.cell) return def.cell(value, row)\n        if (def.format) return def.format(value, row)\n        return value == null ? '' : String(value)\n      }\n\n      return {\n        key,\n        head: {\n          children: def.header,\n          className: cn(def.className, def.headerClassName) || undefined,\n          style: def.width ? { width: def.width } : undefined,\n          sortable,\n          sortDirection: isSorted ? sortDirection : undefined,\n          onSort: sortable ? () => onSort(key) : undefined,\n        },\n        cell: {\n          className: cn(def.className, def.cellClassName) || undefined,\n        },\n        renderCell,\n      }\n    })\n  }, [columnDefs, sortKey, sortDirection, onSort])\n\n  return {\n    columns,\n    rows,\n    totalItems,\n    currentPage: effectivePage,\n    totalPages,\n    pageSize,\n    pageSizeOptions,\n    onPageChange,\n    onPageSizeChange,\n    sortKey,\n    sortDirection,\n    onSort,\n    searchTerm,\n    onSearchChange,\n    filterValues,\n    setFilterValue,\n    clearFilters,\n    activeFilterCount,\n    selection,\n  }\n}\n"],"mappings":"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"}

package/dist/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime137 from "react/jsx-runtime";
+import * as react_jsx_runtime120 from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/components/tabs.d.ts
@@ -8,7 +8,7 @@ declare const TabsRoot: {
   ({
     className,
     ...props
-  }: TabsRootProps): react_jsx_runtime137.JSX.Element;
+  }: TabsRootProps): react_jsx_runtime120.JSX.Element;
   displayName: string;
 };
 type TabsListProps = React.ComponentProps<typeof Tabs.List> & {
@@ -20,7 +20,7 @@ declare const TabsList: {
     className,
     orientation,
     ...props
-  }: TabsListProps): react_jsx_runtime137.JSX.Element;
+  }: TabsListProps): react_jsx_runtime120.JSX.Element;
   displayName: string;
 };
 type TabsTabProps = React.ComponentProps<typeof Tabs.Tab> & {
@@ -32,7 +32,7 @@ declare const TabsTab: {
     className,
     size,
     ...props
-  }: TabsTabProps): react_jsx_runtime137.JSX.Element;
+  }: TabsTabProps): react_jsx_runtime120.JSX.Element;
   displayName: string;
 };
 type TabsIndicatorProps = React.ComponentProps<typeof Tabs.Indicator> & {
@@ -44,7 +44,7 @@ declare const TabsIndicator: {
     className,
     orientation,
     ...props
-  }: TabsIndicatorProps): react_jsx_runtime137.JSX.Element;
+  }: TabsIndicatorProps): react_jsx_runtime120.JSX.Element;
   displayName: string;
 };
 type TabsPanelProps = React.ComponentProps<typeof Tabs.Panel>;
@@ -52,7 +52,7 @@ declare const TabsPanel: {
   ({
     className,
     ...props
-  }: TabsPanelProps): react_jsx_runtime137.JSX.Element;
+  }: TabsPanelProps): react_jsx_runtime120.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/textarea.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime161 from "react/jsx-runtime";
+import * as react_jsx_runtime125 from "react/jsx-runtime";
 
 //#region src/components/textarea.d.ts
 type TextareaProps = React.ComponentProps<'textarea'>;
@@ -7,7 +7,7 @@ declare const Textarea: {
   ({
     className,
     ...props
-  }: TextareaProps): react_jsx_runtime161.JSX.Element;
+  }: TextareaProps): react_jsx_runtime125.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toast.d.ts

@@ -1,12 +1,12 @@
 import { ButtonSize, ButtonVariant } from "./lib/button-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime171 from "react/jsx-runtime";
+import * as react_jsx_runtime126 from "react/jsx-runtime";
 import { Toast, Toast as Toast$1 } from "@base-ui/react/toast";
 
 //#region src/components/toast.d.ts
 type ToastProviderProps = React.ComponentProps<typeof Toast$1.Provider>;
 declare const ToastProvider: {
-  (props: ToastProviderProps): react_jsx_runtime171.JSX.Element;
+  (props: ToastProviderProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
@@ -18,7 +18,7 @@ declare const ToastViewport: {
     className,
     position,
     ...props
-  }: ToastViewportProps): react_jsx_runtime171.JSX.Element;
+  }: ToastViewportProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastRootProps = React.ComponentProps<typeof Toast$1.Root>;
@@ -26,7 +26,7 @@ declare const ToastRoot: {
   ({
     className,
     ...props
-  }: ToastRootProps): react_jsx_runtime171.JSX.Element;
+  }: ToastRootProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastContentProps = React.ComponentProps<typeof Toast$1.Content>;
@@ -34,7 +34,7 @@ declare const ToastContent: {
   ({
     className,
     ...props
-  }: ToastContentProps): react_jsx_runtime171.JSX.Element;
+  }: ToastContentProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastTitleProps = React.ComponentProps<typeof Toast$1.Title>;
@@ -42,7 +42,7 @@ declare const ToastTitle: {
   ({
     className,
     ...props
-  }: ToastTitleProps): react_jsx_runtime171.JSX.Element;
+  }: ToastTitleProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastDescriptionProps = React.ComponentProps<typeof Toast$1.Description>;
@@ -50,7 +50,7 @@ declare const ToastDescription: {
   ({
     className,
     ...props
-  }: ToastDescriptionProps): react_jsx_runtime171.JSX.Element;
+  }: ToastDescriptionProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastActionProps = React.ComponentProps<typeof Toast$1.Action> & {
@@ -63,7 +63,7 @@ declare const ToastAction: {
     variant,
     size,
     ...props
-  }: ToastActionProps): react_jsx_runtime171.JSX.Element;
+  }: ToastActionProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastCloseProps = React.ComponentProps<typeof Toast$1.Close>;
@@ -71,7 +71,7 @@ declare const ToastClose: {
   ({
     className,
     ...props
-  }: ToastCloseProps): react_jsx_runtime171.JSX.Element;
+  }: ToastCloseProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 type ToastPositionerProps = React.ComponentProps<typeof Toast$1.Positioner>;
@@ -79,7 +79,7 @@ declare const ToastPositioner: {
   ({
     className,
     ...props
-  }: ToastPositionerProps): react_jsx_runtime171.JSX.Element;
+  }: ToastPositionerProps): react_jsx_runtime126.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toggle-group.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize, ControlVariant } from "./lib/control-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime205 from "react/jsx-runtime";
+import * as react_jsx_runtime135 from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 
@@ -11,7 +11,7 @@ declare const ToggleGroupRoot: {
     className,
     orientation,
     ...props
-  }: ToggleGroupRootProps): react_jsx_runtime205.JSX.Element;
+  }: ToggleGroupRootProps): react_jsx_runtime135.JSX.Element;
   displayName: string;
 };
 type ToggleGroupItemProps = React.ComponentProps<typeof Toggle> & {
@@ -26,7 +26,7 @@ declare const ToggleGroupItem: {
     variant,
     size,
     ...props
-  }: ToggleGroupItemProps): react_jsx_runtime205.JSX.Element;
+  }: ToggleGroupItemProps): react_jsx_runtime135.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toggle.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize, ControlVariant } from "./lib/control-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime204 from "react/jsx-runtime";
+import * as react_jsx_runtime117 from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 
 //#region src/components/toggle.d.ts
@@ -16,7 +16,7 @@ declare const Toggle: {
     variant,
     size,
     ...props
-  }: ToggleProps): react_jsx_runtime204.JSX.Element;
+  }: ToggleProps): react_jsx_runtime117.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize, ControlVariant } from "./lib/control-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime165 from "react/jsx-runtime";
+import * as react_jsx_runtime137 from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
 
 //#region src/components/toolbar.d.ts
@@ -9,7 +9,7 @@ declare const ToolbarRoot: {
   ({
     className,
     ...props
-  }: ToolbarRootProps): react_jsx_runtime165.JSX.Element;
+  }: ToolbarRootProps): react_jsx_runtime137.JSX.Element;
   displayName: string;
 };
 type ToolbarButtonProps = React.ComponentProps<typeof Toolbar.Button> & {
@@ -24,7 +24,7 @@ declare const ToolbarButton: {
     variant,
     size,
     ...props
-  }: ToolbarButtonProps): react_jsx_runtime165.JSX.Element;
+  }: ToolbarButtonProps): react_jsx_runtime137.JSX.Element;
   displayName: string;
 };
 type ToolbarLinkProps = React.ComponentProps<typeof Toolbar.Link>;
@@ -32,7 +32,7 @@ declare const ToolbarLink: {
   ({
     className,
     ...props
-  }: ToolbarLinkProps): react_jsx_runtime165.JSX.Element;
+  }: ToolbarLinkProps): react_jsx_runtime137.JSX.Element;
   displayName: string;
 };
 type ToolbarInputProps = React.ComponentProps<typeof Toolbar.Input>;
@@ -40,7 +40,7 @@ declare const ToolbarInput: {
   ({
     className,
     ...props
-  }: ToolbarInputProps): react_jsx_runtime165.JSX.Element;
+  }: ToolbarInputProps): react_jsx_runtime137.JSX.Element;
   displayName: string;
 };
 type ToolbarGroupProps = React.ComponentProps<typeof Toolbar.Group>;
@@ -48,7 +48,7 @@ declare const ToolbarGroup: {
   ({
     className,
     ...props
-  }: ToolbarGroupProps): react_jsx_runtime165.JSX.Element;
+  }: ToolbarGroupProps): react_jsx_runtime137.JSX.Element;
   displayName: string;
 };
 type ToolbarSeparatorProps = React.ComponentProps<typeof Toolbar.Separator>;
@@ -56,7 +56,7 @@ declare const ToolbarSeparator: {
   ({
     className,
     ...props
-  }: ToolbarSeparatorProps): react_jsx_runtime165.JSX.Element;
+  }: ToolbarSeparatorProps): react_jsx_runtime137.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/tooltip.d.ts

@@ -1,12 +1,12 @@
 import { TooltipVariant } from "./lib/tooltip-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime181 from "react/jsx-runtime";
+import * as react_jsx_runtime143 from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 
 //#region src/components/tooltip.d.ts
 type TooltipProviderProps = React.ComponentProps<typeof Tooltip.Provider>;
 declare const TooltipProvider: {
-  (props: TooltipProviderProps): react_jsx_runtime181.JSX.Element;
+  (props: TooltipProviderProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 type TooltipRootProps = React.ComponentProps<typeof Tooltip.Root> & {
@@ -16,7 +16,7 @@ declare const TooltipRoot: {
   ({
     variant,
     ...props
-  }: TooltipRootProps): react_jsx_runtime181.JSX.Element;
+  }: TooltipRootProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 type TooltipTriggerProps = React.ComponentProps<typeof Tooltip.Trigger>;
@@ -24,12 +24,12 @@ declare const TooltipTrigger: {
   ({
     className,
     ...props
-  }: TooltipTriggerProps): react_jsx_runtime181.JSX.Element;
+  }: TooltipTriggerProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 type TooltipPortalProps = React.ComponentProps<typeof Tooltip.Portal>;
 declare const TooltipPortal: {
-  (props: TooltipPortalProps): react_jsx_runtime181.JSX.Element;
+  (props: TooltipPortalProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 type TooltipPositionerProps = React.ComponentProps<typeof Tooltip.Positioner>;
@@ -37,7 +37,7 @@ declare const TooltipPositioner: {
   ({
     className,
     ...props
-  }: TooltipPositionerProps): react_jsx_runtime181.JSX.Element;
+  }: TooltipPositionerProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 type TooltipPopupProps = React.ComponentProps<typeof Tooltip.Popup> & {
@@ -48,7 +48,7 @@ declare const TooltipPopup: {
     className,
     variant,
     ...props
-  }: TooltipPopupProps): react_jsx_runtime181.JSX.Element;
+  }: TooltipPopupProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 type TooltipArrowProps = React.ComponentProps<typeof Tooltip.Arrow> & {
@@ -59,7 +59,7 @@ declare const TooltipArrow: {
     className,
     variant,
     ...props
-  }: TooltipArrowProps): react_jsx_runtime181.JSX.Element;
+  }: TooltipArrowProps): react_jsx_runtime143.JSX.Element;
   displayName: string;
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -118,6 +118,10 @@
       "import": "./dist/number-field.js",
       "types": "./dist/number-field.d.ts"
     },
+    "./pagination": {
+      "import": "./dist/pagination.js",
+      "types": "./dist/pagination.d.ts"
+    },
     "./popover": {
       "import": "./dist/popover.js",
       "types": "./dist/popover.d.ts"
@@ -166,6 +170,14 @@
       "import": "./dist/tabs.js",
       "types": "./dist/tabs.d.ts"
     },
+    "./table": {
+      "import": "./dist/table/index.js",
+      "types": "./dist/table/index.d.ts"
+    },
+    "./table/use-table": {
+      "import": "./dist/table/use-table.js",
+      "types": "./dist/table/use-table.d.ts"
+    },
     "./textarea": {
       "import": "./dist/textarea.js",
       "types": "./dist/textarea.d.ts"
@@ -210,15 +222,15 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.1.0",
-    "@types/node": "^25.0.10",
-    "@types/react": "^19.2.9",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "globals": "^17.1.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "tsdown": "^0.12.5",
+    "globals": "^17.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsdown": "^0.12.9",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.53.1"
+    "typescript-eslint": "^8.54.0"
   },
   "scripts": {
     "build": "tsdown"