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:Ta6b1,import { Fragment, useEffect, useRef, useState, type KeyboardEvent, type ReactElement } from "react"; /* Every piece below is written once: the function renders the live demo and the string next to it is that same source file, so the code you copy is the code you see. */ type Lang = "react" | "html"; type Piece = { id: string; name: string; blurb: string; group: string; Demo: () => ReactElement; react: string; html?: string; stage: string; }; const s1Demo = (() => { const STAR = "M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z"; const items = [ { name: "Walnut serving board", rating: 4.3, reviews: 218 }, { name: "Enamel camping mug", rating: 3.75, reviews: 64 }, { name: "Wool picnic blanket", rating: 2.5, reviews: 12 }, ]; // Rounds to the nearest quarter star, then clips a row of filled stars to that width. function Stars({ value, size = "h-5 w-5" }: { value: number; size?: string }) { const shown = Math.round(value * 4) / 4; const row = (cls: string) => Array.from({ length: 5 }, (_, i) => ( )); return ( {row("fill-stone-200")} {row("fill-amber-500")} ); } function StarReadOnly() { return (

{it.name}

{it.rating} {it.reviews} reviews

); } return StarReadOnly; })(); const s1React = "const STAR = \"M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z\";\n\nconst items = [\n { name: \"Walnut serving board\", rating: 4.3, reviews: 218 },\n { name: \"Enamel camping mug\", rating: 3.75, reviews: 64 },\n { name: \"Wool picnic blanket\", rating: 2.5, reviews: 12 },\n];\n\n// Rounds to the nearest quarter star, then clips a row of filled stars to that width.\nfunction Stars({ value, size = \"h-5 w-5\" }: { value: number; size?: string }) {\n const shown = Math.round(value * 4) / 4;\n const row = (cls: string) =>\n Array.from({ length: 5 }, (_, i) => (\n \n ));\n return (\n \n {row(\"fill-stone-200\")}\n \n {row(\"fill-amber-500\")}\n \n \n );\n}\n\nexport default function StarReadOnly() {\n return (\n

\n
{it.name}
\n
\n \n {it.rating}\n \n {it.reviews} reviews\n \n
\n

\n );\n}\n"; const s1Html = `

`; const s5Demo = (() => { const STAR = "M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z"; // Review counts per star level, 5 down to 1. The average and percentages are worked out from these. const COUNTS: Record = { 5: 146, 4: 41, 3: 17, 2: 8, 1: 6 }; function ReviewSummaryBars() { const [filter, setFilter] = useState(null); const total = Object.values(COUNTS).reduce((a, b) => a + b, 0); const average = Object.entries(COUNTS).reduce((s, [k, v]) => s + Number(k) * v, 0) / total; const avg = Math.round(average * 10) / 10; return (

{avg.toFixed(1)}

{[1, 2, 3, 4, 5].map((n) => ( ))}

{total} reviews

{filter ? `Showing ${COUNTS[filter]} ${filter}-star reviews` : ""}

); } return ReviewSummaryBars; })(); const s5React = "import { useState } from \"react\";\n\nconst STAR = \"M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z\";\n// Review counts per star level, 5 down to 1. The average and percentages are worked out from these.\nconst COUNTS: Record = { 5: 146, 4: 41, 3: 17, 2: 8, 1: 6 };\n\nexport default function ReviewSummaryBars() {\n const [filter, setFilter] = useState(null);\n const total = Object.values(COUNTS).reduce((a, b) => a + b, 0);\n const average = Object.entries(COUNTS).reduce((s, [k, v]) => s + Number(k) * v, 0) / total;\n const avg = Math.round(average * 10) / 10;\n\n return (\n

{avg.toFixed(1)}

\n \n {[1, 2, 3, 4, 5].map((n) => (\n \n ))}\n \n

{total} reviews

\n setFilter(on ? null : n)}\n className={`flex h-10 w-full items-center gap-2 rounded-md px-1.5 text-xs text-stone-700 hover:bg-stone-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600 ${on ? \"bg-amber-50\" : \"\"}`}\n >\n {n}\n \n \n \n {pct}%\n \n

\n {filter ? `Showing ${COUNTS[filter]} ${filter}-star reviews` : \"\"}\n

\n );\n}\n"; const s2Demo = (() => { const STAR = "M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z"; const WORDS = ["Poor", "Fair", "Good", "Very good", "Excellent"]; function StarRadioInput() { const [value, setValue] = useState(4); const [hover, setHover] = useState(0); const lit = hover || value; return (

How was your stay?

