sdaia-ui 1.0.1

package/src/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,389 @@
+'use client';
+
+import { forwardRef, useState, useCallback, useRef } from 'react';
+import type { RangeSliderProps, RangeSliderValue } from './RangeSlider.types';
+import {
+  TRACK_BG,
+  FILL_BG,
+  THUMB_BG,
+  LABEL_TEXT,
+  ICON_COLOR,
+  INDICATOR_BUBBLE,
+} from './RangeSlider.variants';
+import { cn } from '../../lib/cn';
+import { InfoCircleIcon } from '../../icons/IconFactory';
+
+const THUMB_PX = 16;
+
+function thumbEdge(pct: number): string {
+  return `calc(${pct / 100} * (100% - ${THUMB_PX}px))`;
+}
+
+function thumbCenter(pct: number): string {
+  return `calc(${pct / 100} * (100% - ${THUMB_PX}px) + ${THUMB_PX / 2}px)`;
+}
+
+export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
+  function RangeSlider(
+    {
+      value: valueProp,
+      defaultValue = [20, 80],
+      onChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      label = 'inline',
+      direction = 'ltr',
+      leadingIcon = false,
+      trailingIcon = false,
+      disabled = false,
+      formatValue,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const trackRef = useRef<HTMLDivElement>(null);
+    const [dragging, setDragging] = useState<'start' | 'end' | null>(null);
+    const [focused, setFocused] = useState<'start' | 'end' | null>(null);
+
+    const [internalValue, setInternalValue] = useState<RangeSliderValue>(
+      valueProp ?? defaultValue,
+    );
+    const isControlled = valueProp !== undefined;
+    const [startVal, endVal] = isControlled ? valueProp! : internalValue;
+
+    const range = max - min;
+    const startPct = range > 0 ? ((startVal - min) / range) * 100 : 0;
+    const endPct = range > 0 ? ((endVal - min) / range) * 100 : 100;
+
+    const fmt = formatValue ?? ((v: number) => `${Math.round(v)}%`);
+    const isRtl = direction === 'rtl';
+
+    const update = useCallback(
+      (next: RangeSliderValue) => {
+        if (!isControlled) setInternalValue(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange],
+    );
+
+    /* Keyboard handlers (sr-only inputs) */
+    const handleStartChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        update([Math.min(Number(e.target.value), endVal - step), endVal]);
+      },
+      [endVal, step, update],
+    );
+
+    const handleEndChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        update([startVal, Math.max(Number(e.target.value), startVal + step)]);
+      },
+      [startVal, step, update],
+    );
+
+    /* Snap a raw value to the nearest step within [min, max] */
+    const snap = useCallback(
+      (raw: number) => {
+        const stepped = Math.round((raw - min) / step) * step + min;
+        return Math.max(min, Math.min(max, stepped));
+      },
+      [min, max, step],
+    );
+
+    /* Convert a pointer clientX to a snapped value, RTL-aware */
+    const ptrToVal = useCallback(
+      (clientX: number) => {
+        const el = trackRef.current;
+        if (!el) return min;
+        const { left, width } = el.getBoundingClientRect();
+        let pct = Math.max(0, Math.min(100, ((clientX - left) / width) * 100));
+        if (isRtl) pct = 100 - pct;
+        return snap((pct / 100) * range + min);
+      },
+      [isRtl, range, min, snap],
+    );
+
+    /* Pointer-event handlers on the track (mouse + touch) */
+    const handlePointerDown = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        if (disabled) return;
+        e.preventDefault();
+        const val = ptrToVal(e.clientX);
+        const valPct = range > 0 ? ((val - min) / range) * 100 : 0;
+        const thumb: 'start' | 'end' =
+          Math.abs(valPct - startPct) <= Math.abs(valPct - endPct)
+            ? 'start'
+            : 'end';
+        setDragging(thumb);
+        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+        if (thumb === 'start') {
+          update([Math.min(val, endVal - step), endVal]);
+        } else {
+          update([startVal, Math.max(val, startVal + step)]);
+        }
+      },
+      [disabled, ptrToVal, range, min, startPct, endPct, startVal, endVal, step, update],
+    );
+
+    const handlePointerMove = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!dragging) return;
+        const val = ptrToVal(e.clientX);
+        if (dragging === 'start') {
+          update([Math.min(val, endVal - step), endVal]);
+        } else {
+          update([startVal, Math.max(val, startVal + step)]);
+        }
+      },
+      [dragging, ptrToVal, startVal, endVal, step, update],
+    );
+
+    const stopDragging = useCallback(() => setDragging(null), []);
+
+    /* ── Icon ─────────────────────────────────────────────────── */
+    const iconEl = (
+      <span
+        className={cn(
+          'inline-flex h-[14px] w-[14px] shrink-0 items-center justify-center',
+          ICON_COLOR,
+        )}
+      >
+        <InfoCircleIcon className="h-[14px] w-[14px]" aria-hidden="true" />
+      </span>
+    );
+
+    /* ── Fill (between the two thumbs) ───────────────────────── */
+    // Physical left/right (not logical) — required because the fill div sits inside
+    // overflow:hidden and logical inset-inline has inconsistent cross-browser support there.
+    const fillStyle: React.CSSProperties = isRtl
+      ? { right: `${startPct}%`, width: `${endPct - startPct}%` }
+      : { left: `${startPct}%`, width: `${endPct - startPct}%` };
+
+    /* ── Thumb positions ──────────────────────────────────────── */
+    const startThumbStyle: React.CSSProperties = isRtl
+      ? { right: thumbEdge(startPct) }
+      : { left: thumbEdge(startPct) };
+
+    const endThumbStyle: React.CSSProperties = isRtl
+      ? { right: thumbEdge(endPct) }
+      : { left: thumbEdge(endPct) };
+
+    /* ── Track element ────────────────────────────────────────── */
+    const trackEl = (
+      <div
+        ref={trackRef}
+        data-slot="track-wrapper"
+        className={cn(
+          'relative flex h-[16px] w-full items-center',
+          disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        )}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={stopDragging}
+        onPointerCancel={stopDragging}
+      >
+        {/* Track background */}
+        <div
+          data-slot="track"
+          className={cn(
+            'relative h-[4px] w-full overflow-hidden rounded-full',
+            TRACK_BG,
+          )}
+        >
+          {/* Fill between thumbs */}
+          <div
+            data-slot="fill"
+            className={cn('absolute inset-y-0 rounded-full', FILL_BG)}
+            style={fillStyle}
+          />
+        </div>
+
+        {/* Visual start thumb */}
+        <div
+          data-slot="thumb-start"
+          className={cn(
+            'pointer-events-none absolute h-[16px] w-[16px] rounded-full border-[2px] border-white shadow-md transition-shadow',
+            THUMB_BG,
+            disabled && 'opacity-50',
+            focused === 'start' &&
+              'ring-2 ring-[rgba(27,131,84,0.4)] ring-offset-1',
+          )}
+          style={startThumbStyle}
+        />
+
+        {/* Visual end thumb */}
+        <div
+          data-slot="thumb-end"
+          className={cn(
+            'pointer-events-none absolute h-[16px] w-[16px] rounded-full border-[2px] border-white shadow-md transition-shadow',
+            THUMB_BG,
+            disabled && 'opacity-50',
+            focused === 'end' &&
+              'ring-2 ring-[rgba(27,131,84,0.4)] ring-offset-1',
+          )}
+          style={endThumbStyle}
+        />
+
+        {/* sr-only native inputs — keyboard-accessible, no pointer interaction */}
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={startVal}
+          onChange={handleStartChange}
+          onFocus={() => setFocused('start')}
+          onBlur={() => setFocused(null)}
+          disabled={disabled}
+          dir={direction}
+          aria-label="Start value"
+          aria-valuenow={startVal}
+          aria-valuemin={min}
+          aria-valuemax={endVal}
+          className="sr-only"
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={endVal}
+          onChange={handleEndChange}
+          onFocus={() => setFocused('end')}
+          onBlur={() => setFocused(null)}
+          disabled={disabled}
+          dir={direction}
+          aria-label="End value"
+          aria-valuenow={endVal}
+          aria-valuemin={startVal}
+          aria-valuemax={max}
+          className="sr-only"
+        />
+      </div>
+    );
+
+    /* ── Per-thumb floating indicator bubbles ────────────────── */
+    // insetInlineStart + translate correction works for both LTR and RTL:
+    // LTR → distance from left; RTL → distance from right (logical axis).
+    const bubblesRow = (
+      <div className="relative h-[28px] w-full">
+        <div
+          className="pointer-events-none absolute -translate-x-1/2 rtl:translate-x-1/2"
+          style={{ insetInlineStart: thumbCenter(startPct) }}
+        >
+          <div className={INDICATOR_BUBBLE}>{fmt(startVal)}</div>
+        </div>
+        <div
+          className="pointer-events-none absolute -translate-x-1/2 rtl:translate-x-1/2"
+          style={{ insetInlineStart: thumbCenter(endPct) }}
+        >
+          <div className={INDICATOR_BUBBLE}>{fmt(endVal)}</div>
+        </div>
+      </div>
+    );
+
+    /* ── Label helpers ────────────────────────────────────────── */
+    const minLabel = (
+      <span className={cn(LABEL_TEXT, 'shrink-0')}>{fmt(min)}</span>
+    );
+    const maxLabel = (
+      <span className={cn(LABEL_TEXT, 'shrink-0')}>{fmt(max)}</span>
+    );
+
+    /* ── Inline row (shared by top-floating / bottom-floating) ── */
+    const inlineRow = (
+      <div className="flex items-center gap-[8px]">
+        {leadingIcon && iconEl}
+        {minLabel}
+        <div className="min-w-0 flex-1">{trackEl}</div>
+        {maxLabel}
+        {trailingIcon && iconEl}
+      </div>
+    );
+
+    /* ── Render by label variant ─────────────────────────────── */
+
+    if (label === 'none') {
+      return (
+        <div
+          ref={ref}
+          dir={direction}
+          data-slot="range-slider"
+          className={cn('w-full min-w-[320px]', className)}
+          {...rest}
+        >
+          {trackEl}
+        </div>
+      );
+    }
+
+    if (label === 'inline') {
+      return (
+        <div
+          ref={ref}
+          dir={direction}
+          data-slot="range-slider"
+          className={cn('flex w-full min-w-[320px] items-center gap-[8px]', className)}
+          {...rest}
+        >
+          {leadingIcon && iconEl}
+          {minLabel}
+          <div className="min-w-0 flex-1">{trackEl}</div>
+          {maxLabel}
+          {trailingIcon && iconEl}
+        </div>
+      );
+    }
+
+    if (label === 'bottom') {
+      return (
+        <div
+          ref={ref}
+          dir={direction}
+          data-slot="range-slider"
+          className={cn('flex w-full min-w-[320px] flex-col gap-[8px]', className)}
+          {...rest}
+        >
+          {trackEl}
+          <div className="flex w-full justify-between gap-[4px]">
+            {minLabel}
+            <span className={cn(LABEL_TEXT, 'shrink-0')}>{fmt(startVal)}</span>
+            <span className={cn(LABEL_TEXT, 'shrink-0')}>{fmt(endVal)}</span>
+            {maxLabel}
+          </div>
+        </div>
+      );
+    }
+
+    if (label === 'top-floating') {
+      return (
+        <div
+          ref={ref}
+          dir={direction}
+          data-slot="range-slider"
+          className={cn('flex w-full min-w-[320px] flex-col gap-[6px]', className)}
+          {...rest}
+        >
+          {bubblesRow}
+          {inlineRow}
+        </div>
+      );
+    }
+
+    // bottom-floating
+    return (
+      <div
+        ref={ref}
+        dir={direction}
+        data-slot="range-slider"
+        className={cn('flex w-full min-w-[320px] flex-col gap-[6px]', className)}
+        {...rest}
+      >
+        {inlineRow}
+        {bubblesRow}
+      </div>
+    );
+  },
+);

