1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T1176,import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * Rating. * * Five stars in the brand accent, the number beside them, the count in * brackets. * * THE STARS ARE DECORATIVE, THE NUMBER IS THE CONTENT * The star row is one `role="img"` with a full accessible name — "4.9 out of * 5, 128 reviews" — rather than five separate images. Five stars announced * individually is five pieces of noise, and a half-filled star has no * accessible representation at all. * * Stars are filled to the nearest half, which is what the number already says. * Do not round to whole stars — a 4.4 shown as 4 stars is a visible * contradiction of the "4.4" printed next to it. */ export type RatingProps = { /** 0 to 5. */ value: number; /** Number of reviews. Omitted rather than shown as "(0)". */ count?: number; size?: number; /** Hide the numeric value — only for a dense grid where space is genuinely gone. The stars alone are harder to compare at a glance. */ hideValue?: boolean; className?: string; }; export function Rating({ value, count, size = 15, hideValue = false, className }: RatingProps) { const label = count ? `${value.toFixed(1)} out of 5, ${count.toLocaleString("en-IN")} reviews` : `${value.toFixed(1)} out of 5`; return ( {[1, 2, 3, 4, 5].map((position) => ( ))} {!hideValue && ( {value.toFixed(1)} )} {count !== undefined && count > 0 && ( ({count.toLocaleString("en-IN")}) )} ); } function fillFor(value: number, position: number): "full" | "half" | "empty" { if (value >= position) return "full"; if (value >= position - 0.5) return "half"; return "empty"; } function Star({ fill, size }: { fill: "full" | "half" | "empty"; size: number }) { const path = "m12 4 2.5 5.2 5.5.8-4 4 .9 5.5-4.9-2.7-4.9 2.7.9-5.5-4-4 5.5-.8L12 4Z"; const id = `half-${fill}-${size}`; return ( ); } /** * The distribution bars on a product's review section — how many 5-star, how * many 4-star, and so on. * * A single average hides the shape: 4.2 from a hundred 4s and 4.2 from fifty 5s * and fifty 3s are different products. */ export function RatingBreakdown({ distribution, className, }: { /** Counts for 5, 4, 3, 2, 1 stars, in that order. */ distribution: [number, number, number, number, number]; className?: string; }) { const total = distribution.reduce((sum, count) => sum + count, 0); return (

{distribution.map((count, index) => { const stars = 5 - index; const percent = total === 0 ? 0 : Math.round((count / total) * 100); return (

{stars} star {percent}%

); })}

); } 24:Ta82b,

import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * Rating.
 *
 * Five stars in the brand accent, the number beside them, the count in
 * brackets.
 *
 * THE STARS ARE DECORATIVE, THE NUMBER IS THE CONTENT
 *   The star row is one `role="img"` with a full accessible name — "4.9 out of
 *   5, 128 reviews" — rather than five separate images. Five stars announced
 *   individually is five pieces of noise, and a half-filled star has no
 *   accessible representation at all.
 *
 * Stars are filled to the nearest half, which is what the number already says.
 * Do not round to whole stars — a 4.4 shown as 4 stars is a visible
 * contradiction of the "4.4" printed next to it.
 */
export type RatingProps = {
  /** 0 to 5. */
  value: number;
  /** Number of reviews. Omitted rather than shown as "(0)". */
  count?: number;
  size?: number;
  /** Hide the numeric value — only for a dense grid where space is genuinely
      gone. The stars alone are harder to compare at a glance. */
  hideValue?: boolean;
  className?: string;
};

export function Rating({ value, count, size = 15, hideValue = false, className }: RatingProps) {
  const label = count
    ? `${value.toFixed(1)} out of 5, ${count.toLocaleString("en-IN")} reviews`
    : `${value.toFixed(1)} out of 5`;

  return (
    <span data-slot="rating" className={cn("font-ui inline-flex items-center gap-1.5", className)}>
      <span role="img" aria-label={label} className="inline-flex gap-px">
        {[1, 2, 3, 4, 5].map((position) => (
          <Star key={position} fill={fillFor(value, position)} size={size} />
        ))}
      </span>
      {!hideValue && (
        <span aria-hidden className="text-label text-text-primary font-bold">
          {value.toFixed(1)}
        </span>
      )}
      {count !== undefined && count > 0 && (
        <span aria-hidden className="text-caption text-text-muted">
          ({count.toLocaleString("en-IN")})
        </span>
      )}
    </span>
  );
}

function fillFor(value: number, position: number): "full" | "half" | "empty" {
  if (value >= position) return "full";
  if (value >= position - 0.5) return "half";
  return "empty";
}

function Star({ fill, size }: { fill: "full" | "half" | "empty"; size: number }) {
  const path = "m12 4 2.5 5.2 5.5.8-4 4 .9 5.5-4.9-2.7-4.9 2.7.9-5.5-4-4 5.5-.8L12 4Z";
  const id = `half-${fill}-${size}`;

  return (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden className="flex-none">
      {fill === "half" && (
        <defs>
          <linearGradient id={id}>
            <stop offset="50%" stopColor="var(--surface-accent)" />
            <stop offset="50%" stopColor="var(--border-strong)" />
          </linearGradient>
        </defs>
      )}
      <path
        d={path}
        fill={
          fill === "full"
            ? "var(--surface-accent)"
            : fill === "half"
              ? `url(#${id})`
              : "var(--border-strong)"
        }
      />
    </svg>
  );
}

/**
 * The distribution bars on a product's review section — how many 5-star, how
 * many 4-star, and so on.
 *
 * A single average hides the shape: 4.2 from a hundred 4s and 4.2 from fifty 5s
 * and fifty 3s are different products.
 */
export function RatingBreakdown({
  distribution,
  className,
}: {
  /** Counts for 5, 4, 3, 2, 1 stars, in that order. */
  distribution: [number, number, number, number, number];
  className?: string;
}) {
  const total = distribution.reduce((sum, count) => sum + count, 0);

  return (
    <div data-slot="rating-breakdown" className={cn("font-ui flex flex-col gap-1.5", className)}>
      {distribution.map((count, index) => {
        const stars = 5 - index;
        const percent = total === 0 ? 0 : Math.round((count / total) * 100);
        return (
          <div key={stars} className="text-caption flex items-center gap-2.5">
            <span className="text-text-secondary w-10">{stars} star</span>
            <span
              role="img"
              aria-label={`${percent}% of reviews are ${stars} star`}
              className="rounded-pill bg-surface-sunken h-2 flex-1 overflow-hidden"
            >
              <span
                className="rounded-pill bg-surface-accent block h-full"
                style={{ width: `${percent}%` }}
              />
            </span>
            <span className="text-text-muted w-8 text-right">{percent}%</span>
          </div>
        );
      })}
    </div>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Blocks"}],["$","$L1e",null,{"children":"Rating"}],["$","$L1f",null,{"children":"Stars with a count, and the five-bar breakdown."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"rating"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/rating","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]