4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T43c5,"use client" import * as React from "react" import { FileTextIcon } from "lucide-react" import { cva } from "class-variance-authority" import type { HTMLAttributes } from "react" import { cn } from "@/lib/utils" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatValue } from "@/lib/format-utils" import { Progress } from "@/components/ui/progress" import { Skeleton } from "@/components/ui/skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" // ── Types ────────────────────────────────────────────────────────────────── export type ScoreRowSize = "sm" | "md" | "lg" export type ScoreRowStatus = "default" | "success" | "warning" | "destructive" export type ScoreRowScoreDisplay = "fraction" | "percent" | "raw" export interface ScoreRowProps extends HTMLAttributes { title: string description?: string /** Lucide icon component. Defaults to FileTextIcon. */ icon?: React.ElementType /** Current score value. */ score: number /** Maximum / total possible score. */ total: number size?: ScoreRowSize /** * Color status for the icon container and score. * Use `"auto"` to derive from the score ratio: * ≥70% → success, ≥40% → warning, <40% → destructive. */ status?: ScoreRowStatus | "auto" /** How the score is rendered on the right. Defaults to "fraction". */ scoreDisplay?: ScoreRowScoreDisplay /** * When true, renders a colored progress bar at the bottom of the row. * Hovering the bar shows a tooltip with locale-aware percentage. */ showProgress?: boolean loading?: boolean locale?: UILocale /** Number of decimal places in the percentage display (progress tooltip and aria-label). Defaults to 0. */ percentDecimals?: number /** * Override all intent-based colors via CSS token `--score-accent`. * Drives icon container bg/text, score value text, and progress fill. * Accepts any CSS color or `var(--my-token)`. */ accent?: string /** * Optional tooltip content for the entire row. When provided, the row * itself becomes the tooltip trigger (keyboard-focusable) and the * built-in progress-bar tooltip is suppressed, avoiding nested tooltips. */ tooltip?: React.ReactNode } // ── Variants ─────────────────────────────────────────────────────────────── export const scoreRowVariants = cva( [ "flex w-full flex-col border-b border-border", "motion-safe:transition-colors motion-safe:duration-150", ], { variants: { size: { sm: "gap-2 px-3 py-2", md: "gap-2.5 px-4 py-3", lg: "gap-3 px-5 py-4", }, interactive: { true: "cursor-pointer hover:bg-accent focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset", false: "", }, }, defaultVariants: { size: "md", interactive: false }, } ) // Horizontal gap between icon container and text stack const ICON_TEXT_GAP: Record = { sm: "gap-2", md: "gap-3", lg: "gap-3", } // Horizontal gap between content row and score — also between score parts const CONTENT_GAP: Record = { sm: "gap-3", md: "gap-4", lg: "gap-5", } // Gap between score parts (current / slash / total) for symmetric spacing const SCORE_GAP: Record = { sm: "gap-0.5", md: "gap-1", lg: "gap-1", } const PROGRESS_HEIGHT: Record = { sm: "h-2", md: "h-3", lg: "h-4", } export const scoreRowIconContainerVariants = cva( ["flex shrink-0 items-center justify-center rounded-md"], { variants: { size: { sm: "size-7", md: "size-8", lg: "size-10", }, status: { default: "bg-muted text-muted-foreground", success: "bg-success/10 text-success", warning: "bg-warning/15 text-warning", destructive: "bg-destructive/10 text-destructive", }, }, defaultVariants: { size: "md", status: "default" }, } ) export const scoreRowIconVariants = cva("shrink-0", { variants: { size: { // 50% fill ratio vs. the container (size-7/8/10) sm: "size-3.5", md: "size-4", lg: "size-5", }, }, defaultVariants: { size: "md" }, }) export const scoreRowTitleVariants = cva( ["truncate leading-tight font-medium text-foreground"], { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md" }, } ) export const scoreRowDescriptionVariants = cva( "truncate leading-tight text-muted-foreground", { variants: { size: { // text-xs for sm (no arbitrary values) — color alone distinguishes from title sm: "text-xs", md: "text-xs", lg: "text-sm", }, }, defaultVariants: { size: "md" }, } ) export const scoreRowCurrentVariants = cva("font-semibold tabular-nums", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, status: { default: "text-foreground", success: "text-success", warning: "text-warning", destructive: "text-destructive", }, }, defaultVariants: { size: "md", status: "default" }, }) export const scoreRowTotalVariants = cva("text-muted-foreground tabular-nums", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md" }, }) // ── Helpers ──────────────────────────────────────────────────────────────── function deriveStatus(score: number, total: number): ScoreRowStatus { if (total === 0) return "default" const ratio = score / total if (ratio >= 0.7) return "success" if (ratio >= 0.4) return "warning" return "destructive" } function formatScore( score: number, total: number, display: ScoreRowScoreDisplay, locale: UILocale, decimals: number ): { current: string; showFraction: boolean; rest: string } { switch (display) { case "percent": return { current: total === 0 ? "—" : formatValue(score / total, "percent", { decimals, locale }), showFraction: false, rest: "", } case "raw": return { current: formatValue(score, "float", { decimals, locale }), showFraction: false, rest: "", } case "fraction": default: return { current: formatValue(score, "float", { decimals, locale }), showFraction: true, rest: formatValue(total, "integer", { locale }), } } } function formatScoreText( score: number, total: number, display: ScoreRowScoreDisplay, locale: UILocale, decimals: number ): string { switch (display) { case "percent": return total === 0 ? "—" : formatValue(score / total, "percent", { decimals, locale }) case "raw": return formatValue(score, "float", { decimals, locale }) case "fraction": default: { const s = formatValue(score, "float", { decimals, locale }) const t = formatValue(total, "integer", { locale }) return `${s} / ${t}` } } } /** Locale-aware percent string, e.g. "71,3%" in pt-BR, "71.3%" in en-US. */ function formatPercent( ratio: number, locale: UILocale, decimals: number ): string { return formatValue(ratio, "percent", { decimals, locale }) } const PROGRESS_INDICATOR_COLOR: Record = { default: "[&>[data-slot=progress-indicator]]:bg-primary", success: "[&>[data-slot=progress-indicator]]:bg-success", warning: "[&>[data-slot=progress-indicator]]:bg-warning", destructive: "[&>[data-slot=progress-indicator]]:bg-destructive", } // ── ScoreRow ─────────────────────────────────────────────────────────────── export function ScoreRow({ title, description, icon: Icon = FileTextIcon, score, total, size = "md", status = "default", scoreDisplay = "fraction", showProgress = true, loading = false, locale = "en-US", percentDecimals = 0, accent, tooltip, className, onClick, ...props }: ScoreRowProps) { const tokenStyle = accent !== undefined ? ({ "--score-accent": accent } as React.CSSProperties) : undefined const t = UI_I18N[locale].scoreRow const resolvedStatus: ScoreRowStatus = status === "auto" ? deriveStatus(score, total) : status const isInteractive = !!onClick const ratio = total > 0 ? Math.min(score / total, 1) : 0 const { current, showFraction, rest } = formatScore( score, total, scoreDisplay, locale, percentDecimals ) const scoreText = formatScoreText( score, total, scoreDisplay, locale, percentDecimals ) const percentText = formatPercent(ratio, locale, percentDecimals) if (loading) { return (

