52: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/3j06ow7w40nxu.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"] 53: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/3j06ow7w40nxu.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"] 54:T1404,import { ComponentProps } from 'react'; import { Body2, Label1 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G progress circle: 64/160/200/240/280px, stroke a flat 10% of the * diameter, neutral-50 track and a primary arc with a round cap. The circle * starts at twelve o'clock; the half circle spans the top 180 degrees from * nine o'clock. */ const DIAMETERS = { xxs: 64, xs: 160, sm: 200, md: 240, lg: 280 } as const; /** Cap heights measured off the Figma symbols resolve to this ladder. */ const VALUE_CLASSES = { xxs: 'text-sm', xs: 'text-2xl', sm: 'text-3xl', md: 'text-4xl', lg: 'text-5xl', } as const; const LABEL_CLASSES = { xxs: 'text-xs', xs: 'text-sm', sm: 'text-sm', md: 'text-base', lg: 'text-base', } as const; type TProgressCircleSize = keyof typeof DIAMETERS; type TProgressCircleShape = 'circle' | 'half'; /* * UX4G's ladder starts at 64px and runs to 280px — dashboard scale. A number is * accepted too, for the inline rings the kit has no size for. Font tracks the * measured ratio for those, since the named sizes are not on one curve. */ const NUMERIC_FONT_RATIO = 0.16; interface IProgressCircleProps extends Omit, 'children'> { value?: number; max?: number; size?: TProgressCircleSize | number; shape?: TProgressCircleShape; /** Caption shown with the value. Below the ring at `xxs`, inside it otherwise. */ label?: string; showValue?: boolean; } /** Circular or half-circular progress indicator. */ function ProgressCircle({ className, value = 0, max = 100, size = 'xxs', shape = 'circle', label, showValue = true, ...props }: IProgressCircleProps) { const custom = typeof size === 'number'; const diameter = custom ? size : DIAMETERS[size]; const stroke = Math.max(2, Math.round(diameter * 0.1)); const radius = (diameter - stroke) / 2; const centre = diameter / 2; const isHalf = shape === 'half'; const percent = Math.min(Math.max((value / max) * 100, 0), 100); const length = (isHalf ? Math.PI : 2 * Math.PI) * radius; const height = isHalf ? centre + stroke / 2 : diameter; // Half sweeps left-to-right over the top; full starts at twelve o'clock. const track = isHalf ? `M ${stroke / 2} ${centre} A ${radius} ${radius} 0 0 1 ${diameter - stroke / 2} ${centre}` : undefined; const shared = { fill: 'none', strokeWidth: stroke, strokeLinecap: 'round' as const, }; // Nothing legible fits inside a small ring beside the number. const captionInside = Boolean(label) && diameter >= 120; return (

{captionInside && ( {label} )} {showValue && ( {Math.round(percent)}% )}

{label && !captionInside && ( {label} )}

); } export type { TProgressCircleSize, TProgressCircleShape }; export { ProgressCircle }; 51:["$","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":[null,["$","$L52",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/progress-circle.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]