4d: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"] 4e: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"] 4f:T2172,"use client" import { Progress as ProgressPrimitive } from "@base-ui/react/progress" import { cn } from "@/lib/utils" type CircularProgressVariant = "flat" | "wavy" type CircularProgressThickness = 4 | 8 type CircularProgressProps = Omit< ProgressPrimitive.Root.Props, "children" | "value" > & { disabled?: boolean value?: number | null variant?: CircularProgressVariant thickness?: CircularProgressThickness } const TRACK_GAP = 4 // Extracted from the kit's full circular wave vectors: six radial lobes on a // 20dp centreline, moving 2dp inward and outward. Sixteen line segments per // lobe keep the SVG silhouette smooth without baking a large Figma path into // the component. const WAVE_LOBE_COUNT = 6 const WAVE_RADIUS = 20 const WAVE_AMPLITUDE = 2 const WAVE_SEGMENTS_PER_LOBE = 16 type PathPosition = { anglePercent: number radius: number } function createCirclePath(size: number, radius: number) { const center = size / 2 return [ `M${center + radius} ${center}`, `A${radius} ${radius} 0 1 1 ${center - radius} ${center}`, `A${radius} ${radius} 0 1 1 ${center + radius} ${center}`, "Z", ].join(" ") } function createWavyCircleGeometry(size: number) { const center = size / 2 const segmentCount = WAVE_LOBE_COUNT * WAVE_SEGMENTS_PER_LOBE const points = Array.from({ length: segmentCount + 1 }, (_, index) => { const progress = index / segmentCount const angle = progress * Math.PI * 2 const radius = WAVE_RADIUS + Math.cos(progress * Math.PI * 2 * WAVE_LOBE_COUNT) * WAVE_AMPLITUDE return { x: center + Math.cos(angle) * radius, y: center + Math.sin(angle) * radius, } }) const segmentLengths = points.slice(1).map((point, index) => Math.hypot(point.x - points[index].x, point.y - points[index].y), ) const totalLength = segmentLengths.reduce((sum, length) => sum + length, 0) const path = `${points .map( ({ x, y }, index) => `${index === 0 ? "M" : "L"}${x.toFixed(3)} ${y.toFixed(3)}`, ) .join(" ")} Z` function positionAtPercent(percent: number): PathPosition { if (percent >= 100) { return { anglePercent: 100, radius: WAVE_RADIUS + WAVE_AMPLITUDE } } const targetLength = (Math.max(0, percent) / 100) * totalLength let traversedLength = 0 for (const [index, segmentLength] of segmentLengths.entries()) { if (traversedLength + segmentLength < targetLength) { traversedLength += segmentLength continue } const segmentProgress = segmentLength === 0 ? 0 : (targetLength - traversedLength) / segmentLength const start = points[index] const end = points[index + 1] const x = start.x + (end.x - start.x) * segmentProgress const y = start.y + (end.y - start.y) * segmentProgress return { anglePercent: ((index + segmentProgress) / segmentCount) * 100, radius: Math.hypot(x - center, y - center), } } return { anglePercent: 100, radius: WAVE_RADIUS + WAVE_AMPLITUDE } } return { path, positionAtPercent } } const flatPositionAtPercent = (radius: number, percent: number): PathPosition => ({ anglePercent: percent, radius, }) const wavy4Geometry = createWavyCircleGeometry(48) const wavy8Geometry = createWavyCircleGeometry(52) const geometry = { flat: { 4: { className: "size-10", indicatorPath: createCirclePath(40, 18), positionAtPercent: (percent: number) => flatPositionAtPercent(18, percent), size: 40, trackRadius: 18, }, 8: { className: "size-11", indicatorPath: createCirclePath(44, 18), positionAtPercent: (percent: number) => flatPositionAtPercent(18, percent), size: 44, trackRadius: 18, }, }, wavy: { 4: { className: "size-12", indicatorPath: wavy4Geometry.path, positionAtPercent: wavy4Geometry.positionAtPercent, size: 48, trackRadius: 22, }, 8: { className: "size-13", indicatorPath: wavy8Geometry.path, positionAtPercent: wavy8Geometry.positionAtPercent, size: 52, trackRadius: 22, }, }, } as const function getGapPercent( indicatorRadius: number, trackRadius: number, thickness: CircularProgressThickness, ) { const centerDistance = TRACK_GAP + thickness const cosine = (indicatorRadius ** 2 + trackRadius ** 2 - centerDistance ** 2) / (2 * indicatorRadius * trackRadius) return (Math.acos(Math.min(1, Math.max(-1, cosine))) / (Math.PI * 2)) * 100 } /** * Material 3 circular progress. * * Omit `value` (or pass `null`) for indeterminate progress. Determinate values * are normalized between `min` and `max`, with Base UI supplying the native * progressbar semantics. Give every indicator an accessible name with * `aria-label` or `aria-labelledby`. * * The flat and Expressive wavy variants use the kit's 40/44dp and 48/52dp * geometries for 4dp and 8dp strokes, respectively. */ function CircularProgress({ className, value = null, min = 0, max = 100, variant = "flat", thickness = 4, disabled = false, ...props }: CircularProgressProps) { const selectedGeometry = geometry[variant][thickness] const percent = typeof value === "number" && max > min ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)) : null // A round cap extends half a stroke beyond each path endpoint. The angular // offsets preserve a 4dp straight-line gap between the two cap edges, even // when a wavy endpoint sits inside or outside the track radius. const indicatorEnd = percent === null ? null : selectedGeometry.positionAtPercent(percent) const trackStartGap = indicatorEnd === null ? 0 : getGapPercent( indicatorEnd.radius, selectedGeometry.trackRadius, thickness, ) const indicatorStart = selectedGeometry.positionAtPercent(0) const trackEndGap = getGapPercent( indicatorStart.radius, selectedGeometry.trackRadius, thickness, ) const visibleTrack = percent === null || percent <= 0 ? 100 : Math.max( 0, 100 - indicatorEnd!.anglePercent - trackStartGap - trackEndGap, ) const trackOffset = percent === null || percent <= 0 ? 0 : -(indicatorEnd!.anglePercent + trackStartGap) return ( ) } export { CircularProgress } export type { CircularProgressProps, CircularProgressThickness, CircularProgressVariant, } 4c:["$","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","@base-ui/react@^1.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.7.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/components/ui/circular-progress.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]