@povio/ui 3.4.0-rc.17 → 3.4.0-rc.19

package/dist/components/segment.d.ts

@@ -1,7 +1,3 @@
-import { FieldValues } from "./inputs/shared/form.binding.js";
-import { ControlledSegmentProps } from "./segment/segment.types.js";
-import { Key } from "react-aria-components";
-//#region src/components/segment/Segment.d.ts
-declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Segment };
+import { ControlledSegmentProps, SegmentProps } from "./segment/segment.types.js";
+import { Segment } from "./segment/Segment.js";
+export { type ControlledSegmentProps, Segment, type SegmentProps };

package/dist/components/segment.js

@@ -1,245 +1,2 @@
-import { UIOverrides } from "../config/uiOverrides.context.js";
-import { FieldController } from "./inputs/shared/form.binding.js";
-import { FormField } from "./form-field.js";
-import { segmentDefinition } from "./segment/segment.cva.js";
-import { SegmentItem } from "./segment/SegmentItem.js";
-import { c } from "react/compiler-runtime";
-import { clsx } from "clsx";
-import { Fragment, useRef } from "react";
-import { ToggleButtonGroup } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useToggleButtonGroup } from "react-aria";
-import { mergeRefs } from "@react-aria/utils";
-import { useToggleGroupState } from "react-stately";
-//#region src/components/segment/Segment.tsx
-const SegmentBase = (t0) => {
-	const $ = c(49);
-	let className;
-	let defaultValue;
-	let error;
-	let items;
-	let onChange;
-	let rest;
-	let segmentItemClassName;
-	let value;
-	if ($[0] !== t0) {
-		({className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = defaultValue;
-		$[3] = error;
-		$[4] = items;
-		$[5] = onChange;
-		$[6] = rest;
-		$[7] = segmentItemClassName;
-		$[8] = value;
-	} else {
-		className = $[1];
-		defaultValue = $[2];
-		error = $[3];
-		items = $[4];
-		onChange = $[5];
-		rest = $[6];
-		segmentItemClassName = $[7];
-		value = $[8];
-	}
-	let t1;
-	if ($[9] !== defaultValue) {
-		t1 = defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0;
-		$[9] = defaultValue;
-		$[10] = t1;
-	} else t1 = $[10];
-	let t2;
-	if ($[11] !== value) {
-		t2 = value ? Array.isArray(value) ? value : [value] : void 0;
-		$[11] = value;
-		$[12] = t2;
-	} else t2 = $[12];
-	let t3;
-	if ($[13] !== rest || $[14] !== t1 || $[15] !== t2) {
-		t3 = {
-			...rest,
-			defaultSelectedKeys: t1,
-			selectedKeys: t2
-		};
-		$[13] = rest;
-		$[14] = t1;
-		$[15] = t2;
-		$[16] = t3;
-	} else t3 = $[16];
-	const props = t3;
-	const buttonGroupRef = useRef(null);
-	const state = useToggleGroupState(props);
-	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
-	const segmentCva = UIOverrides.useCva("segment.cva", segmentDefinition);
-	let t4;
-	if ($[17] !== error || $[18] !== props.isDisabled) {
-		t4 = {
-			error,
-			label: "",
-			hideLabel: true,
-			isDisabled: props.isDisabled
-		};
-		$[17] = error;
-		$[18] = props.isDisabled;
-		$[19] = t4;
-	} else t4 = $[19];
-	const formFieldProps = t4;
-	let t5;
-	if ($[20] !== onChange || $[21] !== props.selectionMode) {
-		t5 = (keys) => {
-			if (props.selectionMode === "multiple") onChange?.(Array.from(keys.values()));
-			else onChange?.(Array.from(keys.values())[0]);
-		};
-		$[20] = onChange;
-		$[21] = props.selectionMode;
-		$[22] = t5;
-	} else t5 = $[22];
-	const onSelectionChange = t5;
-	let t6;
-	if ($[23] !== items.length) {
-		t6 = items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, _temp).join(" ") : `repeat(${items.length}, 1fr)`;
-		$[23] = items.length;
-		$[24] = t6;
-	} else t6 = $[24];
-	const gridTemplateColumns = t6;
-	let t7;
-	if ($[25] !== className) {
-		t7 = clsx("relative w-full", className);
-		$[25] = className;
-		$[26] = t7;
-	} else t7 = $[26];
-	let t8;
-	if ($[27] !== className || $[28] !== props || $[29] !== segmentCva) {
-		t8 = segmentCva({
-			...props,
-			className
-		});
-		$[27] = className;
-		$[28] = props;
-		$[29] = segmentCva;
-		$[30] = t8;
-	} else t8 = $[30];
-	let t9;
-	if ($[31] !== gridTemplateColumns) {
-		t9 = { gridTemplateColumns };
-		$[31] = gridTemplateColumns;
-		$[32] = t9;
-	} else t9 = $[32];
-	let t10;
-	if ($[33] !== items || $[34] !== props.isDisabled || $[35] !== segmentItemClassName || $[36] !== state) {
-		t10 = items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SegmentItem, {
-			...item,
-			className: clsx(item.className, segmentItemClassName),
-			isDisabled: item.isDisabled || props.isDisabled,
-			isSelected: state.selectedKeys.has(item.id),
-			onPress: () => {
-				state.toggleKey(item.id);
-			}
-		}), index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx("div", {
-			className: clsx("h-5 w-px rounded-2xl", !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"),
-			children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
-		})] }, item.id));
-		$[33] = items;
-		$[34] = props.isDisabled;
-		$[35] = segmentItemClassName;
-		$[36] = state;
-		$[37] = t10;
-	} else t10 = $[37];
-	let t11;
-	if ($[38] !== groupProps || $[39] !== onSelectionChange || $[40] !== props || $[41] !== t10 || $[42] !== t8 || $[43] !== t9) {
-		t11 = /* @__PURE__ */ jsx(ToggleButtonGroup, {
-			...props,
-			...groupProps,
-			ref: buttonGroupRef,
-			onSelectionChange,
-			className: t8,
-			style: t9,
-			children: t10
-		});
-		$[38] = groupProps;
-		$[39] = onSelectionChange;
-		$[40] = props;
-		$[41] = t10;
-		$[42] = t8;
-		$[43] = t9;
-		$[44] = t11;
-	} else t11 = $[44];
-	let t12;
-	if ($[45] !== formFieldProps || $[46] !== t11 || $[47] !== t7) {
-		t12 = /* @__PURE__ */ jsx(FormField, {
-			...formFieldProps,
-			className: t7,
-			children: t11
-		});
-		$[45] = formFieldProps;
-		$[46] = t11;
-		$[47] = t7;
-		$[48] = t12;
-	} else t12 = $[48];
-	return t12;
-};
-const Segment = (props) => {
-	const $ = c(15);
-	if ("field" in props && props.field) {
-		let field;
-		let innerProps;
-		let ref;
-		if ($[0] !== props) {
-			({field, ref, ...innerProps} = props);
-			$[0] = props;
-			$[1] = field;
-			$[2] = innerProps;
-			$[3] = ref;
-		} else {
-			field = $[1];
-			innerProps = $[2];
-			ref = $[3];
-		}
-		let t0;
-		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
-			t0 = (t1) => {
-				const { field: field_0, fieldState: t2 } = t1;
-				const { error } = t2;
-				return /* @__PURE__ */ jsx(SegmentBase, {
-					...innerProps,
-					ref: mergeRefs(ref, field_0.ref),
-					value: field_0.value,
-					onChange: field_0.onChange,
-					isDisabled: field_0.disabled || props.isDisabled,
-					error: props.error ?? error?.message
-				});
-			};
-			$[4] = innerProps;
-			$[5] = props.error;
-			$[6] = props.isDisabled;
-			$[7] = ref;
-			$[8] = t0;
-		} else t0 = $[8];
-		let t1;
-		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(FieldController, {
-				control: field.form,
-				name: field.name,
-				render: t0
-			});
-			$[9] = field.form;
-			$[10] = field.name;
-			$[11] = t0;
-			$[12] = t1;
-		} else t1 = $[12];
-		return t1;
-	}
-	let t0;
-	if ($[13] !== props) {
-		t0 = /* @__PURE__ */ jsx(SegmentBase, { ...props });
-		$[13] = props;
-		$[14] = t0;
-	} else t0 = $[14];
-	return t0;
-};
-function _temp(_, i) {
-	return i % 2 === 0 ? "1fr" : "auto";
-}
-//#endregion
+import { Segment } from "./segment/Segment.js";
 export { Segment };

