4f: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/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T309e,"use client"; import { cn } from "cn"; import { Slot as SlotPrimitive } from "radix-ui"; import * as React from "react"; const GAUGE_NAME = "Gauge"; const INDICATOR_NAME = "GaugeIndicator"; const TRACK_NAME = "GaugeTrack"; const RANGE_NAME = "GaugeRange"; const VALUE_TEXT_NAME = "GaugeValueText"; const LABEL_NAME = "GaugeLabel"; const DEFAULT_MAX = 100; const DEFAULT_START_ANGLE = 0; const DEFAULT_END_ANGLE = 360; type GaugeState = "indeterminate" | "complete" | "loading"; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } interface PathProps extends React.ComponentProps<"path"> {} function getGaugeState( value: number | undefined | null, maxValue: number, ): GaugeState { return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading"; } function getIsValidNumber(value: unknown): value is number { return typeof value === "number" && Number.isFinite(value); } function getIsValidMaxNumber(max: unknown): max is number { return getIsValidNumber(max) && max > 0; } function getIsValidValueNumber( value: unknown, min: number, max: number, ): value is number { return getIsValidNumber(value) && value <= max && value >= min; } function getDefaultValueText(value: number, min: number, max: number): string { const percentage = max === min ? 100 : ((value - min) / (max - min)) * 100; return Math.round(percentage).toString(); } function getInvalidValueError( propValue: string, componentName: string, ): string { return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be a number between \`min\` and \`max\` (inclusive), or \`null\`/\`undefined\` for indeterminate state. The value will be clamped to the valid range.`; } function getInvalidMaxError(propValue: string, componentName: string): string { return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid. Defaulting to ${DEFAULT_MAX}.`; } function getNormalizedAngle(angle: number) { return ((angle % 360) + 360) % 360; } function polarToCartesian( centerX: number, centerY: number, radius: number, angleInDegrees: number, ) { const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0; return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians), }; } function describeArc( x: number, y: number, radius: number, startAngle: number, endAngle: number, ) { const angleDiff = endAngle - startAngle; // For full circles (360 degrees), draw as two semi-circles if (Math.abs(angleDiff) >= 360) { const start = polarToCartesian(x, y, radius, startAngle); const mid = polarToCartesian(x, y, radius, startAngle + 180); return [ "M", start.x, start.y, "A", radius, radius, 0, 0, 1, mid.x, mid.y, "A", radius, radius, 0, 0, 1, start.x, start.y, ].join(" "); } const start = polarToCartesian(x, y, radius, startAngle); const end = polarToCartesian(x, y, radius, endAngle); const largeArcFlag = angleDiff <= 180 ? "0" : "1"; return [ "M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 1, end.x, end.y, ].join(" "); } interface GaugeContextValue { value: number | null; valueText: string | undefined; max: number; min: number; state: GaugeState; radius: number; thickness: number; size: number; center: number; percentage: number | null; startAngle: number; endAngle: number; arcLength: number; arcCenterY: number; valueTextId?: string; labelId?: string; } const GaugeContext = React.createContext(null); function useGaugeContext(consumerName: string) { const context = React.useContext(GaugeContext); if (!context) { throw new Error( `\`${consumerName}\` must be used within \`${GAUGE_NAME}\``, ); } return context; } interface GaugeProps extends DivProps { value?: number | null | undefined; getValueText?(value: number, min: number, max: number): string; min?: number; max?: number; size?: number; thickness?: number; startAngle?: number; endAngle?: number; } function Gauge(props: GaugeProps) { const { value: valueProp = null, getValueText = getDefaultValueText, min: minProp = 0, max: maxProp, size = 120, thickness = 8, startAngle = DEFAULT_START_ANGLE, endAngle = DEFAULT_END_ANGLE, asChild, className, ...rootProps } = props; if ((maxProp || maxProp === 0) && !getIsValidMaxNumber(maxProp)) { if (process.env.NODE_ENV !== "production") { console.error(getInvalidMaxError(`${maxProp}`, GAUGE_NAME)); } } const rawMax = getIsValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX; const min = getIsValidNumber(minProp) ? minProp : 0; const max = rawMax <= min ? min + 1 : rawMax; if (process.env.NODE_ENV !== "production" && thickness >= size) { console.warn( `Gauge: thickness (${thickness}) should be less than size (${size}) for proper rendering.`, ); } if (valueProp !== null && !getIsValidValueNumber(valueProp, min, max)) { if (process.env.NODE_ENV !== "production") { console.error(getInvalidValueError(`${valueProp}`, GAUGE_NAME)); } } const value = getIsValidValueNumber(valueProp, min, max) ? valueProp : getIsValidNumber(valueProp) && valueProp > max ? max : getIsValidNumber(valueProp) && valueProp < min ? min : null; const valueText = getIsValidNumber(value) ? getValueText(value, min, max) : undefined; const state = getGaugeState(value, max); const radius = Math.max(0, (size - thickness) / 2); const center = size / 2; const angleDiff = Math.abs(endAngle - startAngle); const arcLength = (Math.min(angleDiff, 360) / 360) * (2 * Math.PI * radius); const percentage = getIsValidNumber(value) ? max === min ? 1 : (value - min) / (max - min) : null; // Calculate the visual center Y of the arc for text positioning // For full circles, use geometric center. For partial arcs, calculate based on bounding box const angleDiffDeg = Math.abs(endAngle - startAngle); const isFullCircle = angleDiffDeg >= 360; let arcCenterY = center; if (!isFullCircle) { const startRad = (startAngle * Math.PI) / 180; const endRad = (endAngle * Math.PI) / 180; const startY = center - radius * Math.cos(startRad); const endY = center - radius * Math.cos(endRad); let minY = Math.min(startY, endY); let maxY = Math.max(startY, endY); const normStart = getNormalizedAngle(startAngle); const normEnd = getNormalizedAngle(endAngle); const includesTop = normStart > normEnd ? normStart <= 270 || normEnd >= 270 : normStart <= 270 && normEnd >= 270; const includesBottom = normStart > normEnd ? normStart <= 90 || normEnd >= 90 : normStart <= 90 && normEnd >= 90; if (includesTop) minY = Math.min(minY, center - radius); if (includesBottom) maxY = Math.max(maxY, center + radius); arcCenterY = (minY + maxY) / 2; } const labelId = React.useId(); const valueTextId = React.useId(); const contextValue = React.useMemo( () => ({ value, valueText, max, min, state, radius, thickness, size, center, percentage, startAngle, endAngle, arcLength, arcCenterY, valueTextId, labelId, }), [ value, valueText, max, min, state, radius, thickness, size, center, percentage, startAngle, endAngle, arcLength, arcCenterY, valueTextId, labelId, ], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function GaugeIndicator(props: React.ComponentProps<"svg">) { const { className, ...indicatorProps } = props; const { size, state, value, max, min, percentage } = useGaugeContext(INDICATOR_NAME); return ( ); } function GaugeTrack(props: PathProps) { const { className, ...trackProps } = props; const { center, radius, startAngle, endAngle, thickness, state } = useGaugeContext(TRACK_NAME); const pathData = describeArc(center, center, radius, startAngle, endAngle); return ( ); } function GaugeRange(props: PathProps) { const { className, ...rangeProps } = props; const { center, radius, startAngle, endAngle, value, max, min, state, thickness, arcLength, percentage, } = useGaugeContext(RANGE_NAME); const pathData = describeArc(center, center, radius, startAngle, endAngle); const strokeDasharray = arcLength; const strokeDashoffset = state === "indeterminate" ? 0 : percentage !== null ? arcLength - percentage * arcLength : arcLength; return ( ); } function GaugeValueText(props: DivProps) { const { asChild, className, children, style, ...valueTextProps } = props; const { valueTextId, state, arcCenterY, valueText } = useGaugeContext(VALUE_TEXT_NAME); const ValueTextPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children ?? valueText} ); } function GaugeLabel(props: DivProps) { const { asChild, className, ...labelProps } = props; const { labelId, state } = useGaugeContext(LABEL_NAME); const LabelPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function GaugeCombined(props: GaugeProps) { return ( ); } export { Gauge, GaugeCombined, GaugeIndicator, GaugeLabel, type GaugeProps, GaugeRange, GaugeTrack, GaugeValueText, }; 52:T76f,/** * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx */ import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // oxlint-disable-next-line react/exhaustive-deps -- we want to memoize by all values return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 4e:["$","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","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"ui/gauge.tsx","content":"$51","type":"registry:ui","target":""},{"path":"lib/compose-refs.ts","content":"$52","type":"registry:lib","target":""}],"className":"h-[70svh] min-h-80"}]]}]