sdaia-ui 1.0.1 → 1.0.2

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,389 +0,0 @@
-'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

@@ -1,38 +0,0 @@
-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

@@ -1,27 +0,0 @@
-// 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

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

package/src/components/Rating/Rating.tsx

@@ -1,246 +0,0 @@
-'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>
-  );
-});