@povio/ui 2.2.1 → 2.2.2

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -20,11 +20,10 @@ var CustomTrigger = ({ children, className, tabIndex }) => {
 	});
 };
 const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }) => {
-	const uiStyle = UIStyle.useConfig();
-	const tooltipCva$1 = uiStyle?.tooltip?.cva ?? tooltipCva;
-	const tooltipPointerHorizontalCva$1 = uiStyle?.tooltip?.pointerHorizontalCva ?? tooltipPointerHorizontalCva;
-	const tooltipPointerVerticalCva$1 = uiStyle?.tooltip?.pointerVerticalCva ?? tooltipPointerVerticalCva;
-	const tooltipTextCva$1 = uiStyle?.tooltip?.textCva ?? tooltipTextCva;
+	const tooltipCva$1 = UIStyle.useCva("tooltip.cva", tooltipCva);
+	const tooltipPointerHorizontalCva$1 = UIStyle.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalCva);
+	const tooltipPointerVerticalCva$1 = UIStyle.useCva("tooltip.pointerVerticalCva", tooltipPointerVerticalCva);
+	const tooltipTextCva$1 = UIStyle.useCva("tooltip.textCva", tooltipTextCva);
 	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment$1;
 	return /* @__PURE__ */ jsxs(TooltipTrigger, {
 		delay: delay ?? 0,

package/dist/components/segment/Segment.js

@@ -17,10 +17,9 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...
 		selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
 	};
 	const buttonGroupRef = useRef(null);
-	const uiStyle = UIStyle.useConfig();
 	const state = useToggleGroupState(props);
 	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
-	const segmentCva$1 = uiStyle?.segment?.cva ?? segmentCva;
+	const segmentCva$1 = UIStyle.useCva("segment.cva", segmentCva);
 	const formFieldProps = {
 		error,
 		label: "",

package/dist/components/segment/SegmentItem.js

@@ -6,7 +6,7 @@ import { ToggleButton } from "react-aria-components";
 const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
-	const segmentItemCva$1 = UIStyle.useConfig()?.segment?.itemCva ?? segmentItemCva;
+	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,

package/dist/components/status/Alert/Alert.js

@@ -5,10 +5,9 @@ import { alert } from "./alert.cva.js";
 import { statusIcon, statusSeparator } from "../shared/status.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
-	const uiStyle = UIStyle.useConfig();
-	const alertCva = uiStyle?.alert?.cva ?? alert;
-	const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
-	const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+	const alertCva = UIStyle.useCva("alert.cva", alert);
+	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
+	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
 	return /* @__PURE__ */ jsx("div", {
 		className: alertCva({
 			variant,

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

@@ -7,11 +7,10 @@ import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } fr
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
 const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const toastCva = uiStyle?.toast?.cva ?? toast$1;
-	const buttonColor = uiStyle?.toast?.buttonColor ?? buttonColorVariant;
-	const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
-	const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+	const toastCva = UIStyle.useCva("toast.cva", toast$1);
+	const buttonColor = UIStyle.useMapper("toast.buttonColor", buttonColorVariant);
+	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
+	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
 	return /* @__PURE__ */ jsxs("div", {
 		className: toastCva({ ...props }),
 		children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/table/Table.js

@@ -51,12 +51,15 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			zIndex: isDragging ? 1 : 0,
 			position: "relative"
 		},
-		"data-clickable": hasOnClick,
+		"data-clickable": hasOnClick || row.getCanSelect() || void 0,
 		"data-selected": row.getIsSelected() || void 0,
 		className: clsx(tableRowCva(props)),
 		onClick: () => {
-			row.toggleSelected();
-			onRowClick?.(row.original);
+			if (onRowClick) {
+				onRowClick(row.original);
+				return;
+			}
+			if (row.getCanSelect()) row.toggleSelected();
 		},
 		onDoubleClick: () => onDoubleClick?.(row.original),
 		children: row.getVisibleCells().map((cell, cellIndex) => {
@@ -70,11 +73,10 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 	});
 };
 const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const tableRowCva = uiStyle?.table?.rowCva ?? tableRow;
-	const tableHeadRowCva = uiStyle?.table?.headRowCva ?? tableHeadRow;
-	const tableHeadDataCva = uiStyle?.table?.headDataCva ?? tableHeadData;
-	const tableDataCva = uiStyle?.table?.dataCva ?? tableData;
+	const tableRowCva = UIStyle.useCva("table.rowCva", tableRow);
+	const tableHeadRowCva = UIStyle.useCva("table.headRowCva", tableHeadRow);
+	const tableHeadDataCva = UIStyle.useCva("table.headDataCva", tableHeadData);
+	const tableDataCva = UIStyle.useCva("table.dataCva", tableData);
 	const ref = useRef(null);
 	const { listeners } = useTableNav();
 	const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
@@ -228,11 +230,14 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 				return /* @__PURE__ */ jsx("tr", {
 					className: clsx(tableRowCva({ ...props })),
 					onClick: () => {
-						row.toggleSelected();
-						onRowClick?.(row.original);
+						if (onRowClick) {
+							onRowClick(row.original);
+							return;
+						}
+						if (row.getCanSelect()) row.toggleSelected();
 					},
 					onDoubleClick: () => onDoubleClick?.(row.original),
-					"data-clickable": hasOnClick,
+					"data-clickable": hasOnClick || row.getCanSelect() || void 0,
 					"data-selected": row.getIsSelected() || void 0,
 					children: row.getVisibleCells().map((cell, cellIndex) => {
 						const columnMeta = cell.column.columnDef.meta ?? {};

package/dist/components/text/Link/Link.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { Link } from "react-aria-components";
 const Link$1 = ({ variant, ...props }) => {
 	const linkContext = LinkContext.useLinkContext();
-	const linkCva = UIStyle.useConfig()?.link?.cva ?? link;
+	const linkCva = UIStyle.useCva("link.cva", link);
 	const LinkComponent = linkContext?.LinkComponent ?? Link;
 	if (!props.to && props.href) props.to = props.href;
 	return /* @__PURE__ */ jsx(LinkComponent, {

package/dist/components/text/Tag/Tag.js

@@ -8,7 +8,7 @@ import { clsx } from "clsx";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 const Tag = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, ...props }) => {
-	const tagCva = UIStyle.useConfig()?.tag?.cva ?? tag;
+	const tagCva = UIStyle.useCva("tag.cva", tag);
 	const { t } = useTranslation("ui");
 	const buttonProps = {
 		isDisabled,

package/dist/components/text/Typography/Typography.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, Ref } from 'react';
 import { TypographyVariantProps } from './typography.cva';
 type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
-interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
+export interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
 }
 export interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLHeadingElement>;

package/dist/components/text/Typography/Typography.js

@@ -3,7 +3,7 @@ import { typography } from "./typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 const Typography = ({ as = "p", className, ...props }) => {
 	return /* @__PURE__ */ jsx(as, {
-		className: (UIStyle.useConfig()?.typography?.cva ?? typography)({
+		className: UIStyle.useCva("typography.cva", typography)({
 			...props,
 			sizeMobile: props.sizeMobile ?? props.size,
 			className

package/dist/config/uiConfig.context.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
 import { NumberInputProps } from '../components/inputs/Input/NumberInput/NumberInput';
@@ -7,12 +8,14 @@ import { RadioGroupProps } from '../components/inputs/RadioGroup/RadioGroup';
 import { SelectBaseProps } from '../components/inputs/Selection/shared/SelectBase';
 import { SliderProps } from '../components/inputs/Slider/Slider';
 import { ToggleProps } from '../components/inputs/Toggle/Toggle';
+import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
+        button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
@@ -20,6 +23,7 @@ export declare namespace UIConfig {
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/config/uiConfig.context.js

@@ -12,6 +12,10 @@ let UIConfig;
 			isClearable: false,
 			hideLabel: false
 		},
+		button: {
+			variant: "contained",
+			size: "m"
+		},
 		numberInput: { formatOptions: {
 			minimumFractionDigits: 0,
 			maximumFractionDigits: 3
@@ -36,6 +40,13 @@ let UIConfig;
 			todayIcon: false,
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false
+		},
+		actionModal: {
+			titleTypography: {
+				size: "title-5",
+				variant: "prominent-1"
+			},
+			descriptionTypography: { size: "body-3" }
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);

package/dist/config/uiStyle.context.d.ts

@@ -20,9 +20,12 @@ import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantPr
 import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
-import { CompoundMapper } from '../utils/compoundMapper';
+import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
 export declare namespace UIStyle {
-    export type Cva<T> = (props: T & ClassProp) => string;
+    export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
+    type OptionKey = {
+        [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
+    }[keyof Options];
     interface Options {
         button: {
             cva?: Cva<ButtonVariantProps>;
@@ -137,6 +140,7 @@ export declare namespace UIStyle {
         config?: Partial<Options>;
     }
     export const Provider: ({ children, config }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
-    export const useConfig: () => Partial<Options> | null | undefined;
+    export const useCva: <T>(key: OptionKey, fallback: Cva<T>) => Cva<T>;
+    export const useMapper: <T, K extends ConfigSchema>(key: OptionKey, fallback: CompoundMapper<T, K>) => CompoundMapper<T, K>;
     export {};
 }

package/dist/config/uiStyle.context.js

@@ -9,8 +9,20 @@ let UIStyle;
 			children
 		});
 	};
-	_UIStyle.useConfig = () => {
+	const useConfig = () => {
 		return use(Context);
 	};
+	_UIStyle.useCva = (key, fallback) => {
+		const uiStyle = useConfig();
+		if (!uiStyle) return fallback;
+		const [k1, k2] = key.split(".");
+		return uiStyle[k1]?.[k2] ?? fallback;
+	};
+	_UIStyle.useMapper = (key, fallback) => {
+		const uiStyle = useConfig();
+		if (!uiStyle) return fallback;
+		const [k1, k2] = key.split(".");
+		return uiStyle[k1]?.[k2] ?? fallback;
+	};
 })(UIStyle || (UIStyle = {}));
 export { UIStyle };

package/dist/index.js

@@ -45,6 +45,10 @@ import { Tooltip } from "./components/overlays/Tooltip/Tooltip.js";
 import { LinkContext } from "./config/link.context.js";
 import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs.js";
 import { Loader } from "./components/status/Loader/Loader.js";
+import { ObjectUtils } from "./utils/object.utils.js";
+import { isEqual } from "./utils/isEqual.js";
+import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./hooks/useDeepCompare.js";
+import { UIConfig } from "./config/uiConfig.context.js";
 import { uiOutlineClass } from "./components/outline.clsx.js";
 import { compoundMapper } from "./utils/compoundMapper.js";
 import { Button } from "./components/buttons/Button/Button.js";
@@ -58,10 +62,6 @@ import { Menu } from "./components/Menu/Menu.js";
 import { SplitButton } from "./components/buttons/SplitButton/SplitButton.js";
 import { TextButton } from "./components/buttons/TextButton/TextButton.js";
 import { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton.js";
-import { ObjectUtils } from "./utils/object.utils.js";
-import { isEqual } from "./utils/isEqual.js";
-import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./hooks/useDeepCompare.js";
-import { UIConfig } from "./config/uiConfig.context.js";
 import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";

package/dist/tw-ui-plugin.d.ts

@@ -0,0 +1,3 @@
+import { default as plugin } from 'tailwindcss/plugin';
+declare const uiPlugin: ReturnType<typeof plugin>;
+export default uiPlugin;

package/dist/utils/compoundMapper.d.ts

@@ -1,7 +1,7 @@
 interface Prop<T> {
     value: T;
 }
-type ConfigSchema = Record<string, any>;
+export type ConfigSchema = Record<string, any>;
 type ConfigVariants<T extends ConfigSchema> = {
     [Variant in keyof T]?: T[Variant] | null | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,18 +17,18 @@
   "peerDependencies": {
     "@casl/ability": "^6.7.3",
     "@casl/react": "^5.0.0",
-    "@tiptap/core": "^2.26.3",
-    "@tiptap/extension-color": "^2.26.3",
-    "@tiptap/extension-heading": "^2.26.3",
-    "@tiptap/extension-highlight": "^2.26.3",
-    "@tiptap/extension-link": "^2.26.3",
-    "@tiptap/extension-placeholder": "^2.26.3",
-    "@tiptap/extension-text-align": "^2.26.3",
-    "@tiptap/extension-text-style": "^2.26.3",
-    "@tiptap/extension-underline": "^2.26.3",
-    "@tiptap/pm": "^2.26.3",
-    "@tiptap/react": "^2.26.3",
-    "@tiptap/starter-kit": "^2.26.3",
+    "@tiptap/core": "^3.19.0",
+    "@tiptap/extension-color": "^3.19.0",
+    "@tiptap/extension-heading": "^3.19.0",
+    "@tiptap/extension-highlight": "^3.19.0",
+    "@tiptap/extension-link": "^3.19.0",
+    "@tiptap/extension-placeholder": "^3.19.0",
+    "@tiptap/extension-text-align": "^3.19.0",
+    "@tiptap/extension-text-style": "^3.19.0",
+    "@tiptap/extension-underline": "^3.19.0",
+    "@tiptap/pm": "^3.19.0",
+    "@tiptap/react": "^3.19.0",
+    "@tiptap/starter-kit": "^3.19.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
@@ -38,15 +38,15 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
-    "@internationalized/date": "^3.10.1",
-    "@react-aria/button": "^3.14.3",
-    "@react-aria/calendar": "^3.9.3",
-    "@react-aria/focus": "^3.21.3",
-    "@react-aria/i18n": "^3.12.14",
-    "@react-aria/utils": "^3.32.0",
-    "@react-stately/calendar": "^3.9.1",
-    "@react-stately/datepicker": "^3.15.3",
-    "@react-types/shared": "^3.32.1",
+    "@internationalized/date": "^3.11.0",
+    "@react-aria/button": "^3.14.4",
+    "@react-aria/calendar": "^3.9.4",
+    "@react-aria/focus": "^3.21.4",
+    "@react-aria/i18n": "^3.12.15",
+    "@react-aria/utils": "^3.33.0",
+    "@react-stately/calendar": "^3.9.2",
+    "@react-stately/datepicker": "^3.16.0",
+    "@react-types/shared": "^3.33.0",
     "@tanstack/react-query": "~5.89.0",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.13.2",
@@ -57,14 +57,13 @@
     "loglevel-plugin-prefix": "^0.8.4",
     "luxon": "^3.7.2",
     "motion": "~12.23.24",
-    "react-aria": "^3.44.0",
-    "react-aria-components": "^1.13.0",
+    "react-aria": "^3.46.0",
+    "react-aria-components": "^1.15.1",
     "react-hook-form": "^7.65.0",
     "react-i18next": "^16.5.1",
     "react-responsive": "^10.0.1",
-    "react-stately": "^3.42.0",
+    "react-stately": "^3.44.0",
     "react-toastify": "^11.0.5",
-    "react-use-measure": "^2.1.7",
     "tailwindcss": "^4.1.18",
     "tailwindcss-react-aria-components": "^2.0.1",
     "zod": "^4.3.5"