Icon Meter

import { IconMeter } from "@lualtek/react-components";
 
export default () => {
  return <IconMeter value={3.5} />;
};

export type IconMeterProps = {
  /**
   * Set the value of the icon meter.
   * This value must be between `0` and `iconCount`.
   *
   * This data is used to calculate the number of filled icons
   * based on predefined thresholds of the fraction.
   *
   * @example
   * fraction < `0.25` = rounded to 0 (empty icon)
   * fraction >= `0.75` = rounded to 1 (filled icon)
   * fraction >= `0.25` and < 0.75 = rounded to 0.5 (half icon)
   *
   * @default 0
   */
  value: number;
 
  /**
   * Set the number of icons to use as maximum.
   * @default 5
   */
  iconCount?: number;
 
  /**
   * Set a custom label instead of the current value.
   */
  label?: ReactNode;
 
  /**
   * Set the size of the icon meter.
   * @default "regular"
   */
  dimension?: "small" | "regular" | "big";
 
  /**
   * Hide the label beside the icons
   * @default false
   */
  hideLabel?: boolean;
 
  /**
   * Set the icon to use as indicator
   * @default "star"
   */
  icon?: IconNames;
 
  /**
   * Set the color to use as accent
   * @default 'var(--highlight-green-foreground)'
   */
  iconColor?: string;
};