package/dist/components/slider.js

@@ -1,4 +1,4 @@
-import { Typography } from "./typography.js";
+import { Typography } from "./text/Typography/Typography.js";
 import { UIConfig } from "../config/uiConfig.context.js";
 import { uiOutlineClass } from "./outline.clsx.js";
 import { FieldController } from "./inputs/shared/form.binding.js";

package/dist/components/split-button.d.ts

@@ -1,6 +1,6 @@
 import { LinkNavigationProps } from "./link.js";
-import { MenuItem as MenuItem$1 } from "./menu.js";
 import { ButtonVariantProps } from "./buttons/Button/button.cva.js";
+import { MenuItem as MenuItem$1 } from "./Menu/Menu.js";
 import { ButtonProps } from "react-aria-components";
 //#region src/components/buttons/SplitButton/SplitButton.d.ts
 interface SplitButtonProps extends ButtonVariantProps, Omit<ButtonProps, "children"> {

package/dist/components/split-button.js

@@ -1,6 +1,6 @@
 import { Button } from "./buttons/Button/Button.js";
 import { IconButton } from "./icon-button.js";
-import { Menu } from "./menu.js";
+import { Menu } from "./Menu/Menu.js";
 import { ChevronDown } from "lucide-react";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";

package/dist/components/status/Toast/Toast.d.ts

@@ -0,0 +1,17 @@
+import { ToastVariantProps } from "./toast.cva.js";
+import { FC, ReactNode, SVGProps } from "react";
+//#region src/components/status/Toast/Toast.d.ts
+interface ToastAction {
+  text: string;
+  onPress: () => void;
+}
+interface ToastProps extends ToastVariantProps {
+  text: ReactNode;
+  isLoading?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
+  actions?: ToastAction[];
+}
+declare const Toast: ({ text, isLoading, actions, icon: Icon, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToastContainer: () => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Toast, ToastAction, ToastContainer, ToastProps };

package/dist/components/status/Toast/Toast.js

@@ -0,0 +1,82 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { Loader } from "../../loader.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { Button } from "../../buttons/Button/Button.js";
+import { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainerDefinition, toastDefinition, toastWrapper } from "./toast.cva.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ToastContainer } from "react-toastify";
+//#region src/components/status/Toast/Toast.tsx
+const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.toast.variant, ...restProps } = props;
+	const toastCva = UIOverrides.useCva("toast.cva", toastDefinition);
+	const buttonColor = UIOverrides.useMapper("toast.buttonColor", buttonColorVariant);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
+	const variantProps = {
+		variant,
+		...restProps
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: toastCva(variantProps),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-toast-gap-icon-to-text px-toast-side-default py-toast-height-content",
+			children: [
+				isLoading && /* @__PURE__ */ jsx(Loader, {
+					size: "default",
+					className: "shrink-0"
+				}),
+				!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva(variantProps) }),
+				/* @__PURE__ */ jsx(Typography, {
+					size: "label-2",
+					children: text
+				})
+			]
+		}), actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: separatorCva(variantProps) }), /* @__PURE__ */ jsx("div", {
+			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-toast-side-default py-toast-height-actions-mobile md:w-auto md:justify-center md:py-toast-height-actions-desktop",
+			children: actions.map(({ text: buttonText, onPress }) => /* @__PURE__ */ jsx(Button, {
+				onPress,
+				...buttonColor(variantProps),
+				variant: "text",
+				size: "none",
+				width: "hug",
+				children: buttonText
+			}, buttonText))
+		})] })]
+	});
+};
+const ToastContainer$1 = () => {
+	const $ = c(6);
+	const uiConfig = UIConfig.useConfig();
+	const containerCva = UIOverrides.useCva("toast.containerCva", toastContainerDefinition);
+	let t0;
+	if ($[0] !== containerCva || $[1] !== uiConfig.toast.position) {
+		t0 = (params) => containerCva({
+			position: params?.position ?? uiConfig.toast.position,
+			className: params?.defaultClassName
+		});
+		$[0] = containerCva;
+		$[1] = uiConfig.toast.position;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0 || $[4] !== uiConfig.toast.position) {
+		t1 = /* @__PURE__ */ jsx(ToastContainer, {
+			position: uiConfig.toast.position,
+			className: t0,
+			toastClassName: toastWrapper,
+			autoClose: 2500,
+			icon: false,
+			closeButton: false,
+			hideProgressBar: true
+		});
+		$[3] = t0;
+		$[4] = uiConfig.toast.position;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+};
+//#endregion
+export { Toast, ToastContainer$1 as ToastContainer };

package/dist/components/stepper.d.ts

@@ -1,5 +1,3 @@
-import { StepperProps } from "./navigation/Stepper/stepper.types.js";
-//#region src/components/navigation/Stepper/Stepper.d.ts
-declare const Stepper: ({ steps, currentStep, orientation, contentOrientation, iconsOnly, titlesOnly, onStepClick, className }: StepperProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Stepper };
+import { StepItem, StepperProps } from "./navigation/Stepper/stepper.types.js";
+import { Stepper } from "./navigation/Stepper/Stepper.js";
+export { type StepItem, Stepper, type StepperProps };

package/dist/components/stepper.js

@@ -1,79 +1,2 @@
-import { UIOverrides } from "../config/uiOverrides.context.js";
-import { stepperDefinition } from "./navigation/Stepper/stepper.cva.js";
-import { StepperItem } from "./navigation/Stepper/StepperItem.js";
-import { StepperSeparator } from "./navigation/Stepper/StepperSeparator.js";
-import { c } from "react/compiler-runtime";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/navigation/Stepper/Stepper.tsx
-const Stepper = (t0) => {
-	const $ = c(23);
-	const { steps, currentStep, orientation: t1, contentOrientation: t2, iconsOnly, titlesOnly, onStepClick, className } = t0;
-	const orientation = t1 === void 0 ? "horizontal" : t1;
-	const contentOrientation = t2 === void 0 ? "horizontal" : t2;
-	const stepperCva = UIOverrides.useCva("stepper.cva", stepperDefinition);
-	let t3;
-	if ($[0] !== className || $[1] !== orientation || $[2] !== stepperCva) {
-		t3 = stepperCva({
-			orientation,
-			className
-		});
-		$[0] = className;
-		$[1] = orientation;
-		$[2] = stepperCva;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== contentOrientation || $[5] !== currentStep || $[6] !== iconsOnly || $[7] !== onStepClick || $[8] !== orientation || $[9] !== steps || $[10] !== titlesOnly) {
-		let t5;
-		if ($[12] !== contentOrientation || $[13] !== currentStep || $[14] !== iconsOnly || $[15] !== onStepClick || $[16] !== orientation || $[17] !== steps.length || $[18] !== titlesOnly) {
-			t5 = (step, index) => {
-				const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
-				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StepperItem, {
-					step,
-					stepNumber: index + 1,
-					status,
-					contentOrientation,
-					iconsOnly,
-					titlesOnly,
-					onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
-				}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
-					orientation,
-					contentOrientation
-				})] }, step.id);
-			};
-			$[12] = contentOrientation;
-			$[13] = currentStep;
-			$[14] = iconsOnly;
-			$[15] = onStepClick;
-			$[16] = orientation;
-			$[17] = steps.length;
-			$[18] = titlesOnly;
-			$[19] = t5;
-		} else t5 = $[19];
-		t4 = steps.map(t5);
-		$[4] = contentOrientation;
-		$[5] = currentStep;
-		$[6] = iconsOnly;
-		$[7] = onStepClick;
-		$[8] = orientation;
-		$[9] = steps;
-		$[10] = titlesOnly;
-		$[11] = t4;
-	} else t4 = $[11];
-	let t5;
-	if ($[20] !== t3 || $[21] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: t3,
-			role: "group",
-			"aria-label": "Progress",
-			children: t4
-		});
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
-	return t5;
-};
-//#endregion
+import { Stepper } from "./navigation/Stepper/Stepper.js";
 export { Stepper };

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