setHover(0)}> {WORDS.map((word, i) => { const n = i + 1; return ( setValue(n)} className="peer sr-only" /> setHover(n)} className="grid h-11 w-11 cursor-pointer place-items-center rounded-lg peer-focus-visible:ring-2 peer-focus-visible:ring-amber-600" > {n} {n === 1 ? "star" : "stars"}, {word} ); })}

); } return StarRadioInput; })(); const s2React = "import { useState } from \"react\";\n\nconst STAR = \"M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z\";\nconst WORDS = [\"Poor\", \"Fair\", \"Good\", \"Very good\", \"Excellent\"];\n\nexport default function StarRadioInput() {\n const [value, setValue] = useState(4);\n const [hover, setHover] = useState(0);\n const lit = hover || value;\n\n return (\n

\n How was your stay?\n

setHover(0)}>\n {WORDS.map((word, i) => {\n const n = i + 1;\n return (\n \n setValue(n)}\n className=\"peer sr-only\"\n />\n setHover(n)}\n className=\"grid h-11 w-11 cursor-pointer place-items-center rounded-lg peer-focus-visible:ring-2 peer-focus-visible:ring-amber-600\"\n >\n \n {n} {n === 1 ? \"star\" : \"stars\"}, {word}\n \n \n \n \n );\n })}\n

\n {WORDS[lit - 1]}\n

\n );\n}\n"; const s3Demo = (() => { const STAR = "M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z"; function StarHalfInput() { const [value, setValue] = useState(3.5); const [hover, setHover] = useState(0); const lit = hover || value; return (

Rate this recipe

setHover(0)}> {[1, 2, 3, 4, 5].map((star) => { const fill = Math.max(0, Math.min(1, lit - (star - 1))); return (

{[star - 0.5, star].map((v, half) => ( setValue(v)} className="peer sr-only" /> setHover(v)} className={`absolute inset-y-0 w-1/2 cursor-pointer rounded-md peer-focus-visible:ring-2 peer-focus-visible:ring-rose-600 ${half ? "right-0" : "left-0"}`} > {v} stars ))}

); })}

Click the left half of a star for a half point.

); } return StarHalfInput; })(); const s3React = "import { useState } from \"react\";\n\nconst STAR = \"M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z\";\n\nexport default function StarHalfInput() {\n const [value, setValue] = useState(3.5);\n const [hover, setHover] = useState(0);\n const lit = hover || value;\n\n return (\n

\n Rate this recipe\n

setHover(0)}>\n {[1, 2, 3, 4, 5].map((star) => {\n const fill = Math.max(0, Math.min(1, lit - (star - 1)));\n return (\n

\n \n

\n {[star - 0.5, star].map((v, half) => (\n \n setValue(v)} className=\"peer sr-only\" />\n setHover(v)}\n className={`absolute inset-y-0 w-1/2 cursor-pointer rounded-md peer-focus-visible:ring-2 peer-focus-visible:ring-rose-600 ${half ? \"right-0\" : \"left-0\"}`}\n >\n {v} stars\n \n \n ))}\n

\n );\n })}\n

\n \n {lit.toFixed(1)}\n \n

Click the left half of a star for a half point.

\n );\n}\n"; const s4Demo = (() => { // Pure CSS: no state at all. Inputs and labels must be direct siblings for ~ and :has() to work. const css = ` .css-rate { border: 0; margin: 0; padding: 0; font-family: system-ui, sans-serif; } .css-rate legend { font-size: 14px; font-weight: 600; color: #1c1917; } .css-rate-stars { display: flex; margin-top: 8px; } .css-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; } .css-rate-stars label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; } .css-rate-stars label::before { content: ""; width: 30px; height: 30px; background: #d6d3d1; clip-path: polygon(50% 4%, 61% 37%, 96% 37%, 68% 58%, 79% 92%, 50% 71%, 21% 92%, 32% 58%, 4% 37%, 39% 37%); transition: background-color .15s; } .css-rate-stars input:checked + label::before, .css-rate-stars label:has(~ input:checked)::before, .css-rate-stars label:hover::before, .css-rate-stars label:has(~ label:hover)::before { background: #0d9488; } .css-rate-stars input:focus-visible + label { outline: 2px solid #0f766e; outline-offset: 1px; } .css-rate-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .css-rate-stars label::before { transition: none; } } `; function StarPureCss() { return (

Rate the delivery