package/src/components/RangeSlider/RangeSlider.types.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react';
+
+export type RangeSliderLabel =
+  | 'inline'
+  | 'bottom'
+  | 'top-floating'
+  | 'bottom-floating'
+  | 'none';
+
+/** [start, end] values within [min, max] */
+export type RangeSliderValue = [number, number];
+
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /** Current [start, end] value. Controlled when provided. */
+  value?: RangeSliderValue;
+  /** Initial [start, end] for uncontrolled usage. Default: [20, 80] */
+  defaultValue?: RangeSliderValue;
+  /** Called with new [start, end] when either thumb moves */
+  onChange?: (value: RangeSliderValue) => void;
+  /** Minimum bound. Default: 0 */
+  min?: number;
+  /** Maximum bound. Default: 100 */
+  max?: number;
+  /** Step increment. Default: 1 */
+  step?: number;
+  /** Label position variant. Default: 'inline' */
+  label?: RangeSliderLabel;
+  /** Layout direction */
+  direction?: 'ltr' | 'rtl';
+  /** Show info icon at the leading end */
+  leadingIcon?: boolean;
+  /** Show info icon at the trailing end */
+  trailingIcon?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Custom formatter for displayed values. Default: v => `${v}%` */
+  formatValue?: (value: number) => string;
+}

