refactor(components): separate AdvancedRating from Rating theming (#1109)

* refactor(components): separate theme  `RatingAdvanced` from `Rating` since they cant ever be coupled

* fix typo

---------

Co-authored-by: Sebastian Sutu <sebastian.sutu@sensidev.com>
Co-authored-by: Sebastian Sutu <sebastian.sutu@stainless-code.com>

Author: 3 people

content/docs/components/rating.mdx

@@ -47,8 +47,14 @@ Use this component as an advanced layout for user ratings that include both the
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
 
+### Rating theme
+
 <Theme name="rating" />
 
+### Advanced rating theme
+
+<Theme name="ratingAdvanced" />
+
 ## References
 
 - [Flowbite Rating](https://flowbite.com/docs/components/rating/)

src/components/Flowbite/FlowbiteTheme.ts

@@ -25,7 +25,7 @@ import type { FlowbitePaginationTheme } from '../Pagination';
 import type { FlowbiteProgressTheme } from '../Progress';
 import type { FlowbiteRadioTheme } from '../Radio';
 import type { FlowbiteRangeSliderTheme } from '../RangeSlider';
-import type { FlowbiteRatingTheme } from '../Rating';
+import type { FlowbiteRatingAdvancedTheme, FlowbiteRatingTheme } from '../Rating';
 import type { FlowbiteSelectTheme } from '../Select';
 import type { FlowbiteSidebarTheme } from '../Sidebar';
 import type { FlowbiteSpinnerTheme } from '../Spinner';
@@ -59,6 +59,7 @@ export interface FlowbiteTheme {
   modal: FlowbiteModalTheme;
   navbar: FlowbiteNavbarTheme;
   rating: FlowbiteRatingTheme;
+  ratingAdvanced: FlowbiteRatingAdvancedTheme;
   pagination: FlowbitePaginationTheme;
   sidebar: FlowbiteSidebarTheme;
   progress: FlowbiteProgressTheme;

src/components/Rating/Rating.tsx

@@ -5,7 +5,6 @@ import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
-import type { FlowbiteRatingAdvancedTheme } from './RatingAdvanced';
 import { RatingAdvanced } from './RatingAdvanced';
 import { RatingContext } from './RatingContext';
 import type { FlowbiteRatingStarTheme, FlowbiteStarSizes } from './RatingStar';
@@ -16,7 +15,6 @@ export interface FlowbiteRatingTheme {
     base: string;
   };
   star: FlowbiteRatingStarTheme;
-  advanced: FlowbiteRatingAdvancedTheme;
 }
 
 export interface RatingProps extends ComponentProps<'div'> {

src/components/Rating/RatingAdvanced.tsx

@@ -26,7 +26,7 @@ export const RatingAdvanced: FC<RatingAdvancedProps> = ({
   theme: customTheme = {},
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().rating.advanced, customTheme);
+  const theme = mergeDeep(getTheme().ratingAdvanced, customTheme);
 
   return (
     <div className={twMerge(theme.base, className)} {...props}>

src/components/Rating/theme.ts

@@ -1,18 +1,10 @@
 import type { FlowbiteRatingTheme } from './Rating';
+import { FlowbiteRatingAdvancedTheme } from './RatingAdvanced';
 
 export const ratingTheme: FlowbiteRatingTheme = {
   root: {
     base: 'flex items-center',
   },
-  advanced: {
-    base: 'flex items-center',
-    label: 'text-sm font-medium text-cyan-600 dark:text-cyan-500',
-    progress: {
-      base: 'mx-4 h-5 w-2/4 rounded bg-gray-200 dark:bg-gray-700',
-      fill: 'h-5 rounded bg-yellow-400',
-      label: 'text-sm font-medium text-cyan-600 dark:text-cyan-500',
-    },
-  },
   star: {
     empty: 'text-gray-300 dark:text-gray-500',
     filled: 'text-yellow-400',
@@ -23,3 +15,13 @@ export const ratingTheme: FlowbiteRatingTheme = {
     },
   },
 };
+
+export const ratingAdvancedTheme: FlowbiteRatingAdvancedTheme = {
+  base: 'flex items-center',
+  label: 'text-sm font-medium text-cyan-600 dark:text-cyan-500',
+  progress: {
+    base: 'mx-4 h-5 w-2/4 rounded bg-gray-200 dark:bg-gray-700',
+    fill: 'h-5 rounded bg-yellow-400',
+    label: 'text-sm font-medium text-cyan-600 dark:text-cyan-500',
+  },
+};

src/theme.ts

@@ -25,7 +25,7 @@ import { paginationTheme } from './components/Pagination/theme';
 import { progressTheme } from './components/Progress/theme';
 import { radioTheme } from './components/Radio/theme';
 import { rangeSliderTheme } from './components/RangeSlider/theme';
-import { ratingTheme } from './components/Rating/theme';
+import { ratingAdvancedTheme, ratingTheme } from './components/Rating/theme';
 import { selectTheme } from './components/Select/theme';
 import { sidebarTheme } from './components/Sidebar/theme';
 import { spinnerTheme } from './components/Spinner/theme';
@@ -67,6 +67,7 @@ export const theme: FlowbiteTheme = {
   radio: radioTheme,
   rangeSlider: rangeSliderTheme,
   rating: ratingTheme,
+  ratingAdvanced: ratingAdvancedTheme,
   select: selectTheme,
   textInput: textInputTheme,
   textarea: textareaTheme,