{"version":3,"file":"ProgressCard.CSfL2Ded.mjs","names":["useMemo","_Fragment"],"sources":["https:/framerusercontent.com/modules/IelSSdPVJMJ0KJHAs0d8/YnKj3JPuFWIHNI4VtnFA/ProgressCard.js"],"sourcesContent":["// Pill-shaped card with gradient progress ring and text stack\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useMemo}from\"react\";/**\n * Pill Progress Card\n *\n * @framerIntrinsicWidth 340\n * @framerIntrinsicHeight 90\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n *\n * Features:\n * - Pill-shaped card with customizable dark gradient background (cardGradient)\n * - Left: Progress ring with configurable gradient stroke (ringGradient), track color (trackColor), stroke width, and size\n * - Progress ring shows percentage (0–100) as a colored arc, with faint gray background track\n * - Right: Large numeric percentage (configurable color/font) and subtitle label (configurable color/font/text)\n * - All colors, progress, stroke width, text, and sizing are configurable via property controls\n * - No shadows or animations\n *\n * Toggles / Property Controls:\n * - Progress: Set the percentage value (0–100) shown by the ring and number\n * - Stroke Width: Adjust the thickness of the progress ring\n * - Ring Size: Set the diameter of the progress ring\n * - Ring Gradient: Set the color of the progress arc (solid color, uses Framer's Fill property)\n * - Track Color: Set the color of the background ring track\n * - Card Gradient: Set the card background color (uses Framer's Fill property)\n * - Percent Color: Set the color of the large percentage number\n * - Label Color: Set the color of the subtitle label\n * - Percent Font: Customize the font, size, and style of the percentage number\n * - Label Font: Customize the font, size, and style of the label\n * - Label: Set the subtitle text below the percentage\n */function ProgressCard(props){const{progress=72,strokeWidth=8,ringSize=64,ringGradient=\"#00F5A0\",trackColor=\"#E0E0E0\",cardGradient=\"#232526\",percentColor=\"#FFFFFF\",labelColor=\"#CCCCCC\",percentFont,labelFont,label=\"Completed\",style}=props;// Clamp progress\nconst pct=Math.max(0,Math.min(100,progress));const radius=(ringSize-strokeWidth)/2;const circumference=2*Math.PI*radius;const offset=circumference*(1-pct/100);// Only SSR-safe: generate SVG gradient stops as an array of objects, not elements\n// Remove unused parseGradientStops and stops logic\n// Use SVG defs for gradient ring\nconst gradId=useMemo(()=>`grad-${Math.random().toString(36).slice(2,10)}`,[ringGradient]);return /*#__PURE__*/_jsxs(\"div\",{style:{...style,display:\"flex\",alignItems:\"center\",borderRadius:999,background:cardGradient,padding:16,minHeight:ringSize+16,minWidth:220,width:\"100%\",boxSizing:\"border-box\",gap:20},children:[/*#__PURE__*/_jsxs(\"svg\",{width:ringSize,height:ringSize,style:{display:\"block\"},\"aria-label\":\"Progress ring\",children:[/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsx(\"linearGradient\",{id:gradId,x1:\"0%\",y1:\"0%\",x2:\"100%\",y2:\"100%\",children:typeof window===\"undefined\"?null:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0%\",stopColor:ringGradient}),/*#__PURE__*/_jsx(\"stop\",{offset:\"100%\",stopColor:ringGradient})]})})}),/*#__PURE__*/_jsx(\"circle\",{cx:ringSize/2,cy:ringSize/2,r:radius,stroke:trackColor,strokeWidth:strokeWidth,fill:\"none\"}),/*#__PURE__*/_jsx(\"circle\",{cx:ringSize/2,cy:ringSize/2,r:radius,stroke:`url(#${gradId})`,strokeWidth:strokeWidth,fill:\"none\",strokeDasharray:circumference,strokeDashoffset:offset,strokeLinecap:\"round\",style:{transition:\"none\"}})]}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",gap:2,minWidth:0},children:[/*#__PURE__*/_jsxs(\"span\",{style:{color:percentColor,...percentFont,fontSize:percentFont?.fontSize||32,fontWeight:percentFont?.variant?undefined:700,lineHeight:percentFont?.lineHeight||\"1em\",letterSpacing:percentFont?.letterSpacing||\"-0.01em\",whiteSpace:\"nowrap\",minWidth:0},children:[Math.round(pct),\"%\"]}),/*#__PURE__*/_jsx(\"span\",{style:{color:labelColor,...labelFont,fontSize:labelFont?.fontSize||15,fontWeight:labelFont?.variant?undefined:500,lineHeight:labelFont?.lineHeight||\"1.2em\",letterSpacing:labelFont?.letterSpacing||\"-0.01em\",opacity:.8,minWidth:0,whiteSpace:\"nowrap\"},children:label})]})]});}addPropertyControls(ProgressCard,{progress:{type:ControlType.Number,title:\"Progress\",min:0,max:100,defaultValue:72,unit:\"%\",step:1,displayStepper:true},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",min:2,max:24,defaultValue:8,step:1},ringSize:{type:ControlType.Number,title:\"Ring Size\",min:32,max:128,defaultValue:64,step:1},ringGradient:{type:ControlType.Color,title:\"Ring Gradient\",defaultValue:\"#00F5A0\"},trackColor:{type:ControlType.Color,title:\"Track Color\",defaultValue:\"#E0E0E0\"},cardGradient:{type:ControlType.Color,title:\"Card Gradient\",defaultValue:\"#232526\"},percentColor:{type:ControlType.Color,title:\"Percent Color\",defaultValue:\"#FFFFFF\"},labelColor:{type:ControlType.Color,title:\"Label Color\",defaultValue:\"#CCCCCC\"},percentFont:{type:ControlType.Font,title:\"Percent Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:32,variant:\"Bold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:15,variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},label:{type:ControlType.String,title:\"Label\",defaultValue:\"Completed\"}});export default ProgressCard;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProgressCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"90\",\"framerIntrinsicWidth\":\"340\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProgressCard.map"],"mappings":"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"}