import type * as React from "react"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { cn } from "@/lib/registry/cn"; export interface RatingProps { /** Current rating value (e.g. 4.5). */ rating: number; /** Maximum rating (e.g. 5). Default 5. */ maxRating?: number; /** Hide empty (unfilled) icons. Default false. */ showOnlyFilled?: boolean; /** Size in pixels for each icon. Default 16. */ iconSize?: number; /** Icon name for filled state (LibraryIcon). Default "star". */ iconName?: string; /** Class for the container. */ className?: string; /** Optional direction override for partial fill clipping. */ direction?: "ltr" | "rtl"; /** Class for filled icon. */ filledClassName?: string; /** Class for empty icon. */ emptyClassName?: string; } /** Renders a single partially-filled icon with direction-aware clip. */ function PartialIcon({ iconName, fillFraction, directionProp, filledClassName, emptyClassName, }: { iconName: string; fillFraction: number; directionProp?: "ltr" | "rtl"; filledClassName: string; emptyClassName: string; }) { const clipPct = 100 - fillFraction * 100; const ltrClipPath = `inset(0 ${clipPct}% 0 0)`; const rtlClipPath = `inset(0 0 0 ${clipPct}%)`; const resolvedClipPath = directionProp === "rtl" ? rtlClipPath : directionProp === "ltr" ? ltrClipPath : undefined; return (

{resolvedClipPath ? (

) : ( <>

)}

); } /** * Display rating as a row of icons (e.g. stars), with optional partial fill. * Use for read-only display. For interactive rating input, wrap in state and pass rating/onChange. */ function Rating({ rating, maxRating = 5, showOnlyFilled = false, iconSize = 16, iconName = "star", className, direction: directionProp, filledClassName = "fill-current text-warning", emptyClassName = "text-muted-foreground", }: RatingProps) { const safeRating = Math.max(0, Math.min(rating, maxRating)); const fullCount = Math.floor(safeRating); const hasPartial = safeRating % 1 !== 0; const iconStyle = { width: iconSize, height: iconSize } as const; const items: Array<{ key: number; node: React.ReactNode }> = []; for (let i = 1; i <= maxRating; i++) { const isFull = i <= fullCount; const isPartial = i === fullCount + 1 && hasPartial; if (showOnlyFilled && !isFull && !isPartial) continue; if (isPartial) { items.push({ key: i, node: ( ), }); } else { items.push({ key: i, node: ( ), }); } } return (

{items.map(({ key, node }) => ( {node} ))}

); } Rating.displayName = "Rating"; export { Rating };

Rating

Showcase

Rating