@ramses-superapp/ramses-ui/src/hooks/useThemedStyles.ts

Skinless UI primitives for Ramses Built Apps

import { useMemo } from 'react';
import { useTheme } from './ThemeProvider';
import type { Theme } from '../styles/types';

/**
 * useThemedStyles - Memoize theme-aware styles with optional dynamic inputs.
 * @param styleFn - (theme, ...args) => StyleSheet object
 * @param deps - Array of dependencies (besides theme) to trigger recalculation
 * @returns Memoized style object
 */
export function useThemedStyles<Args extends any[], Styles>(
  styleFn: (theme: Theme, ...args: Args) => Styles,
  ...args: Args
): Styles {
  const theme = useTheme();
  // Memoize styles based on theme and args
  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useMemo(() => styleFn(theme, ...args), [theme, ...args]);
}