12:I[37568,["/_next/static/immutable/chunks/2-9vr-e42s8dr.js","/_next/static/immutable/chunks/2_omr-qreewwb.js","/_next/static/immutable/chunks/01f2nfogzffw7.js","/_next/static/immutable/chunks/3k56s_r4mk904.js","/_next/static/immutable/chunks/1s6zm_s8-c7ni.js","/_next/static/immutable/chunks/181_42an756jy.js","/_next/static/immutable/chunks/1jihvr95juttv.js","/_next/static/immutable/chunks/092nngb_-as9i.js","/_next/static/immutable/chunks/1j32oyta3515h.js"],"Playground"] 13:T18f1,"use client" import { useState } from "react" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" export interface RatingProps { /** Controlled rating. */ value?: number /** Initial rating when uncontrolled. Default: 0 */ defaultValue?: number /** Called with the new rating when the user picks one. */ onValueChange?: (value: number) => void /** Number of stars. Default: 5 */ max?: number /** Allow half-star ratings. Default: true */ allowHalf?: boolean /** Star size in px. Default: 28 */ size?: number /** Fill color (any CSS color). Default: "#f59e0b" */ color?: string /** Display only, no interaction. Default: false */ readOnly?: boolean /** Accessible label. Default: "Rating" */ "aria-label"?: string className?: string } const STAR = "M12 2.5l2.94 5.96 6.58.96-4.76 4.64 1.12 6.55L12 17.52l-5.88 3.09 1.12-6.55L2.48 9.42l6.58-.96L12 2.5z" const SPARKS = [0, 60, 120, 180, 240, 300].map((deg) => (deg * Math.PI) / 180) const Star = ({ className, style }: { className?: string; style?: React.CSSProperties }) => ( ) export function Rating({ value, defaultValue = 0, onValueChange, max = 5, allowHalf = true, size = 28, color = "#f59e0b", readOnly = false, "aria-label": ariaLabel = "Rating", className, }: RatingProps) { const reduced = useReducedMotion() const [internal, setInternal] = useState(defaultValue) const [hover, setHover] = useState(null) const [pop, setPop] = useState<{ index: number; n: number } | null>(null) const current = value ?? internal const shown = readOnly ? current : (hover ?? current) const [prev, setPrev] = useState(shown) const [from, setFrom] = useState(shown) if (shown !== prev) { setFrom(prev) setPrev(shown) } const rising = shown >= from const unit = allowHalf ? 0.5 : 1 const commit = (next: number) => { const clamped = Math.min(max, Math.max(0, next)) if (value === undefined) setInternal(clamped) onValueChange?.(clamped) if (clamped > 0) setPop((p) => ({ index: Math.ceil(clamped) - 1, n: (p?.n ?? 0) + 1 })) } const valueAt = (e: React.MouseEvent, i: number) => { const rect = e.currentTarget.getBoundingClientRect() const fraction = (e.clientX - rect.left) / rect.width return allowHalf && fraction < 0.5 ? i + 0.5 : i + 1 } const onKeyDown = (e: React.KeyboardEvent) => { const delta = { ArrowRight: unit, ArrowUp: unit, ArrowLeft: -unit, ArrowDown: -unit }[e.key] if (delta) commit(current + delta) else if (e.key === "Home") commit(0) else if (e.key === "End") commit(max) else return e.preventDefault() } const interactive = !readOnly const gap = Math.round(size * 0.15) return (

setHover(null) : undefined} className={cn( "inline-flex items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background", className )} style={{ gap }} > {Array.from({ length: max }, (_, i) => { const fill = Math.min(1, Math.max(0, shown - i)) const steps = rising ? i - Math.floor(from) : Math.ceil(from) - 1 - i const popping = pop?.index === i return ( setHover(valueAt(e, i)) : undefined} onClick={interactive ? (e) => commit(valueAt(e, i)) : undefined} whileHover={interactive && !reduced ? { scale: 1.1 } : undefined} transition={{ type: "spring", stiffness: 500, damping: 20 }} > {popping && !reduced && ( )} ) })}

) } 7:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"SoftwareSourceCode\",\"@id\":\"https://trytweenly.vercel.app/docs/components/rating#code\",\"name\":\"Rating\",\"description\":\"Star rating with a sweeping hover fill, half stars, and a springy pop with sparkles on select.\",\"url\":\"https://trytweenly.vercel.app/docs/components/rating\",\"codeRepository\":\"https://github.com/mirukullacode/tweenly\",\"programmingLanguage\":[{\"@type\":\"ComputerLanguage\",\"name\":\"TypeScript\"},{\"@type\":\"ComputerLanguage\",\"name\":\"React\"}],\"runtimePlatform\":\"React\",\"keywords\":\"Buttons, react, shadcn, animation\",\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"tweenly\",\"url\":\"https://trytweenly.vercel.app\"}},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Docs\",\"item\":\"https://trytweenly.vercel.app/docs\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://trytweenly.vercel.app/docs\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Rating\",\"item\":\"https://trytweenly.vercel.app/docs/components/rating\"}]}]}"}}],["$","$L12",null,{"slug":"rating","source":"$13"}]]