5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T1f59,"use client"; import { useEffect, useRef, useState } from "react"; import { animate, AnimatePresence, motion, type AnimationPlaybackControls, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; // Starting at rest and kicked upward, the spring peaks near 1.15 about 50ms // in and settles with one faint dip, all inside ~350ms. const POP = { type: "spring", stiffness: 600, damping: 20 } as const; const POP_VELOCITY = 6.3; // The stars behind the clicked one echo it at half strength (about 1.07). const ECHO_VELOCITY = 3; const ECHO_STAGGER = 0.03; const WORDS = ["Not rated", "Poor", "Fair", "Good", "Great", "Excellent"]; // Slow enough to read as the value settling rather than blinking, while // still well under the time it takes to sweep across the next star. const FADE = { duration: 0.25, ease: [0.23, 1, 0.32, 1] } as const; const FADE_OUT = { duration: 0.15, ease: [0.23, 1, 0.32, 1] } as const; function wordFor(value: number, max: number) { // Maps any scale onto the five words, rounding halves up. return WORDS[Math.ceil((value / max) * (WORDS.length - 1))]; } export function StarRating({ value, onChange, max = 5, label = "Rating", className, }: { value: number; onChange: (value: number) => void; max?: number; label?: string; className?: string; }) { const reduceMotion = useReducedMotion(); const [hover, setHover] = useState(null); const stars = useRef<(HTMLSpanElement | null)[]>([]); const pops = useRef([]); useEffect(() => () => pops.current.forEach((p) => p.stop()), []); const shown = hover ?? value; const previewing = hover !== null && hover !== value; const number = shown > 0 ? shown.toFixed(1) : ""; const valueAt = (clientX: number, box: DOMRect) => { const raw = ((clientX - box.left) / box.width) * max; // Left half of a star is a half point. return Math.min(Math.max(Math.ceil(raw * 2) / 2, 0.5), max); }; const pop = (next: number, echo: boolean) => { if (reduceMotion || next <= 0) return; pops.current.forEach((p) => p.stop()); const last = Math.ceil(next) - 1; const first = echo ? 0 : last; pops.current = []; for (let i = last; i >= first; i--) { const el = stars.current[i]; if (!el) continue; // Targets the resting scale with an initial kick, so a second click // mid-pop continues from wherever the star is instead of restarting. pops.current.push( animate( el, { scale: 1 }, { ...POP, velocity: i === last ? POP_VELOCITY : ECHO_VELOCITY, delay: (last - i) * ECHO_STAGGER, }, ), ); } }; const commit = (next: number, echo: boolean) => { const clamped = Math.min(Math.max(next, 0), max); if (clamped !== value) onChange(clamped); pop(clamped, echo); }; return (

{ // Touch has no hover; a tap goes straight to commit. if (e.pointerType === "touch") return; const box = e.currentTarget.getBoundingClientRect(); setHover(valueAt(e.clientX, box)); }} onPointerLeave={() => setHover(null)} onClick={(e) => { const box = e.currentTarget.getBoundingClientRect(); commit(valueAt(e.clientX, box), true); }} onKeyDown={(e) => { const delta = { ArrowRight: 0.5, ArrowUp: 0.5, ArrowLeft: -0.5, ArrowDown: -0.5, PageUp: 1, PageDown: -1, Home: -max, End: max, }[e.key]; if (delta === undefined) return; e.preventDefault(); // Keys retarget the hover preview too, so the two never disagree. setHover(null); // Arrows repeat while held, so only the landing star pops. commit(value + delta, false); }} > {Array.from({ length: max }, (_, i) => { const fill = Math.min(Math.max(shown - i, 0), 1); return ( // Padding instead of gaps, so there's no dead zone between stars. { stars.current[i] = el; }} className="relative block size-6" > {/* A short glide rather than a snap, so sweeping across the stars fills them like a pour. A CSS transition retargets mid-flight, so a fast sweep never lags behind the pointer. */} ); })}

{/* Fixed width, so the stars never shift as the words change. */}

{number} {wordFor(shown, max)}

); } function Crossfade({ id, reduceMotion, children, }: { id: string; reduceMotion: boolean | null; children: React.ReactNode; }) { // The new value rises into place as the old one drifts up and out, like a // counter rolling over. const enter = reduceMotion ? { opacity: 0 } : { opacity: 0, y: 4, filter: "blur(4px)" }; const leave = reduceMotion ? { opacity: 0 } : { opacity: 0, y: -4, filter: "blur(4px)" }; return ( // Both versions share one grid cell while they cross. {children} ); } function Star({ className, style, }: { className?: string; style?: React.CSSProperties; }) { return ( ); } export default function StarRatingDemo() { const [rating, setRating] = useState(3.5); return (

How was your stay?

); } 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/star-rating.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]