{[1, 2, 3, 4, 5].map((n) => ( {n} {n === 1 ? "star" : "stars"} ))}

); } return StarPureCss; })(); const s4React = "import { Fragment } from \"react\";\n\n// Pure CSS: no state at all. Inputs and labels must be direct siblings for ~ and :has() to work.\nconst css = `\n.css-rate { border: 0; margin: 0; padding: 0; font-family: system-ui, sans-serif; }\n.css-rate legend { font-size: 14px; font-weight: 600; color: #1c1917; }\n.css-rate-stars { display: flex; margin-top: 8px; }\n.css-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.css-rate-stars label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; }\n.css-rate-stars label::before {\n content: \"\"; width: 30px; height: 30px; background: #d6d3d1;\n clip-path: polygon(50% 4%, 61% 37%, 96% 37%, 68% 58%, 79% 92%, 50% 71%, 21% 92%, 32% 58%, 4% 37%, 39% 37%);\n transition: background-color .15s;\n}\n.css-rate-stars input:checked + label::before,\n.css-rate-stars label:has(~ input:checked)::before,\n.css-rate-stars label:hover::before,\n.css-rate-stars label:has(~ label:hover)::before { background: #0d9488; }\n.css-rate-stars input:focus-visible + label { outline: 2px solid #0f766e; outline-offset: 1px; }\n.css-rate-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n@media (prefers-reduced-motion: reduce) { .css-rate-stars label::before { transition: none; } }\n`;\n\nexport default function StarPureCss() {\n return (\n

\n \n Rate the delivery\n

\n {[1, 2, 3, 4, 5].map((n) => (\n \n \n \n {n} {n === 1 ? \"star\" : \"stars\"}\n \n \n ))}\n

\n );\n}\n"; const s4Html = ` `; const s6Demo = (() => { const LABELS = ["Not useful", "Slightly useful", "Useful", "Very useful", "Essential"]; // Custom radio group with roving tabindex, following the WAI-ARIA radio group pattern. function StarRovingTiles() { const [value, setValue] = useState(4); const refs = useRef<(HTMLButtonElement | null)[]>([]); const focusable = value ? value - 1 : 0; function choose(i: number) { setValue(i + 1); refs.current[i]?.focus(); } function onKeyDown(i: number, e: KeyboardEvent) { const last = LABELS.length - 1; const next = e.key === "ArrowRight" || e.key === "ArrowDown" ? (i === last ? 0 : i + 1) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (i === 0 ? last : i - 1) : null; if (next === null) return; e.preventDefault(); choose(next); } return (

Was this guide useful?

{LABELS.map((label, i) => { const checked = value === i + 1; const lit = i < value; return ( ); })}

{value ? LABELS[value - 1] : "Pick a score from 1 to 5"}

{value > 0 && ( )}

); } return StarRovingTiles; })(); const s6React = "import { useRef, useState, type KeyboardEvent } from \"react\";\n\nconst LABELS = [\"Not useful\", \"Slightly useful\", \"Useful\", \"Very useful\", \"Essential\"];\n\n// Custom radio group with roving tabindex, following the WAI-ARIA radio group pattern.\nexport default function StarRovingTiles() {\n const [value, setValue] = useState(4);\n const refs = useRef<(HTMLButtonElement | null)[]>([]);\n const focusable = value ? value - 1 : 0;\n\n function choose(i: number) {\n setValue(i + 1);\n refs.current[i]?.focus();\n }\n\n function onKeyDown(i: number, e: KeyboardEvent) {\n const last = LABELS.length - 1;\n const next =\n e.key === \"ArrowRight\" || e.key === \"ArrowDown\" ? (i === last ? 0 : i + 1)\n : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\" ? (i === 0 ? last : i - 1)\n : null;\n if (next === null) return;\n e.preventDefault();\n choose(next);\n }\n\n return (\n

\n Was this guide useful?\n