{showProgress && ( )}

) } const inner = ( <> {/* Content row: icon + text + score */}

{/* Leading: icon container + text stack */}

{title} {description && ( {description} )}

{/* * Trailing: score — three visually styled spans with symmetric gap. * All visual spans are aria-hidden; a sr-only span carries the accessible label * so screen readers get a clean, locale-aware phrase instead of "0 slash 95". */}

{showFraction && ( <> )} {t.scoreLabel}: {scoreText}

{/* * Progress bar. When no row-level `tooltip` is set, it's wrapped in its * own Tooltip showing locale-aware percentage with correct decimal * separator (e.g. "68 / 95 — 71,3%" in pt-BR, "68 / 95 — 71.3%" in * en-US). When `tooltip` is set, this per-bar tooltip is suppressed — * the row-level tooltip below already covers it, avoiding nesting. */} {showProgress && (() => { const progress = ( [data-slot=progress-indicator]]:bg-(--score-accent)" )} /> ) if (tooltip) { return {progress} } return ( {progress} {score} / {total} — {percentText} ) })()} ) let row: React.ReactElement if (isInteractive) { const buttonLabel = [title, description, `${t.scoreLabel}: ${scoreText}`] .filter(Boolean) .join(". ") row = ( ) } else { row = (

{inner}

) } if (!tooltip) return row return ( {row} {tooltip} ) } ScoreRow.displayName = "ScoreRow" // ── ScoreRowList ─────────────────────────────────────────────────────────── export interface ScoreRowListProps extends HTMLAttributes { children: React.ReactNode /** Removes outer border to embed inside already-bordered containers. */ inset?: boolean } export function ScoreRowList({ children, inset = false, className, ...props }: ScoreRowListProps) { return (

*:last-child]:border-b-0", className )} {...props} > {children}

) } ScoreRowList.displayName = "ScoreRowList" 4b:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["progress","skeleton","tooltip","ui-i18n","format-utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/score-row.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-score-row.tsx"}],"className":"h-[70svh] min-h-80"}]]}]