@@ -1,4 +1,4 @@
-import { TypographyProps } from "../typography.js";
+import { TypographyProps } from "../text/Typography/Typography.js";
 import { CSSProperties, FC, ReactNode } from "react";
 //#region src/components/table/CellText.d.ts
 interface CellTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {

package/dist/components/table/CellText.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
-import { Typography } from "../typography.js";
+import { Typography } from "../text/Typography/Typography.js";
 import { UIConfig } from "../../config/uiConfig.context.js";
 import { tableCellTextDefinition } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,13 +1,15 @@
-import { ColumnDef, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import { ColumnDef, ColumnOrderState, ColumnVisibilityState, RowData, StockFeatures } from "@tanstack/react-table";
 //#region src/components/table/ColumnConfig.d.ts
-interface ColumnConfigModalProps<TData, TValue> {
+type ColumnDef$1<TData extends RowData, TValue = unknown> = ColumnDef<StockFeatures, TData, TValue>;
+type VisibilityState = ColumnVisibilityState;
+interface ColumnConfigModalProps<TData extends RowData, TValue> {
   isOpen: boolean;
   onClose: () => void;
-  configColumns: ColumnDef<TData, TValue>[];
+  configColumns: ColumnDef$1<TData, TValue>[];
   visibleColumns: VisibilityState;
   onVisibilityChange: (visibleColumns: VisibilityState) => void;
   onOrderChange: (columnOrder: ColumnOrderState) => void;
 }
-declare function ColumnConfigModal<TData, TValue>({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }: ColumnConfigModalProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;
+declare function ColumnConfigModal<TData extends RowData, TValue>({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }: ColumnConfigModalProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 export { ColumnConfigModal, ColumnConfigModalProps };

package/dist/components/table/ColumnConfig.js

@@ -1,4 +1,4 @@
-import { Typography } from "../typography.js";
+import { Typography } from "../text/Typography/Typography.js";
 import "../../config/i18n.js";
 import { Checkbox } from "../checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";

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

@@ -1,4 +1,4 @@
-import { TypographyProps } from "../typography.js";
+import { TypographyProps } from "../text/Typography/Typography.js";
 import { CSSProperties, FC, ReactNode } from "react";
 //#region src/components/table/HeaderText.d.ts
 interface HeaderTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {

package/dist/components/table/HeaderText.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
-import { Typography } from "../typography.js";
+import { Typography } from "../text/Typography/Typography.js";
 import { UIConfig } from "../../config/uiConfig.context.js";
 import { tableHeaderTextDefinition } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,11 +1,12 @@
 import { TableProps } from "./Table.js";
+import { RowData } from "@tanstack/react-table";
 //#region src/components/table/InfiniteTable.d.ts
-interface InfiniteTableWrapperProps<T> extends Omit<InfiniteTableProps<T>, "columns"> {}
-interface InfiniteTableProps<T> extends TableProps<T> {
+interface InfiniteTableWrapperProps<T extends RowData> extends Omit<InfiniteTableProps<T>, "columns"> {}
+interface InfiniteTableProps<T extends RowData> extends TableProps<T> {
   hasNextPage: boolean;
   isFetchingNextPage?: boolean;
   fetchNextPage: () => void;
 }
-declare const InfiniteTable: <T>({ hasNextPage, isFetchingNextPage, fetchNextPage, ...rest }: InfiniteTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const InfiniteTable: <T extends RowData>({ hasNextPage, isFetchingNextPage, fetchNextPage, ...rest }: InfiniteTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { InfiniteTable, InfiniteTableProps, InfiniteTableWrapperProps };

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

@@ -1,13 +1,13 @@
 import { TableProps } from "./Table.js";
 import { Dispatch, SetStateAction } from "react";
-import { PaginationState } from "@tanstack/react-table";
+import { PaginationState, RowData } from "@tanstack/react-table";
 //#region src/components/table/PaginatedTable.d.ts
-interface PaginatedTableWrapperProps<T> extends Omit<PaginatedTableProps<T>, "columns"> {}
-interface PaginatedTableProps<T> extends TableProps<T> {
+interface PaginatedTableWrapperProps<T extends RowData> extends Omit<PaginatedTableProps<T>, "columns"> {}
+interface PaginatedTableProps<T extends RowData> extends TableProps<T> {
   totalItems: number;
   pagination: PaginationState;
   setPagination: Dispatch<SetStateAction<PaginationState>>;
 }
-declare const PaginatedTable: <T>({ pagination, setPagination, items, totalItems, ...rest }: PaginatedTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PaginatedTable: <T extends RowData>({ pagination, setPagination, items, totalItems, ...rest }: PaginatedTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { PaginatedTable, PaginatedTableProps, PaginatedTableWrapperProps };

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

@@ -1,16 +1,20 @@
 import { TableRowVariantProps } from "./table.cva.js";
 import { ComponentType, Dispatch, SetStateAction } from "react";
 import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
-import { ColumnDef, ColumnOrderState, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState } from "@tanstack/react-table";
+import { ColumnDef, ColumnOrderState, ColumnVisibilityState, OnChangeFn, Row, RowData, RowSelectionState, SortingState, StockFeatures, Table } from "@tanstack/react-table";
 import { TFunction } from "i18next";
 //#region src/components/table/Table.d.ts
-type BulkSelectionActionsComponent<T> = ComponentType<{
-  table: Table<T>;
+type ColumnDef$1<TData extends RowData, TValue = unknown> = ColumnDef<StockFeatures, TData, TValue>;
+type ReactTable<TData extends RowData> = Table<StockFeatures, TData>;
+type Row$1<TData extends RowData> = Row<StockFeatures, TData>;
+type VisibilityState = ColumnVisibilityState;
+type BulkSelectionActionsComponent<T extends RowData> = ComponentType<{
+  table: ReactTable<T>;
 }>;
-interface TableWrapperProps<T> extends Omit<TableProps<T>, "columns"> {}
-interface TableProps<T> extends TableRowVariantProps {
+interface TableWrapperProps<T extends RowData> extends Omit<TableProps<T>, "columns"> {}
+interface TableProps<T extends RowData> extends TableRowVariantProps {
   items: T[];
-  columns: ((t: TFunction) => ColumnDef<T>[]) | ColumnDef<T>[];
+  columns: ((t: TFunction) => ColumnDef$1<T>[]) | ColumnDef$1<T>[];
   showCellBorder?: boolean;
   onRowClick?: (row: T) => void;
   onDoubleClick?: (row: T) => void;
@@ -26,11 +30,11 @@ interface TableProps<T> extends TableRowVariantProps {
   onDragEnd?: (event: DragEndEvent) => void;
   onReorder?: (reorderedItems: T[]) => void;
   getRowId?: (row: T) => UniqueIdentifier;
-  enableRowSelection?: boolean | ((row: Row<T>) => boolean);
-  enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
+  enableRowSelection?: boolean | ((row: Row$1<T>) => boolean);
+  enableMultiRowSelection?: boolean | ((row: Row$1<T>) => boolean);
   defaultSelectedRows?: RowSelectionState;
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
 }
-declare const Table$1: <T>({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection, defaultSelectedRows, onRowSelectionChange, ...props }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table$1: <T extends RowData>({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection, defaultSelectedRows, onRowSelectionChange, ...props }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { BulkSelectionActionsComponent, Table$1 as Table, TableProps, TableWrapperProps };

package/dist/components/table/Table.js

@@ -14,9 +14,14 @@ import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, us
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { createPaginatedRowModel, createSortedRowModel, flexRender, stockFeatures, tableFeatures, useTable } from "@tanstack/react-table";
 import i18next from "i18next";
 //#region src/components/table/Table.tsx
+const tableFeaturesConfig = tableFeatures({
+	...stockFeatures,
+	sortedRowModel: createSortedRowModel(),
+	paginatedRowModel: createPaginatedRowModel()
+});
 const CustomCellContext = (context) => {
 	return {
 		...context,
@@ -81,9 +86,6 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 	const tableDataCva = UIOverrides.useCva("table.dataCva", tableDataDefinition);
 	const ref = useRef(null);
 	const { listeners } = useTableNav();
-	const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
-	const getSortedRowModelCallback = useCallback(getSortedRowModel, []);
-	const getPaginationRowModelCallback = useCallback(getPaginationRowModel, []);
 	const data = useMemo(() => items ?? [], [items]);
 	const [internalSelectedRows, setInternalSelectedRows] = useState({});
 	const { rowSelection, handleRowSelectionChange } = useMemo(() => {
@@ -117,7 +119,8 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 		setIsSticky(entry.intersectionRatio < 1);
 	}, []);
 	const { ref: stickyRef } = useIntersectionObserver({ onIntersectionChange });
-	const table = useReactTable({
+	const table = useTable({
+		features: tableFeaturesConfig,
 		data,
 		columns: tableColumns,
 		state: {
@@ -127,9 +130,6 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 			rowSelection
 		},
 		rowCount: items.length,
-		getCoreRowModel: getCoreRowModelCallback(),
-		getSortedRowModel: getSortedRowModelCallback(),
-		getPaginationRowModel: getPaginationRowModelCallback(),
 		manualPagination: true,
 		onColumnOrderChange: setColumnOrder,
 		onColumnVisibilityChange: setColumnVisibility,