\n {LABELS.map((label, i) => {\n const checked = value === i + 1;\n const lit = i < value;\n return (\n {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={checked}\n aria-label={`${i + 1} of 5, ${label}`}\n tabIndex={i === focusable ? 0 : -1}\n onClick={() => choose(i)}\n onKeyDown={(e) => onKeyDown(i, e)}\n className={`flex h-12 flex-col items-center justify-center rounded-lg text-xs font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300 ${\n lit ? \"bg-amber-400 text-stone-950\" : \"bg-stone-800 text-stone-300 hover:bg-stone-700\"\n }`}\n >\n {i + 1}\n \n );\n })}\n

{value ? LABELS[value - 1] : \"Pick a score from 1 to 5\"}

\n {value > 0 && (\n \n )}\n

\n );\n}\n"; const PIECES: Piece[] = [ { id: "s1", name: "Read-only score, quarter-star fill", blurb: "A clipped row of filled stars over an empty row, labelled once as an image.", group: "display", Demo: s1Demo, react: s1React, html: s1Html, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" }, { id: "s5", name: "Review summary with bars", blurb: "Average worked out from the counts, with bars that filter by star level.", group: "display", Demo: s5Demo, react: s5React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" }, { id: "s2", name: "Star input on native radios", blurb: "Hover preview, a word for each level and real radio keyboard behaviour.", group: "input", Demo: s2Demo, react: s2React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" }, { id: "s3", name: "Half-star input", blurb: "Two hit areas per star give scores from 0.5 to 5.", group: "input", Demo: s3Demo, react: s3React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" }, { id: "s4", name: "Pure CSS radio rating", blurb: "No state or script. Radios in their natural order coloured with :has().", group: "input", Demo: s4Demo, react: s4React, html: s4Html, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" }, { id: "s6", name: "Numbered score tiles", blurb: "A custom radio group with roving focus and a clear button.", group: "input", Demo: s6Demo, react: s6React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" } ]; const GROUPS: { key: string; label: string }[] = [{"key":"display","label":"Display only"},{"key":"input","label":"Rating inputs"}]; const TEXT: { eyebrow: string; title: string; lead: string; refTitle: string; refNote: string } = {"eyebrow":"React · pure CSS · HTML","title":"Star ratings you can read and set","lead":"Six rating pieces: a read-only score with quarter-star fill, a review summary with filter bars, a radio-based star input, a half-star input, a version with no script at all and a numbered score picker.","refTitle":"Which markup to use","refNote":"Roles and keys follow the radio group pattern in the WAI-ARIA Authoring Practices Guide. Support for :has() and CSS masks is per MDN's compatibility data."}; const REF_HEAD: string[] = ["Case","Markup","Keyboard"]; const REF_ROWS: string[][] = [ [ "Showing a score", "One element with role=\"img\" and aria-label=\"Rated 4.3 out of 5\". The drawn stars are aria-hidden.", "Not focusable; nothing to operate." ], [ "Choosing a score", "Native radio inputs in a fieldset with a legend; each label holds a star and hidden text.", "Tab enters the group, arrow keys move and select, as with any radio set." ], [ "Half stars", "Ten radios, two per star, each label covering one half.", "Arrow keys step by half a point." ], [ "No JavaScript", "Radios plus :has() to colour the stars before the checked one. Needs a browser with :has() support.", "Native radio keys." ], [ "Custom buttons", "role=\"radiogroup\" with role=\"radio\" buttons, aria-checked and a roving tabindex.", "Arrows move, check and wrap; only one button is in the tab order." ], [ "Summary bars", "Buttons with aria-pressed to filter reviews by star level.", "Tab and Enter or Space." ] ]; const COPY_ICON = "M9 9h10v10H9zM5 15V5h10"; const CHECK_ICON = "M5 12.5l4.5 4.5L19 7.5"; const CODE_ICON = "M8 7l-5 5 5 5M16 7l5 5-5 5"; export default function StarRatingCollection() { const [group, setGroup] = useState("all"); const [langs, setLangs] = useState>({}); const [open, setOpen] = useState(null); const [copied, setCopied] = useState(null); const [announce, setAnnounce] = useState(""); const timer = useRef | null>(null); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [] ); const shown = group === "all" ? PIECES : PIECES.filter((p) => p.group === group); const langOf = (p: Piece): Lang => (p.html ? langs[p.id] ?? "react" : "react"); const codeOf = (p: Piece) => (langOf(p) === "html" && p.html ? p.html : p.react); const langName = (l: Lang) => (l === "html" ? "HTML, CSS and JS" : "React and Tailwind"); async function copy(p: Piece) { let ok = false; try { await navigator.clipboard.writeText(codeOf(p)); ok = true; } catch { ok = false; } if (!ok) setOpen(p.id); setCopied(ok ? p.id : null); setAnnounce(ok ? `${p.name}: ${langName(langOf(p))} copied` : "Copy was blocked, so the code is shown under the demo for you to select"); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(null), 1600); } const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600 focus-visible:ring-offset-2"; const chip = `inline-flex min-h-[40px] items-center gap-1.5 whitespace-nowrap rounded-full px-4 text-[13px] font-medium transition-colors ${ring}`; return (

{TEXT.eyebrow}

{TEXT.title}

{TEXT.lead}

{[{ key: "all", label: "All" }, ...GROUPS, { key: "ref", label: "Reference table" }].map((g) => { const on = group === g.key; const n = g.key === "ref" ? REF_ROWS.length : g.key === "all" ? PIECES.length : PIECES.filter((p) => p.group === g.key).length; return ( ); })}

{announce}

{group !== "ref" && (

{p.name}

{p.blurb}

{p.html && (
{(["react", "html"] as Lang[]).map((x) => ( ))}
)}
{isOpen && (
```
                    {codeOf(p)}
                  
```
)}

)} {group === "ref" && (

{TEXT.refTitle}

{TEXT.refNote}

{REF_HEAD.map((h) => ( ))} {REF_ROWS.map((r, i) => ( {r.map((c, j) => j === 0 ? ( ) : ( ) )} ))}

{h}
{c}	{c}

)}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"components/we-inc/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]