/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b04eed0 | Cube Dev Team */
import { mergeStyles } from "@tenphi/tasty";
import { useMemo } from "react";

//#region src/utils/react/useMergeStyles.ts
/**
* Hook to merge base styles with sub-element style props.
*
* This simplifies the common pattern of accepting props like `tabListStyles`,
* `prefixStyles`, etc. that should merge into `styles.TabList`, `styles.Prefix`, etc.
*
* @param styles - Base styles object
* @param subStylesMap - Mapping of sub-element names to their additional styles
* @returns Merged styles object
*
* @example
* ```tsx
* const { styles, tabListStyles, prefixStyles, suffixStyles, ...rest } = props;
*
* const mergedStyles = useMergeStyles(styles, {
*   TabList: tabListStyles,
*   Prefix: prefixStyles,
*   Suffix: suffixStyles,
* });
*
* return <TabsElement styles={mergedStyles} {...rest} />;
* ```
*/
function useMergeStyles(styles, subStylesMap) {
	return useMemo(() => {
		const subStyles = {};
		for (const [element, elementStyles] of Object.entries(subStylesMap)) if (elementStyles != null) subStyles[element] = elementStyles;
		return mergeStyles(styles, subStyles);
	}, [styles, ...Object.values(subStylesMap)]);
}

//#endregion
export { useMergeStyles };
//# sourceMappingURL=useMergeStyles.js.map