feat(component): theme support to rating

src/lib/components/Flowbite/FlowbiteTheme.ts

@@ -6,6 +6,7 @@ import type { ButtonColors, ButtonOutlineColors, ButtonSizes } from '../Button';
 import type { ButtonGradientColors, ButtonGradientDuoToneColors } from '../Button';
 import type { DeepPartial } from '../../helpers/deep-partial';
 import type { PositionInButtonGroup } from '../Button/ButtonGroup';
+import type { StarSizes } from '../Rating';
 
 export type CustomFlowbiteTheme = DeepPartial<FlowbiteTheme>;
 
@@ -141,6 +142,23 @@ export interface FlowbiteTheme {
       snap: string;
     };
   };
+  rating: {
+    base: string;
+    star: {
+      sizes: StarSizes;
+      filled: string;
+      empty: string;
+    };
+    advanced: {
+      base: string;
+      label: string;
+      progress: {
+        base: string;
+        fill: string;
+        label: string;
+      };
+    };
+  };
   spinner: {
     base: string;
     color: SpinnerColors;

src/lib/components/Rating/RatingAdvanced.tsx

@@ -1,17 +1,22 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { excludeClassName } from '../../helpers/exclude';
+import { useTheme } from '../Flowbite/ThemeContext';
 
-export type RatingAdvancedProps = PropsWithChildren<{
+export interface RatingAdvancedProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'className'>> {
   percentFilled?: number;
-}>;
+}
+
+export const RatingAdvanced: FC<RatingAdvancedProps> = ({ percentFilled = 0, children, ...props }) => {
+  const theme = useTheme().theme.rating.advanced;
+  const theirProps = excludeClassName(props);
 
-export const RatingAdvanced: FC<RatingAdvancedProps> = ({ percentFilled, children }) => {
   return (
-    <div className="flex items-center">
-      <span className="text-sm font-medium text-blue-600 dark:text-blue-500">{children}</span>
-      <div className="mx-4 h-5 w-2/4 rounded bg-gray-200 dark:bg-gray-700">
-        <div className="h-5 rounded bg-yellow-400" data-testid="rating-fill" style={{ width: `${percentFilled}%` }} />
+    <div className={theme.base} {...theirProps}>
+      <span className={theme.label}>{children}</span>
+      <div className={theme.progress.base}>
+        <div className={theme.progress.fill} data-testid="rating-fill" style={{ width: `${percentFilled}%` }} />
       </div>
-      <span className="text-sm font-medium text-blue-600 dark:text-blue-500">{`${percentFilled}%`}</span>
+      <span className={theme.progress.label}>{`${percentFilled}%`}</span>
     </div>
   );
 };

src/lib/components/Rating/RatingContext.tsx

@@ -1,9 +1,8 @@
 import { createContext, useContext } from 'react';
-
-export type Size = 'sm' | 'md' | 'lg';
+import type { StarSizes } from '.';
 
 export type RatingContext = {
-  size?: Size;
+  size?: keyof StarSizes;
 };
 
 export const RatingContext = createContext<RatingContext | undefined>(undefined);

src/lib/components/Rating/RatingStar.tsx

@@ -2,28 +2,18 @@ import type { ComponentProps, FC } from 'react';
 import classNames from 'classnames';
 import { useRatingContext } from './RatingContext';
 import { HiStar } from 'react-icons/hi';
+import { useTheme } from '../Flowbite/ThemeContext';
 
-export type RatingStarProps = {
+export interface RatingStarProps {
   filled?: boolean;
   starIcon?: FC<ComponentProps<'svg'>>;
-};
-
-const sizeClasses = {
-  sm: 'w-5 h-5',
-  md: 'w-7 h-7',
-  lg: 'w-10 h-10',
-};
+}
 
-export const RatingStar: FC<RatingStarProps> = ({ filled = true, starIcon: StarIcon = HiStar }) => {
+export const RatingStar: FC<RatingStarProps> = ({ filled = true, starIcon: Icon = HiStar }) => {
   const { size = 'sm' } = useRatingContext();
+  const theme = useTheme().theme.rating.star;
 
   return (
-    <StarIcon
-      className={classNames(sizeClasses[size], {
-        'text-yellow-400': filled,
-        'text-gray-300 dark:text-gray-500': !filled,
-      })}
-      data-testid="rating-star"
-    />
+    <Icon className={classNames(theme.sizes[size], theme[filled ? 'filled' : 'empty'])} data-testid="rating-star" />
   );
 };

src/lib/components/Rating/index.tsx

@@ -1,19 +1,28 @@
-import type { FC, PropsWithChildren } from 'react';
-import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { RatingAdvanced } from './RatingAdvanced';
-import type { Size } from './RatingContext';
 import { RatingContext } from './RatingContext';
 import { RatingStar } from './RatingStar';
+import { useTheme } from '../Flowbite/ThemeContext';
+import type { FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import { excludeClassName } from '../../helpers/exclude';
 
-export type RatingProps = PropsWithChildren<{
-  className?: string;
-  size?: Size;
-}>;
+export interface StarSizes extends Pick<FlowbiteSizes, 'sm' | 'md' | 'lg'> {
+  [key: string]: string;
+}
+
+export interface RatingProps extends PropsWithChildren<ComponentProps<'div'>> {
+  size?: keyof StarSizes;
+}
+
+const RatingComponent: FC<RatingProps> = ({ children, size = 'sm', ...props }) => {
+  const theme = useTheme().theme.rating;
+  const theirProps = excludeClassName(props);
 
-const RatingComponent: FC<RatingProps> = ({ children, className, size = 'sm' }) => {
   return (
     <RatingContext.Provider value={{ size }}>
-      <div className={classNames('flex items-center', className)}>{children}</div>
+      <div className={theme.base} {...theirProps}>
+        {children}
+      </div>
     </RatingContext.Provider>
   );
 };

src/lib/theme/default.ts

@@ -254,6 +254,27 @@ export default {
       snap: 'snap-x',
     },
   },
+  rating: {
+    base: 'flex items-center',
+    star: {
+      sizes: {
+        sm: 'w-5 h-5',
+        md: 'w-7 h-7',
+        lg: 'w-10 h-10',
+      },
+      filled: 'text-yellow-400',
+      empty: 'text-gray-300 dark:text-gray-500',
+    },
+    advanced: {
+      base: 'flex items-center',
+      label: 'text-sm font-medium text-blue-600 dark:text-blue-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-blue-600 dark:text-blue-500',
+      },
+    },
+  },
   spinner: {
     base: 'inline animate-spin text-gray-200',
     color: {