package/src/components/RangeSlider/RangeSlider.variants.ts

@@ -0,0 +1,27 @@
+// Track background (unfilled portion)
+export const TRACK_BG =
+  'bg-[rgba(229,231,235,1)] dark:bg-[rgba(31,42,55,1)]';
+
+// Fill between the two thumbs
+export const FILL_BG =
+  'bg-[rgba(27,131,84,1)] dark:bg-[rgba(84,192,138,1)]';
+
+// Thumb circle
+export const THUMB_BG =
+  'bg-[rgba(27,131,84,1)] dark:bg-[rgba(84,192,138,1)]';
+
+// Min / max / current-value text labels
+export const LABEL_TEXT =
+  'text-[12px] leading-none text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+// Per-thumb floating indicator bubble (card with border + shadow-md, Figma: _item/Slider Indicator)
+export const INDICATOR_BUBBLE =
+  'whitespace-nowrap rounded-[6px] bg-white dark:bg-[rgba(31,42,55,1)] ' +
+  'border border-[rgba(243,244,246,1)] dark:border-[rgba(55,65,81,1)] ' +
+  'px-[8px] py-[4px] text-[12px] leading-[18px] font-normal ' +
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'shadow-[0px_4px_8px_0px_rgba(16,24,40,0.10),0px_2px_4px_0px_rgba(16,24,40,0.06)]';
+
+// Icon colour (info / help icons at ends)
+export const ICON_COLOR =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';

package/src/components/RangeSlider/index.ts

@@ -0,0 +1,2 @@
+export { RangeSlider } from './RangeSlider';
+export type { RangeSliderProps, RangeSliderLabel, RangeSliderValue } from './RangeSlider.types';

package/src/components/Rating/Rating.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { forwardRef, useId, useMemo, useState } from 'react';
+import type { CSSProperties } from 'react';
+import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from 'react';
+import { cn } from '../../lib/cn';
+import type { RatingProps } from './Rating.types';
+import {
+  FILLED_STAR_PATH_D,
+  FILLED_STAR_VIEWBOX,
+  OUTLINE_STAR_PATH_D,
+  OUTLINE_STAR_VIEWBOX,
+  RATING_COLOR_MAP,
+  RATING_SIZE_MAP,
+} from './Rating.variants';
+
+function clampValue(value: number, minimum: number, maximum: number) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+function normalizeToStep(value: number, step: 0.5 | 1, max: number) {
+  const normalized = Math.round(value / step) * step;
+  return clampValue(normalized, 0, max);
+}
+
+function getValueFromPointer(
+  event: ReactPointerEvent<HTMLButtonElement> | ReactMouseEvent<HTMLButtonElement>,
+  index: number,
+  step: 0.5 | 1,
+  direction: 'ltr' | 'rtl',
+) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const pointerX = clampValue(event.clientX - rect.left, 0, rect.width);
+  const ratio = rect.width === 0 ? 0 : pointerX / rect.width;
+  const fromStart = direction === 'rtl' ? 1 - ratio : ratio;
+
+  if (step === 1) {
+    return index + 1;
+  }
+
+  const localValue = fromStart >= 0.5 ? 1 : 0.5;
+  return index + localValue;
+}
+
+function getFillPercent(currentValue: number, index: number) {
+  const delta = currentValue - index;
+  if (delta >= 1) return 100;
+  if (delta <= 0) return 0;
+  return delta * 100;
+}
+
+interface RatingStarIconProps {
+  clipPathId: string;
+  size: number;
+  fillPercent: number;
+  direction: 'ltr' | 'rtl';
+  style: 'solid' | 'outline';
+}
+
+function RatingStarIcon({ clipPathId, size, fillPercent, direction, style }: RatingStarIconProps) {
+  const viewboxWidth = style === 'outline' ? OUTLINE_STAR_VIEWBOX.width : FILLED_STAR_VIEWBOX.width;
+  const viewboxHeight = style === 'outline' ? OUTLINE_STAR_VIEWBOX.height : FILLED_STAR_VIEWBOX.height;
+  const starPath = style === 'outline' ? OUTLINE_STAR_PATH_D : FILLED_STAR_PATH_D;
+  const clipWidth = clampValue((fillPercent / 100) * viewboxWidth, 0, viewboxWidth);
+  const clipX = direction === 'rtl' ? viewboxWidth - clipWidth : 0;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${viewboxWidth} ${viewboxHeight}`}
+      fill="none"
+      aria-hidden="true"
+      className="block"
+    >
+      {style === 'outline' ? (
+        <path d={starPath} fill="none" stroke="var(--rating-empty)" strokeWidth={1.4} />
+      ) : (
+        <path d={starPath} fill="var(--rating-empty)" />
+      )}
+      <defs>
+        <clipPath id={clipPathId}>
+          <rect x={clipX} y="0" width={clipWidth} height={viewboxHeight} />
+        </clipPath>
+      </defs>
+      {style === 'outline' ? (
+        <path
+          d={starPath}
+          fill="var(--rating-fill)"
+          stroke="var(--rating-fill)"
+          strokeWidth={1.4}
+          clipPath={`url(#${clipPathId})`}
+        />
+      ) : (
+        <path
+          d={starPath}
+          fill="var(--rating-fill)"
+          clipPath={`url(#${clipPathId})`}
+        />
+      )}
+    </svg>
+  );
+}
+
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(
+  {
+    value,
+    defaultValue = 0,
+    max = 5,
+    size = 'md',
+    style = 'solid',
+    brand = true,
+    step = 0.5,
+    direction = 'ltr',
+    disabled = false,
+    readOnly = false,
+    hoverable = true,
+    starColor,
+    emptyStarColor,
+    onValueChange,
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const isControlled = typeof value === 'number';
+  const safeMax = Math.max(1, Math.floor(max));
+  const normalizedDefault = normalizeToStep(defaultValue, step, safeMax);
+  const [internalValue, setInternalValue] = useState(normalizedDefault);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const ratingInstanceId = useId();
+  const interactiveValue = isControlled ? normalizeToStep(value ?? 0, step, safeMax) : internalValue;
+  const visualValue = hoverValue ?? interactiveValue;
+  const sizeConfig = RATING_SIZE_MAP[size];
+  const tone = brand ? RATING_COLOR_MAP.brand : RATING_COLOR_MAP.neutral;
+  const isInteractive = !disabled && !readOnly;
+
+  const stars = useMemo(
+    () => Array.from({ length: safeMax }, (_, starIndex) => starIndex),
+    [safeMax],
+  );
+
+  const commitValue = (nextValue: number) => {
+    const normalized = normalizeToStep(nextValue, step, safeMax);
+    if (!isControlled) {
+      setInternalValue(normalized);
+    }
+    onValueChange?.(normalized);
+  };
+
+  return (
+    <div
+      ref={forwardedRef}
+      dir={direction}
+      data-slot="rating"
+      role="radiogroup"
+      aria-disabled={disabled}
+      className={cn(
+        'inline-flex items-center',
+        sizeConfig.gapClass,
+        tone.emptyVarClass,
+        tone.fillVarClass,
+        className,
+      )}
+      style={
+        {
+          ...(starColor ? { ['--rating-fill' as string]: starColor } : {}),
+          ...(emptyStarColor ? { ['--rating-empty' as string]: emptyStarColor } : {}),
+        } as CSSProperties
+      }
+      onPointerLeave={() => setHoverValue(null)}
+      {...rest}
+    >
+      {stars.map((starIndex) => {
+        const fillPercent = getFillPercent(visualValue, starIndex);
+        const radioValue = normalizeToStep(starIndex + 1, step, safeMax);
+
+        return (
+          <button
+            key={`rating-star-${starIndex}`}
+            type="button"
+            role="radio"
+            aria-label={`${radioValue} of ${safeMax}`}
+            aria-checked={interactiveValue >= radioValue}
+            disabled={disabled}
+            tabIndex={starIndex === 0 ? 0 : -1}
+            className={cn(
+              'relative inline-flex shrink-0 items-center justify-center outline-none',
+              isInteractive ? 'cursor-pointer' : 'cursor-default',
+              'focus-visible:ring-2 focus-visible:ring-[rgba(59,130,246,0.5)] focus-visible:ring-offset-2',
+              'focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,24,39,1)]',
+              disabled && 'opacity-60',
+            )}
+            style={{ width: sizeConfig.star, height: sizeConfig.star }}
+            onPointerMove={(event) => {
+              if (!isInteractive || !hoverable) return;
+              setHoverValue(getValueFromPointer(event, starIndex, step, direction));
+            }}
+            onClick={(event) => {
+              if (!isInteractive) return;
+              const nextValue =
+                hoverValue ?? getValueFromPointer(event, starIndex, step, direction);
+              commitValue(nextValue);
+            }}
+            onKeyDown={(event) => {
+              if (!isInteractive) return;
+              const rtlLeft = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+              const rtlRight = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+
+              if (event.key === rtlRight || event.key === 'ArrowUp') {
+                event.preventDefault();
+                commitValue(interactiveValue + step);
+                return;
+              }
+
+              if (event.key === rtlLeft || event.key === 'ArrowDown') {
+                event.preventDefault();
+                commitValue(interactiveValue - step);
+                return;
+              }
+
+              if (event.key === 'Home') {
+                event.preventDefault();
+                commitValue(0);
+                return;
+              }
+
+              if (event.key === 'End') {
+                event.preventDefault();
+                commitValue(safeMax);
+              }
+            }}
+          >
+            <RatingStarIcon
+              clipPathId={`rating-fill-${ratingInstanceId}-${starIndex}-${safeMax}-${direction}`}
+              size={sizeConfig.star}
+              fillPercent={fillPercent}
+              direction={direction}
+              style={style}
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+});